fapost modal frontend

components/common/MarkdownTextarea.tsx

@@ -39,6 +39,7 @@ const MarkdownTextarea: React.FC<Props> = ({
         name={fieldName}
         placeholder={placeholder}
         resize="vertical"
+        rows={6}
       />
       <FormHelperText display="flex" alignItems="center">
         <LimitProgress

components/freeagents/FAModal.tsx

@@ -1,30 +1,40 @@
 import {
   Button,
+  Checkbox,
+  CheckboxGroup,
+  FormLabel,
+  HStack,
   Modal,
+  ModalBody,
   ModalCloseButton,
   ModalContent,
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Radio,
+  RadioGroup,
+  Stack,
   useToast,
 } from "@chakra-ui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Trans } from "@lingui/macro";
+import { t, Trans } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
-import { freeAgentPostSchema } from "lib/validators/fapost";
-import { GetUserByIdentifierData } from "prisma/queries/getUserByIdentifier";
+import MarkdownTextarea from "components/common/MarkdownTextarea";
+import {
+  FA_POST_CONTENT_LIMIT,
+  freeAgentPostSchema,
+} from "lib/validators/fapost";
 import { useState } from "react";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import * as z from "zod";
 
 interface Props {
   onClose: () => void;
-  user: NonNullable<GetUserByIdentifierData>;
 }
 
 type FormData = z.infer<typeof freeAgentPostSchema>;
 
-const FAModal: React.FC<Props> = ({ onClose, user }) => {
+const FAModal: React.FC<Props> = ({ onClose }) => {
   const [sending, setSending] = useState(false);
   const { i18n } = useLingui();
 
@@ -42,10 +52,10 @@ const FAModal: React.FC<Props> = ({ onClose, user }) => {
     //     },
   });
 
-  const watchBio = watch("bio", user.profile?.bio);
-
   const toast = useToast();
 
+  const watchContent = watch("content", ""); // TODO: get initial fa content from props
+
   // const onSubmit = async (formData: FormData) => {
   //   setSending(true);
   //   const mutationData = {
@@ -89,37 +99,58 @@ const FAModal: React.FC<Props> = ({ onClose, user }) => {
           <ModalCloseButton borderRadius="50%" />
           {/* <form onSubmit={handleSubmit(onSubmit)}> */}
           <form>
-            {/* <ModalBody pb={6}>
-              <FormControl isInvalid={!!errors.customUrlPath}>
-                <FormLabel htmlFor="customUrlPath">
-                  <Trans>Custom URL</Trans>
-                </FormLabel>
-                <InputGroup>
-                  <InputLeftAddon children="https://sendou.ink/u/" />
-                  <Input
-                    name="customUrlPath"
-                    ref={register}
-                    placeholder="sendou"
-                  />
-                </InputGroup>
-                <FormErrorMessage>
-                  {errors.customUrlPath?.message}
-                </FormErrorMessage>
-              </FormControl>
-
-              <MarkdownTextarea
-                fieldName="bio"
-                title={i18n._(t`Bio`)}
-                error={errors.bio}
-                register={register}
-                value={watchBio ?? ""}
-                maxLength={PROFILE_CHARACTER_LIMIT}
-                placeholder={i18n._(
-                  t`# I'm a header
-                  I'm **bolded**. Embedding weapon images is easy too: :luna_blaster:`
+            <ModalBody pb={6}>
+              <FormLabel htmlFor="playstyles">
+                <Trans>Roles</Trans>
+              </FormLabel>
+              <Controller
+                name="playstyles"
+                control={control}
+                defaultValue={[]}
+                render={({ onChange, value }) => (
+                  <CheckboxGroup value={value} onChange={onChange}>
+                    <HStack>
+                      <Checkbox value="FRONTLINE">
+                        <Trans>Frontline</Trans>
+                      </Checkbox>
+                      <Checkbox value="MIDLINE">
+                        <Trans>Support</Trans>
+                      </Checkbox>
+                      <Checkbox value="BACKLINE">
+                        <Trans>Backline</Trans>
+                      </Checkbox>
+                    </HStack>
+                  </CheckboxGroup>
                 )}
               />
-            </ModalBody> */}
+
+              <FormLabel htmlFor="canVC" mt={4}>
+                <Trans>Can you voice chat?</Trans>
+              </FormLabel>
+              <Controller
+                name="canVC"
+                control={control}
+                defaultValue="YES"
+                render={({ onChange, value }) => (
+                  <RadioGroup value={value} onChange={onChange}>
+                    <Stack direction="row">
+                      <Radio value="YES">Yes</Radio>
+                      <Radio value="MAYBE">Sometimes</Radio>
+                      <Radio value="NO">No</Radio>
+                    </Stack>
+                  </RadioGroup>
+                )}
+              />
+
+              <MarkdownTextarea
+                fieldName="content"
+                title={t`Post`}
+                error={errors.content}
+                register={register}
+                value={watchContent ?? ""}
+                maxLength={FA_POST_CONTENT_LIMIT}
+              />
+            </ModalBody>
             <ModalFooter>
               <Button mr={3} type="submit" isLoading={sending}>
                 <Trans>Save</Trans>

lib/validators/fapost.ts

@@ -1,7 +1,9 @@
 import * as z from "zod";
 
+export const FA_POST_CONTENT_LIMIT = 2000;
+
 export const freeAgentPostSchema = z.object({
   playstyles: z.array(z.enum(["FRONTLINE", "MIDLINE", "BACKLINE"])),
   canVC: z.enum(["YES", "NO", "MAYBE"]),
-  content: z.string().max(2000),
+  content: z.string().max(FA_POST_CONTENT_LIMIT),
 });

pages/freeagents.tsx

@@ -0,0 +1,22 @@
+import { Button } from "@chakra-ui/react";
+import { t, Trans } from "@lingui/macro";
+import Breadcrumbs from "components/common/Breadcrumbs";
+import FAModal from "components/freeagents/FAModal";
+import { useState } from "react";
+
+interface Props {}
+
+const FreeAgentsPage: React.FC<Props> = ({}) => {
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+  return (
+    <>
+      {modalIsOpen && <FAModal onClose={() => setModalIsOpen(false)} />}
+      <Breadcrumbs pages={[{ name: t`Free Agents` }]} />
+      <Button onClick={() => setModalIsOpen(true)}>
+        <Trans>New free agent post</Trans>
+      </Button>
+    </>
+  );
+};
+
+export default FreeAgentsPage;

pages/freeagentsnew.tsx

@@ -1,14 +0,0 @@
-import { t } from "@lingui/macro";
-import Breadcrumbs from "components/common/Breadcrumbs";
-
-interface Props {}
-
-const FreeAgentsPage: React.FC<Props> = ({}) => {
-  return (
-    <>
-      <Breadcrumbs pages={[{ name: t`Free Agents` }]} />
-    </>
-  );
-};
-
-export default FreeAgentsPage;