fa post filter via playstyle

hooks/freeagents.ts

@@ -1,14 +1,69 @@
+import { Playstyle } from "@prisma/client";
 import useUser from "lib/useUser";
+import { useRouter } from "next/router";
 import { GetAllFreeAgentPostsData } from "prisma/queries/getAllFreeAgentPosts";
+import { useReducer } from "react";
 import useSWR from "swr";
 
+interface UseFreeAgentsState {
+  playstyle?: Playstyle;
+  weapon?: string;
+}
+
+type Action = {
+  type: "SET_PLAYSTYLE";
+  playstyle?: Playstyle;
+};
+
 export function useFreeAgents() {
+  const router = useRouter();
   const [user] = useUser();
   const { data } = useSWR<GetAllFreeAgentPostsData>("/api/freeagents");
+  const [state, dispatch] = useReducer(
+    (oldState: UseFreeAgentsState, action: Action) => {
+      switch (action.type) {
+        case "SET_PLAYSTYLE":
+          router.replace({
+            pathname: "/freeagents",
+            query: { playstyle: action.playstyle },
+          });
+
+          return { ...oldState, playstyle: action.playstyle };
+        default:
+          return oldState;
+      }
+    },
+    getInitialState()
+  );
+
+  function getInitialState() {
+    if (
+      typeof router.query.playstyle !== "string" ||
+      !["FRONTLINE", "MIDLINE", "BACKLINE"].includes(
+        router.query.playstyle as any
+      )
+    ) {
+      return {};
+    }
+
+    return { playstyle: router.query.playstyle as Playstyle };
+  }
 
   return {
-    data: data ?? [],
+    data: (data ?? []).filter(
+      (post) => !state.playstyle || post.playstyles.includes(state.playstyle)
+    ),
     isLoading: !data,
     usersPost: data?.find((post) => post.user.discordId === user?.discordId),
+    playstyleCounts: (data ?? []).reduce(
+      (acc, cur) => {
+        cur.playstyles.forEach((playstyle) => acc[playstyle]++);
+
+        return acc;
+      },
+      { FRONTLINE: 0, MIDLINE: 0, BACKLINE: 0 }
+    ),
+    state,
+    dispatch,
   };
 }

pages/freeagents.tsx

@@ -1,5 +1,16 @@
-import { Box, Button, Divider, Flex, IconButton } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  Center,
+  Divider,
+  Flex,
+  IconButton,
+  Radio,
+  RadioGroup,
+  Stack,
+} from "@chakra-ui/react";
 import { t, Trans } from "@lingui/macro";
+import { Playstyle } from "@prisma/client";
 import Breadcrumbs from "components/common/Breadcrumbs";
 import Markdown from "components/common/Markdown";
 import MyContainer from "components/common/MyContainer";
@@ -26,9 +37,11 @@ import {
 } from "react-icons/ri";
 
 const FreeAgentsPage = () => {
-  const { data, usersPost } = useFreeAgents();
+  const { data, usersPost, playstyleCounts, state, dispatch } = useFreeAgents();
   const [modalIsOpen, setModalIsOpen] = useState(false);
 
+  console.log({ playstyleCounts });
+
   return (
     <MyContainer>
       {modalIsOpen && (
@@ -42,6 +55,38 @@ const FreeAgentsPage = () => {
           <Trans>New free agent post</Trans>
         )}
       </Button>
+      <Center mt={6}>
+        <RadioGroup
+          value={state.playstyle ?? "ALL"}
+          onChange={(value) =>
+            dispatch({
+              type: "SET_PLAYSTYLE",
+              playstyle: value === "ALL" ? undefined : (value as Playstyle),
+            })
+          }
+        >
+          <Stack spacing={4} direction={["column", "row"]}>
+            <Radio value="ALL">
+              <Trans>
+                All (
+                {playstyleCounts.FRONTLINE +
+                  playstyleCounts.MIDLINE +
+                  playstyleCounts.BACKLINE}
+                )
+              </Trans>
+            </Radio>
+            <Radio value="FRONTLINE">
+              <Trans>Frontline ({playstyleCounts.FRONTLINE})</Trans>
+            </Radio>
+            <Radio value="MIDLINE">
+              <Trans>Support ({playstyleCounts.MIDLINE})</Trans>
+            </Radio>
+            <Radio value="BACKLINE">
+              <Trans>Backline ({playstyleCounts.BACKLINE})</Trans>
+            </Radio>
+          </Stack>
+        </RadioGroup>
+      </Center>
       {data.map((post) => (
         <FreeAgentCard key={post.id} post={post} isLiked={false} />
       ))}