S23 user privacy setting

src/components/EventList/components/EventItem/index.jsx

@@ -45,6 +45,7 @@ const EventItem = ({ event }) => {
  endTime={format(new Date(event.EndDate), 'HH:mm')}
  timeZone="America/New_York"
  description={event.Description}
+ onClick={() => setExpanded((e) => !e)}
  ></add-to-calendar-button>
  )}
  </CardContent>

src/components/Profile/components/MembershipsList/components/MembershipInfoCard/MembershipInfoCard.module.scss

@@ -6,7 +6,8 @@
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
- word-break: break-word;
+ word-break: keep-all;
+ flex-wrap: wrap;
  a {
  color: $primary-blue;
  &:hover {
@@ -40,7 +41,7 @@
  margin-right: 0.5rem;
 }
 
-@media (max-width: 500px) {
+@media (max-width: $break-sm) {
  .membership_info_card {
  padding: 1.5rem 0rem;
  flex-direction: column-reverse;
@@ -50,7 +51,6 @@
  flex-direction: row-reverse;
  padding: 0.5rem;
  &_text {
- // padding-right: 0rem !important;
  border-left: 2px solid $primary-blue;
  }
  }

src/components/Profile/components/MembershipsList/components/MembershipInfoCard/index.jsx

@@ -1,34 +1,83 @@
-import { Divider, Grid, List, ListItem, Switch, Typography } from '@mui/material/';
-import LockIcon from '@mui/icons-material/Lock';
+import {
+ Divider,
+ Grid,
+ List,
+ ListItem,
+ Switch,
+ Typography,
+ Accordion,
+ AccordionSummary,
+ AccordionDetails,
+} from '@mui/material/';
 import useNetworkStatus from 'hooks/useNetworkStatus';
 import { Link } from 'react-router-dom';
 import styles from './MembershipInfoCard.module.css';
+import membershipService from 'services/membership';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
-const MembershipInfoCard = ({ myProf, membership, onTogglePrivacy }) => {
- const isOnline = useNetworkStatus();
-
- const OnlineOnlyLink = ({ children }) => {
- const showPrivate = membership.IsInvolvementPrivate || membership.Privacy;
- if (isOnline) {
- return (
- <Link
- className={`gc360_text_link ${
- showPrivate ? styles.private_membership : styles.public_membership
- }`}
- to={`/activity/${membership.SessionCode}/${membership.ActivityCode}`}
- >
- {children}
- </Link>
- );
- } else {
- return (
- <div className={`${showPrivate ? styles.private_membership : styles.public_membership}`}>
- {children}
- </div>
+const PrivacyToggle = ({ element, createSnackbar }) => {
+ const toggleMembershipPrivacy = async (element) => {
+ try {
+ const update = await membershipService.setMembershipPrivacy(
+ element.MembershipID,
+ !element.Privacy,
  );
+ element.Privacy = !element.Privacy;
+
+ if (update.Privacy === element.Privacy) {
+ createSnackbar(element.Privacy ? 'Membership Hidden' : 'Membership Shown', 'success');
+ } else {
+ createSnackbar(
+ element.Privacy ? 'Failed to Show Membership' : 'Failed to Hide Membership',
+ 'error',
+ );
+ }
+ } catch {
+ createSnackbar('Privacy Change Failed', 'error');
  }
  };
 
+ return (
+ <Grid container item xs={4} alignItems="center">
+ <Grid item xs={12} align="center">
+ <Switch
+ onChange={() => toggleMembershipPrivacy(element)}
+ checked={!element.Privacy}
+ key={element.ActivityDescription + element.ActivityCode}
+ />
+ </Grid>
+ <Grid item xs={12} align="center">
+ <Typography>{element.Privacy ? 'Private' : 'Public'}</Typography>
+ </Grid>
+ </Grid>
+ );
+};
+
+const OnlineOnlyLink = ({ element, children }) => {
+ const isOnline = useNetworkStatus();
+ const showPrivate = element.IsInvolvementPrivate || element.Privacy;
+ if (isOnline) {
+ return (
+ <Link
+ className={`gc360_text_link ${
+ showPrivate ? styles.private_membership : styles.public_membership
+ }`}
+ to={`/activity/${element.SessionCode}/${element.ActivityCode}`}
+ >
+ {children}
+ </Link>
+ );
+ } else {
+ return (
+ <div className={`${showPrivate ? styles.private_membership : styles.public_membership}`}>
+ {children}
+ </div>
+ );
+ }
+};
+
+const MembershipInfoCard = ({ myProf, membershipHistory, createSnackbar }) => {
+ const isOnline = useNetworkStatus();
  return (
  <>
  <Grid
@@ -38,69 +87,57 @@ const MembershipInfoCard = ({ myProf, membership, onTogglePrivacy }) => {
  className={styles.membership_info_card}
  >
  <Grid
- container
  item
- xs={8}
- sm={9}
- lg={8}
- xl={9}
- justifyContent="flex-start"
- alignItems="center"
+ xs={9}
+ sm={10}
+ lg={9}
+ xl={10}
  className={styles.membership_info_card_description}
  >
- <Grid item xs={8}>
- <List>
- <ListItem className={styles.my_profile_info_card_description_text}>
- <OnlineOnlyLink>
- <Typography fontWeight="fontWeightBold">
- {membership.ActivityDescription}
- </Typography>
- <Typography>{membership.SessionDescription}</Typography>
- <Typography>{membership.ParticipationDescription}</Typography>
- </OnlineOnlyLink>
- </ListItem>
- </List>
- </Grid>
-
- {myProf && (
- <Grid container item xs={4} alignItems="center">
- <Grid item xs={12} align="center">
- {isOnline &&
- (membership.IsInvolvementPrivate ? (
- <LockIcon className={styles.lock_icon} />
- ) : (
- <Switch
- onChange={() => {
- onTogglePrivacy(membership);
- }}
- checked={!membership.Privacy}
- />
- ))}
- </Grid>
- <Grid item xs={12} align="center">
- <Typography>
- {membership.Privacy || membership.IsInvolvementPrivate ? 'Private' : 'Public'}
- </Typography>
- </Grid>
- </Grid>
- )}
+ <Accordion>
+ <AccordionSummary expandIcon={<KeyboardArrowDownIcon />}>
+ <Typography fontWeight="fontWeightBold">
+ {membershipHistory.ActivityDescription}
+ </Typography>
+ </AccordionSummary>
+ <AccordionDetails>
+ <List>
+ {membershipHistory.Memberships.map((session) => (
+ <ListItem key={membershipHistory.ActivityCode}>
+ <Grid container xs={12} className={styles.membership_info_card_description}>
+ <Grid item xs={7}>
+ <OnlineOnlyLink element={session}>
+ <Typography>{session.SessionDescription}</Typography>
+ <Typography>{session.ParticipationDescription}</Typography>
+ </OnlineOnlyLink>
+ </Grid>
+ <Grid item xs={4}>
+ {myProf && (
+ <PrivacyToggle element={session} createSnackbar={createSnackbar} />
+ )}
+ </Grid>
+ </Grid>
+ </ListItem>
+ ))}
+ </List>
+ </AccordionDetails>
+ </Accordion>
  </Grid>
-
  <Grid
- container
  item
- xs={4}
- sm={3}
- lg={4}
- xl={3}
+ xs={3}
+ sm={2}
+ lg={3}
+ xl={2}
  className={styles.membership_info_card_image}
  alignItems="center"
+ container
  >
- <OnlineOnlyLink>
+ <OnlineOnlyLink element={membershipHistory.Memberships[0]}>
  <img
- src={membership.ActivityImagePath}
+ src={membershipHistory.ActivityImagePath}
  alt=""
- className={isOnline ? styles.active : ''}
+ className={isOnline ? 'active' : ''}
  />
  </OnlineOnlyLink>
  </Grid>

src/components/Profile/components/MembershipsList/index.jsx

@@ -2,7 +2,6 @@ import { Button, Card, CardContent, CardHeader, Grid, List, Typography } from '@
 import GordonLoader from 'components/Loader';
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import activity from 'services/activity';
 import membershipService from 'services/membership';
 import MembershipInfoCard from './components/MembershipInfoCard';
 import styles from './MembershipsList.module.css';
@@ -19,6 +18,7 @@ import styles from './MembershipsList.module.css';
 const MembershipsList = ({ username, myProf, createSnackbar }) => {
  const [memberships, setMemberships] = useState([]);
  const [loading, setLoading] = useState(true);
+ const [membershipHistories, setMembershipHistories] = useState([]);
 
  useEffect(() => {
  async function loadMemberships() {
@@ -27,22 +27,19 @@ const MembershipsList = ({ username, myProf, createSnackbar }) => {
  const memberships = await membershipService.get({ username, sessionCode: '*' });
 
  if (myProf) {
- await Promise.all(
- memberships.map(async (membership) => {
- const involvement = await activity.get(membership.ActivityCode);
- membership.IsInvolvementPrivate = involvement.Privacy;
- }),
- );
+ const myMemberships = await membershipService.groupByActivityCode(username);
+ setMembershipHistories(myMemberships);
+ } else {
+ const publicMemberships = await membershipService.getPublicMemberships(username);
+ setMembershipHistories(publicMemberships);
  }
-
- setMemberships(memberships);
  setLoading(false);
  }
  loadMemberships();
  }, [myProf, username]);
 
  const MembershipsList = () => {
- if (memberships.length === 0) {
+ if (membershipHistories.length === 0) {
  return (
  <Link to={`/involvements`}>
  <Typography variant="body2" className={styles.noMemberships}>
@@ -51,44 +48,17 @@ const MembershipsList = ({ username, myProf, createSnackbar }) => {
  </Link>
  );
  } else {
- return memberships.map((membership) => (
+ return membershipHistories.map((membership) => (
  <MembershipInfoCard
  myProf={myProf}
- membership={membership}
- key={membership.MembershipID}
- onTogglePrivacy={toggleMembershipPrivacy}
+ membershipHistory={membership}
+ key={membership.ActivityCode}
+ createSnackbar={createSnackbar}
  />
  ));
  }
  };
 
- const toggleMembershipPrivacy = async (membership) => {
- try {
- let updated = await membershipService.setMembershipPrivacy(
- membership.MembershipID,
- !membership.Privacy,
- );
- if (updated.Privacy !== membership.Privacy) {
- createSnackbar(membership.Privacy ? 'Membership Shown' : 'Membership Hidden', 'success');
- } else {
- createSnackbar(
- membership.Privacy ? 'Failed to Show Membership' : 'Failed to Hide Membership',
- 'error',
- );
- }
- setMemberships(
- memberships.map((m) => {
- if (m.MembershipID === membership.MembershipID) {
- m.Privacy = !m.Privacy;
- }
- return m;
- }),
- );
- } catch {
- createSnackbar('Privacy Change Failed', 'error');
- }
- };
-
  if (loading) {
  return <GordonLoader />;
  }