feat(Meetings): add quick settings for midweek and weekend meetings

src/features/about/index.tsx

@@ -1,15 +1,23 @@
-import { Box, IconButton } from '@mui/material';
+import { Box } from '@mui/material';
+import { IconClose, IconInfo, IconLogo, IconRestart } from '@icons/index';
+import { useAppTranslation } from '@hooks/index';
+import { AboutProps } from './index.types';
+import useAbout from './useAbout';
 import Button from '@components/button';
 import Dialog from '@components/dialog';
+import IconButton from '@components/icon_button';
 import TextMarkup from '@components/text_markup';
 import Typography from '@components/typography';
-import { IconClose, IconInfo, IconLogo } from '@icons/index';
-import { useAppTranslation } from '@hooks/index';
-import useAbout from './useAbout';
 
-const About = () => {
-  const { currentYear, handleClose, isOpen, handleOpenDoc, handleOpenSupport } =
-    useAbout();
+const About = (props: AboutProps) => {
+  const {
+    currentYear,
+    handleClose,
+    isOpen,
+    handleOpenDoc,
+    handleOpenSupport,
+    handleForceReload,
+  } = useAbout(props);
 
   const { t } = useAppTranslation();
 
@@ -47,18 +55,31 @@ const About = () => {
       <Box
         sx={{
           display: 'flex',
-          padding: 'var(--radius-none)',
           alignItems: 'center',
-          gap: '16px',
+          justifyContent: 'space-between',
+          width: '100%',
         }}
       >
-        <IconLogo width={40} height={40} />
-        <Box>
-          <Typography className="h3">Organized</Typography>
-          <Typography className="body-regular" color="var(--grey-350)">
-            {import.meta.env.PACKAGE_VERSION}
-          </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            padding: 'var(--radius-none)',
+            alignItems: 'center',
+            gap: '16px',
+          }}
+        >
+          <IconLogo width={40} height={40} />
+          <Box>
+            <Typography className="h3">Organized</Typography>
+            <Typography className="body-regular" color="var(--grey-350)">
+              {import.meta.env.PACKAGE_VERSION}
+            </Typography>
+          </Box>
         </Box>
+
+        <IconButton onClick={handleForceReload}>
+          <IconRestart color="var(--black)" />
+        </IconButton>
       </Box>
 
       <TextMarkup content={t('tr_appAboutDesc')} className="body-regular" />

src/features/about/index.types.ts

@@ -0,0 +1,3 @@
+export type AboutProps = {
+  updatePwa: VoidFunction;
+};

src/features/about/useAbout.tsx

@@ -1,12 +1,25 @@
 import { useRecoilValue } from 'recoil';
 import { isAboutOpenState } from '@states/app';
 import { setIsAboutOpen, setIsSupportOpen } from '@services/recoil/app';
+import { AboutProps } from './index.types';
 
 const currentYear = new Date().getFullYear();
 
-const useAbout = () => {
+const useAbout = ({ updatePwa }: AboutProps) => {
   const isOpen = useRecoilValue(isAboutOpenState);
 
+  const handleForceReload = () => {
+    try {
+      updatePwa();
+
+      setTimeout(() => {
+        window.location.reload();
+      }, 2000);
+    } catch (error) {
+      console.error(error.message);
+    }
+  };
+
   const handleClose = async () => {
     await setIsAboutOpen(false);
   };
@@ -20,7 +33,14 @@ const useAbout = () => {
     window.open(`https://guide.organized-app.com`, '_blank');
   };
 
-  return { isOpen, handleClose, currentYear, handleOpenDoc, handleOpenSupport };
+  return {
+    isOpen,
+    handleClose,
+    currentYear,
+    handleOpenDoc,
+    handleOpenSupport,
+    handleForceReload,
+  };
 };
 
 export default useAbout;

src/features/congregation/settings/congregation_privacy/index.tsx

@@ -7,6 +7,7 @@ import { useAppTranslation } from '@hooks/index';
 import useCongregationPrivacy from './useCongregationPrivacy';
 import AccessCodeView from './access_code_view';
 import MasterKeyView from './master_key_view';
+import OutgoingTalkAccess from './outgoing_talk_access';
 import SwitchWithLabel from '@components/switch_with_label';
 
 const CongregationPrivacy = () => {
@@ -15,8 +16,6 @@ const CongregationPrivacy = () => {
   const {
     timeAwayPublic,
     handleTimeAwayPublicToggle,
-    outgoingTalksPublic,
-    handleOutgoingTalksPublicToggle,
     isUserAdmin,
     isConnected,
   } = useCongregationPrivacy();
@@ -34,12 +33,8 @@ const CongregationPrivacy = () => {
           checked={timeAwayPublic}
           onChange={handleTimeAwayPublicToggle}
         />
-        <SwitchWithLabel
-          label={t('tr_showOutgoingToAll')}
-          helper={t('tr_showOutgoingToAllDesc')}
-          checked={outgoingTalksPublic}
-          onChange={handleOutgoingTalksPublicToggle}
-        />
+
+        <OutgoingTalkAccess />
       </CardSectionContent>
 
       {isConnected && isUserAdmin && (

src/features/congregation/settings/congregation_privacy/outgoing_talk_access/index.tsx

@@ -0,0 +1,21 @@
+import { useAppTranslation } from '@hooks/index';
+import useCongregationPrivacy from './useOutgoingTalkAccess';
+import SwitchWithLabel from '@components/switch_with_label';
+
+const OutgoingTalkAccess = () => {
+  const { t } = useAppTranslation();
+
+  const { outgoingTalksPublic, handleOutgoingTalksPublicToggle } =
+    useCongregationPrivacy();
+
+  return (
+    <SwitchWithLabel
+      label={t('tr_showOutgoingToAll')}
+      helper={t('tr_showOutgoingToAllDesc')}
+      checked={outgoingTalksPublic}
+      onChange={handleOutgoingTalksPublicToggle}
+    />
+  );
+};
+
+export default OutgoingTalkAccess;

src/features/congregation/settings/congregation_privacy/outgoing_talk_access/useOutgoingTalkAccess.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { settingsState, userDataViewState } from '@states/settings';
+import { dbAppSettingsUpdate } from '@services/dexie/settings';
+
+const useOutgoingTalkAccess = () => {
+  const settings = useRecoilValue(settingsState);
+  const dataView = useRecoilValue(userDataViewState);
+
+  const [outgoingTalksPublic, setOutgoingTalksPublic] = useState(false);
+
+  const handleOutgoingTalksPublicToggle = async () => {
+    const weekendSettings = structuredClone(
+      settings.cong_settings.weekend_meeting
+    );
+
+    const current = weekendSettings.find((record) => record.type === dataView);
+
+    current.outgoing_talks_schedule_public.value = !outgoingTalksPublic;
+    current.outgoing_talks_schedule_public.updatedAt = new Date().toISOString();
+
+    await dbAppSettingsUpdate({
+      'cong_settings.weekend_meeting': weekendSettings,
+    });
+  };
+
+  useEffect(() => {
+    const weekendSettings = settings.cong_settings.weekend_meeting.find(
+      (record) => record.type === dataView
+    );
+
+    setOutgoingTalksPublic(
+      weekendSettings.outgoing_talks_schedule_public.value
+    );
+  }, [settings, dataView]);
+
+  return {
+    outgoingTalksPublic,
+    handleOutgoingTalksPublicToggle,
+  };
+};
+
+export default useOutgoingTalkAccess;

src/features/congregation/settings/congregation_privacy/useCongregationPrivacy.tsx

@@ -1,21 +1,15 @@
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import {
-  adminRoleState,
-  settingsState,
-  userDataViewState,
-} from '@states/settings';
+import { adminRoleState, settingsState } from '@states/settings';
 import { dbAppSettingsUpdate } from '@services/dexie/settings';
 import { congAccountConnectedState } from '@states/app';
 
 const useCongregationPrivacy = () => {
   const settings = useRecoilValue(settingsState);
-  const dataView = useRecoilValue(userDataViewState);
   const isUserAdmin = useRecoilValue(adminRoleState);
   const isConnected = useRecoilValue(congAccountConnectedState);
 
   const [timeAwayPublic, setTimeAwayPublic] = useState(false);
-  const [outgoingTalksPublic, setOutgoingTalksPublic] = useState(false);
 
   const handleTimeAwayPublicToggle = async () => {
     const timeAway = structuredClone(settings.cong_settings.time_away_public);
@@ -28,38 +22,13 @@ const useCongregationPrivacy = () => {
     });
   };
 
-  const handleOutgoingTalksPublicToggle = async () => {
-    const weekendSettings = structuredClone(
-      settings.cong_settings.weekend_meeting
-    );
-
-    const current = weekendSettings.find((record) => record.type === dataView);
-
-    current.outgoing_talks_schedule_public.value = !outgoingTalksPublic;
-    current.outgoing_talks_schedule_public.updatedAt = new Date().toISOString();
-
-    await dbAppSettingsUpdate({
-      'cong_settings.weekend_meeting': weekendSettings,
-    });
-  };
-
   useEffect(() => {
     setTimeAwayPublic(settings.cong_settings.time_away_public.value);
-
-    const weekendSettings = settings.cong_settings.weekend_meeting.find(
-      (record) => record.type === dataView
-    );
-
-    setOutgoingTalksPublic(
-      weekendSettings.outgoing_talks_schedule_public.value
-    );
-  }, [settings, dataView]);
+  }, [settings]);
 
   return {
     timeAwayPublic,
-    outgoingTalksPublic,
     handleTimeAwayPublicToggle,
-    handleOutgoingTalksPublicToggle,
     isUserAdmin,
     isConnected,
   };

src/features/congregation/settings/meeting_forms/display_name/index.tsx

@@ -0,0 +1,20 @@
+import { useAppTranslation } from '@hooks/index';
+import useDisplayName from './useDisplayName';
+import SwitchWithLabel from '@components/switch_with_label';
+
+const DisplayName = () => {
+  const { t } = useAppTranslation();
+
+  const { displayNameMeeting, handleDisplayNameMeetingToggle } =
+    useDisplayName();
+
+  return (
+    <SwitchWithLabel
+      label={t('tr_useDisplayNameMeeting')}
+      checked={displayNameMeeting}
+      onChange={handleDisplayNameMeetingToggle}
+    />
+  );
+};
+
+export default DisplayName;

src/features/congregation/settings/meeting_forms/display_name/useDisplayName.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+import { settingsState, userDataViewState } from '@states/settings';
+import { dbAppSettingsUpdate } from '@services/dexie/settings';
+
+const useMeetingForms = () => {
+  const settings = useRecoilValue(settingsState);
+  const dataView = useRecoilValue(userDataViewState);
+
+  const [displayNameMeeting, setDisplayNameMeeting] = useState(false);
+
+  const handleDisplayNameMeetingToggle = async () => {
+    const displayNameEnabled = structuredClone(
+      settings.cong_settings.display_name_enabled.meetings
+    );
+
+    displayNameEnabled.value = !displayNameMeeting;
+    displayNameEnabled.updatedAt = new Date().toISOString();
+
+    await dbAppSettingsUpdate({
+      'cong_settings.display_name_enabled.meetings': displayNameEnabled,
+    });
+  };
+
+  useEffect(() => {
+    setDisplayNameMeeting(
+      settings.cong_settings.display_name_enabled.meetings.value
+    );
+  }, [settings, dataView]);
+
+  return {
+    displayNameMeeting,
+    handleDisplayNameMeetingToggle,
+  };
+};
+
+export default useMeetingForms;