@openeventkit/event-site 2.0.129 → 2.0.130

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.129",
+  "version": "2.0.130",
   "author": "Tipit LLC",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",

package/src/actions/event-actions.js

@@ -33,9 +33,18 @@ export const setEventLastUpdate = (lastUpdate) => (dispatch) => {
  */
 export const getEventById = (
     eventId
-) => async (dispatch) => {
+) => async (dispatch, getState) => {
 
     dispatch(startLoading());
+    // if we have it on the reducer , provide that first
+    let {allSchedulesState: {allEvents}} = getState();
+    const event = allEvents.find(ev => ev.id === parseInt(eventId));
+
+    if (event) {
+        dispatch(stopLoading());
+        dispatch(createAction(GET_EVENT_DATA)({event}));
+    }
+    // then refresh from api
 
     let accessToken;
     try {

package/src/components/AvatarEditorModal/index.js

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import AvatarEditor from "react-avatar-editor";
+import { AjaxLoader } from "openstack-uicore-foundation/lib/components";
 import { Box, Typography, Slider, Modal } from "@mui/material";
 import { Button, IconButton } from "../ui";
 import { styled } from "@mui/system";
@@ -15,30 +16,50 @@ const CustomSlider = styled(Slider)(({ theme }) => ({
   color: "var(--color-primary)"
 }));
 
-const AvatarEditorModal = ({
-  userProfile,
-  open,
-  changePicture,
+const getUserProfilePic = async (imageUrl) => {
+  try {
+    const response = await fetch(imageUrl, {
+      method: "GET",
+      mode: "cors"
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch image: ${response.statusText}`);
+    }
+
+    const blob = await response.blob();
+    const imageObjectURL = URL.createObjectURL(blob);
+    return imageObjectURL;
+  } catch (error) {
+    console.error("Error fetching image:", error);
+    throw error;
+  }
+};
+
+const AvatarUploadButton = ({
+  onUpload,
+  ...rest
+}) => (
+  <IconButton
+    onClick={onUpload}
+    {...rest}
+  >
+    <CameraAltIcon fontSize="large" />
+  </IconButton>
+);
+
+const AvatarEditorContent = ({
+  editorRef,
+  image,
+  onUpload,
+  handleSave,
   handleClose
 }) => {
-  const editorRef = useRef(null);
-  const fileInputRef = useRef(null);
-
-  const [image, setImage] = useState(userProfile.picture || null);
   const [position, setPosition] = useState({ x: 0.5, y: 0.5 });
   const [scale, setScale] = useState(1);
   const [rotate, setRotate] = useState(0);
   const [newImage, setNewImage] = useState(false);
 
-  useEffect(() => {
-    setImage(userProfile.picture);
-  }, [userProfile.picture]);
-
-  const handleNewImage = (e) => {
-    setImage(e.target.files[0]);
-    setNewImage(true);
-  };
-
   const handleScale = (e, newValue) => {
     setScale(newValue);
     setNewImage(true);
@@ -59,13 +80,161 @@ const AvatarEditorModal = ({
     setNewImage(true);
   };
 
+  return (
+    <>
+      <Box
+        sx={{
+          padding: "20px",
+          textAlign: "center",
+          position: "relative"
+        }}
+      >
+        <AvatarEditor
+          ref={editorRef}
+          image={image}
+          width={200}
+          height={200}
+          border={50}
+          color={[0, 0, 0, 0.8]}
+          position={position}
+          onPositionChange={handlePositionChange}
+          scale={scale}
+          rotate={rotate}
+        />
+        <AvatarUploadButton
+          onUpload={onUpload}
+          sx={{
+            position: "absolute",
+            top: "79.5%",
+            right: "45%",
+            color: "#fff"
+          }}
+        />
+      </Box>
+      <Box
+        sx={{
+          px: "20px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "20px"
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            gap: "20px",
+            justifyContent: "center"
+          }}
+        >
+          <Typography
+            sx={{
+              fontSize: "1.5rem",
+              fontFamily: "var(--font_family)"
+            }}
+          >
+            Zoom
+          </Typography>
+          <CustomSlider
+            value={scale}
+            min={0}
+            max={2}
+            step={0.01}
+            onChange={handleScale}
+            sx={{ flex: 1, mx: 2 }}
+          />
+        </Box>
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center"
+          }}
+        >
+          <Typography
+            sx={{
+              fontSize: "1.5rem",
+              fontFamily: "var(--font_family)"
+            }}
+          >
+            Rotate
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              flex: 1,
+              justifyContent: "center",
+              gap: "20px"
+            }}
+          >
+            <IconButton onClick={rotateLeft}>
+              <RotateLeftIcon fontSize="inherit" />
+            </IconButton>
+            <IconButton onClick={rotateRight}>
+              <RotateRightIcon fontSize="inherit" />
+            </IconButton>
+          </Box>
+        </Box>
+      </Box>
+      <Box
+        sx={{
+          backgroundColor: "var(--color_background_light)",
+          display: "flex",
+          justifyContent: "space-between",
+          padding: "20px",
+          gap: "20px"
+        }}
+      >
+        <Button onClick={handleClose}>Discard</Button>
+        <Button onClick={handleSave} disabled={!newImage}>
+          Update
+        </Button>
+      </Box>
+    </>
+  );
+};
+
+const AvatarEditorModal = ({
+  userProfile,
+  open,
+  changePicture,
+  handleClose,
+}) => {
+  const editorRef = useRef(null);
+  const fileInputRef = useRef(null);
+
+  const [image, setImage] = useState(null);
+  const [loadingPicture, setLoadingPicture] = useState(false);
+  const [fetchError, setFetchError] = useState(false);
+
+  useEffect(() => {
+    setLoadingPicture(true);
+    getUserProfilePic(userProfile.picture)
+      .then((imageObjectURL) => {
+        setImage(imageObjectURL);
+        setFetchError(false);
+      })
+      .catch(() => {
+        setFetchError(true);
+      })
+      .finally(() => {
+        setLoadingPicture(false);
+      });
+  }, [userProfile.picture]);
+
+  const handleNewImage = (e) => {
+    setImage(e.target.files[0]);
+    setFetchError(false);
+  };
+
   const handleSave = () => {
-    if (editorRef.current && newImage) {
+    if (editorRef.current) {
       const canvas = editorRef.current.getImage().toDataURL();
       fetch(canvas)
         .then((res) => res.blob())
         .then((blob) => {
-          const file = new File([blob], `${create_UUID()}.png`, { type: blob.type });
+          const file = new File([blob], `${create_UUID()}.png`, {
+            type: blob.type
+          });
           changePicture(file);
         });
     }
@@ -124,36 +293,13 @@ const AvatarEditorModal = ({
             <i className="fa fa-times" />
           </IconButton>
         </Box>
-        <Box
-          sx={{
-            padding: "20px",
-            textAlign: "center",
-            position: "relative"
-          }}
-        >
-          <AvatarEditor
-            ref={editorRef}
-            image={image}
-            width={200}
-            height={200}
-            border={50}
-            color={[0, 0, 0, 0.8]}
-            position={position}
-            onPositionChange={handlePositionChange}
-            scale={scale}
-            rotate={rotate}
+        <Box>
+          <AjaxLoader
+            relative={true}
+            color={"var(--color_background_light)"}
+            show={loadingPicture}
+            size={120}
           />
-          <IconButton
-            onClick={() => fileInputRef.current.click()}
-            sx={{
-              position: "absolute",
-              top: "79.5%",
-              right: "44%",
-              color: "#fff"
-            }}
-          >
-            <CameraAltIcon fontSize="inherit" />
-          </IconButton>
           <input
             ref={fileInputRef}
             type="file"
@@ -161,86 +307,44 @@ const AvatarEditorModal = ({
             style={{ display: "none" }}
             onChange={handleNewImage}
           />
-        </Box>
-        <Box
-          sx={{
-            px: "20px",
-            display: "flex",
-            flexDirection: "column",
-            gap: "20px"
-          }}
-        >
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              gap: "20px",
-              justifyContent: "center"
-            }}
-          >
-            <Typography
-              sx={{
-                fontSize: "1.5rem",
-                fontFamily: "var(--font_family)"
-              }
-            }>
-              Zoom
-            </Typography>
-            <CustomSlider
-              value={scale}
-              min={0}
-              max={2}
-              step={0.01}
-              onChange={handleScale}
-              sx={{ flex: 1, mx: 2 }}
-            />
-          </Box>
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center"
-            }}
-          >
-            <Typography
-              sx={{
-                fontSize: "1.5rem",
-                fontFamily: "var(--font_family)"
-              }}
-            >
-              Rotate
-            </Typography>
+          {fetchError ? (
             <Box
-              sx={{
-                display: "flex",
-                flex: 1,
-                justifyContent: "center",
-                gap: "20px"
-              }}
-            >
-              <IconButton onClick={rotateLeft}>
-                <RotateLeftIcon fontSize="inherit" />
-              </IconButton>
-              <IconButton onClick={rotateRight}>
-                <RotateRightIcon fontSize="inherit" />
-              </IconButton>
+                sx={{
+                  padding: "20px",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: "20px"
+                }}
+              >
+              <Typography
+                sx={{
+                  fontSize: "1.5rem",
+                  fontFamily: "var(--font_family)",
+                  color: "var(--color_text_dark)"
+                }}
+              >
+                There was an error retrieving your profile picture.
+                Please upload a new one.
+              </Typography>
+              <AvatarUploadButton
+                onUpload={() => fileInputRef.current.click()}
+                sx={{
+                  color: "var(--color-primary)",
+                  border: "1px solid var(--color-primary)",
+                  padding: "10px"
+                }}
+              />
             </Box>
-          </Box>
-        </Box>
-        <Box
-          sx={{
-            backgroundColor: "var(--color_background_light)",
-            display: "flex",
-            justifyContent: "space-between",
-            padding: "20px",
-            gap: "20px"
-          }}
-        >
-          <Button onClick={handleClose}>
-            Discard
-          </Button>
-          <Button onClick={handleSave} disabled={!newImage}>
-            Update
-          </Button>
+          ) : (
+            <AvatarEditorContent
+              editorRef={editorRef}
+              image={image}
+              onUpload={() => fileInputRef.current.click()}
+              handleSave={handleSave}
+              handleClose={handleClose}
+            />
+          )}
         </Box>
       </Box>
     </Modal>

package/src/styles/style.scss

@@ -202,7 +202,7 @@ h2 {
 }
 
 .talk {
-  color: var(--color_text_med);
+  color: var(--color_text_dark);
 
   &__break {
     background-color: var(--color_secondary);