From 9f25f74d93329949d4596a789665cf01c635246f Mon Sep 17 00:00:00 2001
From: Patrick O'Sullivan <patrick@osullivan.io>
Date: Thu, 7 Apr 2022 14:25:10 -0500
Subject: [PATCH] groups: show group settings menu when pressing settings cog
 on mobile

---
 pkg/interface/src/logic/lib/useMedia.ts       | 21 ++++++++++
 .../landscape/components/GroupSwitcher.tsx    | 42 ++++++++++++++-----
 2 files changed, 52 insertions(+), 11 deletions(-)
 create mode 100644 pkg/interface/src/logic/lib/useMedia.ts

diff --git a/pkg/interface/src/logic/lib/useMedia.ts b/pkg/interface/src/logic/lib/useMedia.ts
new file mode 100644
index 000000000..07c560ff0
--- /dev/null
+++ b/pkg/interface/src/logic/lib/useMedia.ts
@@ -0,0 +1,21 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export const useMedia = (mediaQuery: string) => {
+  const [match, setMatch] = useState(false);
+
+  const update = useCallback((e: MediaQueryListEvent) => {
+    setMatch(e.matches);
+  }, []);
+
+  useEffect(() => {
+    const query = window.matchMedia(mediaQuery);
+
+    query.addEventListener('change', update);
+    update({ matches: query.matches } as MediaQueryListEvent);
+    return () => {
+      query.removeEventListener('change', update);
+    };
+  }, [update]);
+
+  return match;
+};
diff --git a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx
index bdabaaf16..acc05a8a7 100644
--- a/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx
+++ b/pkg/interface/src/views/landscape/components/GroupSwitcher.tsx
@@ -10,6 +10,7 @@ import { Link } from 'react-router-dom';
 import { uxToHex } from '~/logic/lib/util';
 import { getTitleFromWorkspace } from '~/logic/lib/workspace';
 import useMetadataState from '~/logic/state/metadata';
+import { useMedia } from '~/logic/lib/useMedia';
 import { Workspace } from '~/types/workspace';
 import { Dropdown } from '~/views/components/Dropdown';
 import { MetadataIcon } from './MetadataIcon';
@@ -76,6 +77,7 @@ export function GroupSwitcher(props: {
   isAdmin: any;
 }) {
   const { workspace, isAdmin } = props;
+  const isMobile = useMedia('(max-width: 639px)')
   const associations = useMetadataState(state => state.associations);
   const title = getTitleFromWorkspace(associations, workspace);
   const metadata = (workspace.type === 'home' || workspace.type  === 'messages')
@@ -144,14 +146,26 @@ export function GroupSwitcher(props: {
                       />
                       <Text> Participants</Text>
                     </GroupSwitcherItem>
-                    <GroupSwitcherItem to={navTo('/popover/settings')}>
-                      <Icon
-                        mr={2}
-                        color="gray"
-                        icon="Gear"
-                      />
-                      <Text> Group Settings</Text>
-                    </GroupSwitcherItem>
+                    {isMobile ? (
+                      <GroupSwitcherItem to={navTo('/popover')}>
+                        <Icon
+                          mr={2}
+                          color="gray"
+                          icon="Gear"
+                        />
+                        <Text> Group Settings</Text>
+                      </GroupSwitcherItem>
+
+                      ) : (
+                      <GroupSwitcherItem to={navTo('/popover/settings')}>
+                        <Icon
+                          mr={2}
+                          color="gray"
+                          icon="Gear"
+                        />
+                        <Text> Group Settings</Text>
+                      </GroupSwitcherItem>
+                    )}
                     {isAdmin && (<GroupSwitcherItem bottom to={navTo('/invites')}>
                       <Icon
                         mr={2}
@@ -181,9 +195,15 @@ export function GroupSwitcher(props: {
                     ml='12px'
                   />
                 </Link>)}
-                <Link to={navTo('/popover/settings')}>
-                  <Icon color='gray' display="inline-block" ml={'12px'} icon="Gear" />
-                </Link>
+                {isMobile ? (
+                  <Link to={navTo('/popover')}>
+                    <Icon color='gray' display="inline-block" ml={'12px'} icon="Gear" />
+                  </Link>
+                  ) : (
+                  <Link to={navTo('/popover/settings')}>
+                    <Icon color='gray' display="inline-block" ml={'12px'} icon="Gear" />
+                  </Link>
+                )}
               </>
             )}
           </Row>