@openeventkit/event-site 2.0.129 → 2.0.131

package/gatsby-node.js

@@ -92,12 +92,16 @@ const SSR_getEvents = async (baseUrl, summitId, accessToken) => {
 
   const endpoint = `${baseUrl}/api/v1/summits/${summitId}/events/published`;
 
+  const speakers_fields = ['id', 'first_name', 'last_name', 'title', 'bio','member_id','pic', 'big_pic', 'company'];
+  const current_attendance_fields = ['member_first_name', 'member_last_name', 'member_pic'];
+
   const params = {
     access_token: accessToken,
     per_page: 50,
     page: 1,
-    expand: "slides,links,videos,media_uploads,type,track,track.subtracks,track.allowed_access_levels,location,location.venue,location.floor,speakers,moderator,sponsors,current_attendance,groups,rsvp_template,tags",
-    relations: "speakers.badge_features,speakers.affiliations,speakers.languages,speakers.other_presentation_links,speakers.areas_of_expertise,speakers.travel_preferences,speakers.organizational_roles,speakers.all_presentations,speakers.all_moderated_presentations",
+    expand: 'slides,links,videos,media_uploads,type,track,track.subtracks,track.allowed_access_levels,location,location.venue,location.floor,speakers,moderator,sponsors,groups,rsvp_template,tags,current_attendance',
+    relations: 'speakers.badge_features,speakers.affiliations,speakers.languages,speakers.other_presentation_links,speakers.areas_of_expertise,speakers.travel_preferences,speakers.organizational_roles,speakers.all_presentations,speakers.all_moderated_presentations',
+    fields: `speakers.${speakers_fields.join(",speakers.")},current_attendance.${current_attendance_fields.join(',current_attendance.')}`,
   }
 
   return await axios.get(endpoint, { params }).then(async ({data}) => {
@@ -161,11 +165,27 @@ const SSR_getSponsorCollections = async (allSponsors, baseUrl, summitId, accessT
 
 const SSR_getSpeakers = async (baseUrl, summitId, accessToken, filter = null) => {
 
+  const speakers_relations = [
+    'badge_features',
+    'affiliations',
+    'languages',
+    'other_presentation_links',
+    'areas_of_expertise',
+    'travel_preferences',
+    'organizational_roles',
+    'all_presentations',
+    'all_moderated_presentations',
+  ];
+
+  const speakers_fields =
+    ['id', 'first_name', 'last_name', 'title', 'bio','member_id','pic', 'big_pic', 'company'];
+
   const params = {
     access_token: accessToken,
     per_page: 30,
     page: 1,
-    relations: 'badge_features,affiliations,languages,other_presentation_links,areas_of_expertise,travel_preferences,organizational_roles,all_presentations,all_moderated_presentations',
+    relations: speakers_relations.join(','),
+    fields: speakers_fields.join(',')
   };
 
   const endpoint = `${baseUrl}/api/v1/summits/${summitId}/speakers/on-schedule`;
@@ -273,11 +293,11 @@ exports.onPreBootstrap = async () => {
   // write colors json used to set runtime colors in gatsby-browser
   fs.writeFileSync(COLORS_FILE_PATH, JSON.stringify(colors), "utf8");
 
-  // generate and write colors SCSS file used by built styles 
+  // generate and write colors SCSS file used by built styles
   generateAndWriteScssFile(generateColorsScssFile, colors, COLORS_SCSS_FILE_PATH);
 
-  if (siteSettings.siteFont) {    
-    // generate and write font SCSS file used by built styles 
+  if (siteSettings.siteFont) {
+    // generate and write font SCSS file used by built styles
     generateAndWriteScssFile(generateFontScssFile, siteSettings.siteFont, FONTS_SCSS_FILE_PATH);
   }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openeventkit/event-site",
   "description": "Event Site",
-  "version": "2.0.129",
+  "version": "2.0.131",
   "author": "Tipit LLC",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
@@ -126,7 +126,7 @@
     "slick-carousel": "^1.8.1",
     "smoothscroll-polyfill": "^0.4.4",
     "socket.io-client": "^4.5.2",
-    "speakers-widget": "4.0.1",
+    "speakers-widget": "4.0.2",
     "stream-browserify": "^3.0.0",
     "stream-chat": "^2.7.2",
     "stream-chat-react": "3.1.7",

package/src/actions/event-actions.js

@@ -33,9 +33,20 @@ 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}));
+        const res = { response: event, err: null };
+        return Promise.resolve(res);
+    }
+    // then refresh from api
 
     let accessToken;
     try {

package/src/actions/fetch-entities-actions.js

@@ -6,6 +6,7 @@ import URI from "urijs";
  * @param accessToken
  * @returns {Promise<Response>}
  */
+
 export const fetchEventById = async (summitId, eventId, accessToken = null) => {
 
     let apiUrl = URI(`${process.env.GATSBY_SUMMIT_API_BASE_URL}/api/public/v1/summits/${summitId}/events/${eventId}/published`);
@@ -14,10 +15,13 @@ export const fetchEventById = async (summitId, eventId, accessToken = null) => {
         apiUrl.addQuery('access_token', accessToken);
     }
 
+    const speakers_fields = ['id', 'first_name', 'last_name', 'title', 'bio','member_id','pic', 'big_pic', 'company'];
+    const current_attendance_fields = ['member_first_name', 'member_last_name', 'member_pic'];
+
     apiUrl.addQuery('expand', 'slides, links, videos, media_uploads, type, track, track.allowed_access_levels, location, location.venue, location.floor, speakers, moderator, sponsors, current_attendance, groups, rsvp_template, tags');
     apiUrl.addQuery('evict_cache', 1);
     apiUrl.addQuery('relations', "speakers.badge_features,speakers.affiliations,speakers.languages,speakers.other_presentation_links,speakers.areas_of_expertise,speakers.travel_preferences,speakers.organizational_roles,speakers.all_presentations,speakers.all_moderated_presentations");
-
+    apiUrl.addQuery('fields', `speakers.${speakers_fields.join(",speakers.")},current_attendance.${current_attendance_fields.join(',current_attendance.')}`);
     return fetch(apiUrl.toString(), {
         method: 'GET'
     }).then(async (response) => {
@@ -53,7 +57,6 @@ export const fetchEventTypeById = async (summitId, eventTypeId, accessToken = nu
     });
 }
 
-
 /**
  *
  * @param summitId
@@ -101,8 +104,24 @@ export const fetchSpeakerById = async(summitId, speakerId, accessToken = null) =
         apiUrl.addQuery('access_token', accessToken);
     }
 
-    apiUrl.addQuery('relations', 'badge_features,affiliations,languages,other_presentation_links,areas_of_expertise,travel_preferences,organizational_roles,all_presentations,all_moderated_presentations');
+    const speakers_relations = [
+        'badge_features',
+        'affiliations',
+        'languages',
+        'other_presentation_links',
+        'areas_of_expertise',
+        'travel_preferences',
+        'organizational_roles',
+        'all_presentations',
+        'all_moderated_presentations',
+    ];
+
+    const speakers_fields =
+      ['id', 'first_name', 'last_name', 'title', 'bio','member_id','pic', 'big_pic', 'company'];
+
     apiUrl.addQuery('evict_cache', 1);
+    apiUrl.addQuery('relations', speakers_relations.join(','));
+    apiUrl.addQuery('fields', speakers_fields.join(','));
 
     return fetch(apiUrl.toString(), {
         method: 'GET'

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);