From 607e91e8cff768ea1f80e8bde250d1ba37debeb3 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Mon, 3 Apr 2023 12:56:29 -0400
Subject: [PATCH] Refactor Group Layout selection

---
 .../components/discover/layout-buttons.tsx    | 42 +++++++++++++++++++
 .../components/discover/search/results.tsx    | 42 +++++--------------
 app/soapbox/features/groups/popular.tsx       | 40 ++++--------------
 app/soapbox/features/groups/suggested.tsx     | 40 ++++--------------
 4 files changed, 68 insertions(+), 96 deletions(-)
 create mode 100644 app/soapbox/features/groups/components/discover/layout-buttons.tsx

diff --git a/app/soapbox/features/groups/components/discover/layout-buttons.tsx b/app/soapbox/features/groups/components/discover/layout-buttons.tsx
new file mode 100644
index 000000000..eecdfaf83
--- /dev/null
+++ b/app/soapbox/features/groups/components/discover/layout-buttons.tsx
@@ -0,0 +1,42 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { HStack, Icon } from 'soapbox/components/ui';
+
+enum GroupLayout {
+  LIST = 'LIST',
+  GRID = 'GRID'
+}
+
+interface ILayoutButtons {
+  layout: GroupLayout
+  onSelect(layout: GroupLayout): void
+}
+
+const LayoutButtons = ({ layout, onSelect }: ILayoutButtons) => (
+  <HStack alignItems='center' space={1}>
+    <button onClick={() => onSelect(GroupLayout.LIST)}>
+      <Icon
+        src={require('@tabler/icons/layout-list.svg')}
+        className={
+          clsx('h-5 w-5 text-gray-600', {
+            'text-primary-600': layout === GroupLayout.LIST,
+          })
+        }
+      />
+    </button>
+
+    <button onClick={() => onSelect(GroupLayout.GRID)}>
+      <Icon
+        src={require('@tabler/icons/layout-grid.svg')}
+        className={
+          clsx('h-5 w-5 text-gray-600', {
+            'text-primary-600': layout === GroupLayout.GRID,
+          })
+        }
+      />
+    </button>
+  </HStack>
+);
+
+export { LayoutButtons as default, GroupLayout };
\ No newline at end of file
diff --git a/app/soapbox/features/groups/components/discover/search/results.tsx b/app/soapbox/features/groups/components/discover/search/results.tsx
index 14e1e5a67..9df350375 100644
--- a/app/soapbox/features/groups/components/discover/search/results.tsx
+++ b/app/soapbox/features/groups/components/discover/search/results.tsx
@@ -3,22 +3,19 @@ import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
-import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
+import { HStack, Stack, Text } from 'soapbox/components/ui';
 import { useGroupSearch } from 'soapbox/hooks/api';
-import { Group } from 'soapbox/types/entities';
 
 import GroupGridItem from '../group-grid-item';
 import GroupListItem from '../group-list-item';
+import LayoutButtons, { GroupLayout } from '../layout-buttons';
+
+import type { Group } from 'soapbox/types/entities';
 
 interface Props {
   groupSearchResult: ReturnType<typeof useGroupSearch>
 }
 
-enum Layout {
-  LIST = 'LIST',
-  GRID = 'GRID'
-}
-
 const GridList: Components['List'] = React.forwardRef((props, ref) => {
   const { context, ...rest } = props;
   return <div ref={ref} {...rest} className='flex flex-wrap' />;
@@ -27,7 +24,7 @@ const GridList: Components['List'] = React.forwardRef((props, ref) => {
 export default (props: Props) => {
   const { groupSearchResult } = props;
 
-  const [layout, setLayout] = useState<Layout>(Layout.LIST);
+  const [layout, setLayout] = useState<GroupLayout>(GroupLayout.LIST);
 
   const { groups, hasNextPage, isFetching, fetchNextPage } = groupSearchResult;
 
@@ -65,32 +62,13 @@ export default (props: Props) => {
           />
         </Text>
 
-        <HStack alignItems='center'>
-          <button onClick={() => setLayout(Layout.LIST)}>
-            <Icon
-              src={require('@tabler/icons/layout-list.svg')}
-              className={
-                clsx('h-5 w-5 text-gray-600', {
-                  'text-primary-600': layout === Layout.LIST,
-                })
-              }
-            />
-          </button>
-
-          <button onClick={() => setLayout(Layout.GRID)}>
-            <Icon
-              src={require('@tabler/icons/layout-grid.svg')}
-              className={
-                clsx('h-5 w-5 text-gray-600', {
-                  'text-primary-600': layout === Layout.GRID,
-                })
-              }
-            />
-          </button>
-        </HStack>
+        <LayoutButtons
+          layout={layout}
+          onSelect={(selectedLayout) => setLayout(selectedLayout)}
+        />
       </HStack>
 
-      {layout === Layout.LIST ? (
+      {layout === GroupLayout.LIST ? (
         <Virtuoso
           useWindowScroll
           data={groups}
diff --git a/app/soapbox/features/groups/popular.tsx b/app/soapbox/features/groups/popular.tsx
index 61d030173..7f2d43a64 100644
--- a/app/soapbox/features/groups/popular.tsx
+++ b/app/soapbox/features/groups/popular.tsx
@@ -3,11 +3,12 @@ import React, { useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
-import { Column, HStack, Icon } from 'soapbox/components/ui';
+import { Column } from 'soapbox/components/ui';
 import { usePopularGroups } from 'soapbox/hooks/api/usePopularGroups';
 
 import GroupGridItem from './components/discover/group-grid-item';
 import GroupListItem from './components/discover/group-list-item';
+import LayoutButtons, { GroupLayout } from './components/discover/layout-buttons';
 
 import type { Group } from 'soapbox/schemas';
 
@@ -15,21 +16,15 @@ const messages = defineMessages({
   label: { id: 'groups.popular.label', defaultMessage: 'Popular Groups' },
 });
 
-enum Layout {
-  LIST = 'LIST',
-  GRID = 'GRID'
-}
-
 const GridList: Components['List'] = React.forwardRef((props, ref) => {
   const { context, ...rest } = props;
   return <div ref={ref} {...rest} className='flex flex-wrap' />;
 });
 
-
 const Popular: React.FC = () => {
   const intl = useIntl();
 
-  const [layout, setLayout] = useState<Layout>(Layout.LIST);
+  const [layout, setLayout] = useState<GroupLayout>(GroupLayout.LIST);
 
   const { groups, hasNextPage, fetchNextPage } = usePopularGroups();
 
@@ -61,32 +56,13 @@ const Popular: React.FC = () => {
     <Column
       label={intl.formatMessage(messages.label)}
       action={
-        <HStack alignItems='center'>
-          <button onClick={() => setLayout(Layout.LIST)}>
-            <Icon
-              src={require('@tabler/icons/layout-list.svg')}
-              className={
-                clsx('h-5 w-5 text-gray-600', {
-                  'text-primary-600': layout === Layout.LIST,
-                })
-              }
-            />
-          </button>
-
-          <button onClick={() => setLayout(Layout.GRID)}>
-            <Icon
-              src={require('@tabler/icons/layout-grid.svg')}
-              className={
-                clsx('h-5 w-5 text-gray-600', {
-                  'text-primary-600': layout === Layout.GRID,
-                })
-              }
-            />
-          </button>
-        </HStack>
+        <LayoutButtons
+          layout={layout}
+          onSelect={(selectedLayout) => setLayout(selectedLayout)}
+        />
       }
     >
-      {layout === Layout.LIST ? (
+      {layout === GroupLayout.LIST ? (
         <Virtuoso
           useWindowScroll
           data={groups}
diff --git a/app/soapbox/features/groups/suggested.tsx b/app/soapbox/features/groups/suggested.tsx
index 8c17fc0af..5c52f678b 100644
--- a/app/soapbox/features/groups/suggested.tsx
+++ b/app/soapbox/features/groups/suggested.tsx
@@ -3,11 +3,12 @@ import React, { useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Components, Virtuoso, VirtuosoGrid } from 'react-virtuoso';
 
-import { Column, HStack, Icon } from 'soapbox/components/ui';
+import { Column } from 'soapbox/components/ui';
 import { useSuggestedGroups } from 'soapbox/hooks/api/useSuggestedGroups';
 
 import GroupGridItem from './components/discover/group-grid-item';
 import GroupListItem from './components/discover/group-list-item';
+import LayoutButtons, { GroupLayout } from './components/discover/layout-buttons';
 
 import type { Group } from 'soapbox/schemas';
 
@@ -15,21 +16,15 @@ const messages = defineMessages({
   label: { id: 'groups.popular.label', defaultMessage: 'Suggested Groups' },
 });
 
-enum Layout {
-  LIST = 'LIST',
-  GRID = 'GRID'
-}
-
 const GridList: Components['List'] = React.forwardRef((props, ref) => {
   const { context, ...rest } = props;
   return <div ref={ref} {...rest} className='flex flex-wrap' />;
 });
 
-
 const Suggested: React.FC = () => {
   const intl = useIntl();
 
-  const [layout, setLayout] = useState<Layout>(Layout.LIST);
+  const [layout, setLayout] = useState<GroupLayout>(GroupLayout.LIST);
 
   const { groups, hasNextPage, fetchNextPage } = useSuggestedGroups();
 
@@ -61,32 +56,13 @@ const Suggested: React.FC = () => {
     <Column
       label={intl.formatMessage(messages.label)}
       action={
-        <HStack alignItems='center'>
-          <button onClick={() => setLayout(Layout.LIST)}>
-            <Icon
-              src={require('@tabler/icons/layout-list.svg')}
-              className={
-                clsx('h-5 w-5 text-gray-600', {
-                  'text-primary-600': layout === Layout.LIST,
-                })
-              }
-            />
-          </button>
-
-          <button onClick={() => setLayout(Layout.GRID)}>
-            <Icon
-              src={require('@tabler/icons/layout-grid.svg')}
-              className={
-                clsx('h-5 w-5 text-gray-600', {
-                  'text-primary-600': layout === Layout.GRID,
-                })
-              }
-            />
-          </button>
-        </HStack>
+        <LayoutButtons
+          layout={layout}
+          onSelect={(selectedLayout) => setLayout(selectedLayout)}
+        />
       }
     >
-      {layout === Layout.LIST ? (
+      {layout === GroupLayout.LIST ? (
         <Virtuoso
           useWindowScroll
           data={groups}