From d08565677402023f8c153adf81d37bbd5532a696 Mon Sep 17 00:00:00 2001
From: Pau Matas <pmatasalbiol@gmail.com>
Date: Wed, 27 Mar 2024 18:09:16 +0100
Subject: [PATCH 1/2] style: form style refactor

---
 src/components/Combobox.tsx          |   6 +-
 src/components/Form.tsx              | 310 +++++++++++++++------------
 src/components/MultiFileDropzone.tsx |   6 +-
 3 files changed, 177 insertions(+), 145 deletions(-)

diff --git a/src/components/Combobox.tsx b/src/components/Combobox.tsx
index 8ae33d1..53538b9 100644
--- a/src/components/Combobox.tsx
+++ b/src/components/Combobox.tsx
@@ -24,10 +24,12 @@ export function Combobox({
   options,
   value,
   setValue,
+  width = 80,
 }: {
   options: Option[]
   value: string
   setValue: Function
+  width?: number | string
 }) {
   const [open, setOpen] = React.useState(false)
   return (
@@ -38,7 +40,7 @@ export function Combobox({
             variant="outline"
             role="combobox"
             aria-expanded={open}
-            className="w-80 justify-between"
+            className={`w-${width} justify-between`}
           >
             {value
               ? options.find((option) => option.value === value)?.label
@@ -46,7 +48,7 @@ export function Combobox({
             <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="max-h-80 flex flex-col w-80 p-0">
+        <PopoverContent className="w-80 max-h-80 flex flex-col p-0">
           <Command>
             <CommandInput placeholder="Search..." />
             <CommandEmpty className="flex-1">
diff --git a/src/components/Form.tsx b/src/components/Form.tsx
index 247dad7..ffb9da2 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -198,157 +198,187 @@ export function ProfileForm({
     : undefined
 
   return (
-    <Form {...form}>
-      <form
-        onSubmit={form.handleSubmit(onSubmit as SubmitHandler<FieldValues>)}
-        className="space-y-8"
-      >
-        <FormField
-          control={form.control}
-          name="year"
-          render={({ field }) => {
-            if (!field.value && default_year) {
-              field.value = default_year
-              field.onChange(default_year)
-            }
+    <div className="mb-6">
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit as SubmitHandler<FieldValues>)}
+          className="space-y-8"
+        >
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-y-4 md:gap-x-4 py-6">
+            <FormField
+              control={form.control}
+              name="pdf"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Fitxers PDF</FormLabel>
+                  <FormControl>
+                    <div className="grid w-full max-w-sm items-center gap-1.5">
+                      <MultiFileDropzone
+                        value={field.value}
+                        onChange={(acceptedFiles) => {
+                          field.onChange(acceptedFiles)
+                        }}
+                      />
+                    </div>
+                  </FormControl>
+                  <FormDescription>
+                    Penja els teus apunts en format PDF.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <div className="md:col-span-2">
+              <FormField
+                control={form.control}
+                name="title"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Títol dels Apunts</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="WhoIsGraf?"
+                        {...field}
+                        className="mb-0"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="content"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormControl>
+                      <Input
+                        placeholder="Descripció (opcional)"
+                        type="text"
+                        {...field}
+                        className="h-24 inline-block align-text-top file:inline-block file:align-text-top placeholder:inline-block placeholder:align-text-top"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-y-4 md:gap-x-4 py-6">
+            {PreselectedSubject === "AllSubjects" && (
+              <FormField
+                control={form.control}
+                name="assignatura"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Assignatura</FormLabel>
+                    <FormControl>
+                      <Combobox
+                        options={assignatures}
+                        value={field.value}
+                        setValue={field.onChange}
+                        width="full"
+                      />
+                    </FormControl>
+                    <FormDescription>Tria l&apos;assignatura.</FormDescription>
+                  </FormItem>
+                )}
+              />
+            )}
+            <FormField
+              control={form.control}
+              name="year"
+              render={({ field }) => {
+                if (!field.value && default_year) {
+                  field.value = default_year
+                  field.onChange(default_year)
+                }
 
-            return (
-              <FormItem>
-                <FormLabel>Any</FormLabel>
-                <FormControl>
-                  <Combobox
-                    options={tipus_any}
-                    value={field.value}
-                    setValue={field.onChange}
-                  />
-                </FormControl>
-                <FormDescription>
-                  Any que has cursat l&apos;assignatura.
-                </FormDescription>
-              </FormItem>
-            )
-          }}
-        />
-        <FormField
-          control={form.control}
-          name="pdf"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Fitxers PDF</FormLabel>
-              <FormControl>
-                <div className="grid w-full max-w-sm items-center gap-1.5">
-                  <MultiFileDropzone
-                    value={field.value}
-                    onChange={(acceptedFiles) => {
-                      field.onChange(acceptedFiles)
-                    }}
-                  />
-                </div>
-              </FormControl>
-              <FormDescription>
-                Penja els teus apunts en format PDF.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="title"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Nom dels Apunts</FormLabel>
-              <FormControl>
-                <Input placeholder="WhoIsGraf?" {...field} />
-              </FormControl>
-              <FormDescription>El nom dels teus apunts.</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        {PreselectedSubject === "AllSubjects" && (
+                return (
+                  <FormItem>
+                    <FormLabel>Any</FormLabel>
+                    <FormControl>
+                      <Combobox
+                        options={tipus_any}
+                        value={field.value}
+                        setValue={field.onChange}
+                        width="full"
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Any que has cursat l&apos;assignatura.
+                    </FormDescription>
+                  </FormItem>
+                )
+              }}
+            />
+            <FormField
+              control={form.control}
+              name="tipus"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Tipus</FormLabel>
+                  <FormControl>
+                    <Combobox
+                      options={tipus}
+                      value={field.value}
+                      setValue={field.onChange}
+                      width="full"
+                    />
+                  </FormControl>
+                  <FormDescription>Tria el tipus de document.</FormDescription>
+                </FormItem>
+              )}
+            />
+          </div>
           <FormField
             control={form.control}
-            name="assignatura"
+            name="anonim"
             render={({ field }) => (
-              <FormItem>
-                <FormLabel>Assignatura</FormLabel>
+              <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 shadow">
                 <FormControl>
-                  <Combobox
-                    options={assignatures}
-                    value={field.value}
-                    setValue={field.onChange}
+                  <Checkbox
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
                   />
                 </FormControl>
-                <FormDescription>Tria l&apos;assignatura.</FormDescription>
+                <div className="space-y-1 leading-none">
+                  <FormLabel>Penjar com a anònim</FormLabel>
+                  <FormDescription>
+                    L&apos;AED guarda sempre l&apos;autor dels apunts.
+                    L&apos;opció d&apos;anònim permet que no es mostrin als
+                    altres usuaris.
+                  </FormDescription>
+                </div>
               </FormItem>
             )}
           />
-        )}
-
-        <FormField
-          control={form.control}
-          name="tipus"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Tipus</FormLabel>
-              <FormControl>
-                <Combobox
-                  options={tipus}
-                  value={field.value}
-                  setValue={field.onChange}
-                />
-              </FormControl>
-              <FormDescription>Tria el tipus de document.</FormDescription>
-            </FormItem>
-          )}
-        />
-        <FormField
-          control={form.control}
-          name="anonim"
-          render={({ field }) => (
-            <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 shadow">
-              <FormControl>
-                <Checkbox
-                  checked={field.value}
-                  onCheckedChange={field.onChange}
-                />
-              </FormControl>
-              <div className="space-y-1 leading-none">
-                <FormLabel>Penjar com a anònim</FormLabel>
-                <FormDescription>
-                  L&apos;AED guarda sempre l&apos;autor dels apunts.
-                  L&apos;opció d&apos;anònim permet que no es mostrin als altres
-                  usuaris.
-                </FormDescription>
-              </div>
-            </FormItem>
+          {isAdmin && (
+            <FormField
+              control={form.control}
+              name="authorEmail"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Gràcies per ajudar" {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Email de l&apos;autor/a dels apunts
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
           )}
-        />
-        {isAdmin && (
-          <FormField
-            control={form.control}
-            name="authorEmail"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Email</FormLabel>
-                <FormControl>
-                  <Input placeholder="Gràcies per ajudar" {...field} />
-                </FormControl>
-                <FormDescription>
-                  Email de l&apos;autor/a dels apunts
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        )}
-        <Button type="submit" isLoading={form.formState.isSubmitting}>
-          Submit
-        </Button>
-        {isVisible && <Fireworks autorun={{ speed: 0.5 }} />}
-      </form>
-    </Form>
+          <Button type="submit" isLoading={form.formState.isSubmitting}>
+            Submit
+          </Button>
+          {isVisible && <Fireworks autorun={{ speed: 0.5 }} />}
+        </form>
+      </Form>
+    </div>
   )
 }
 
diff --git a/src/components/MultiFileDropzone.tsx b/src/components/MultiFileDropzone.tsx
index 9e49f92..4243dee 100644
--- a/src/components/MultiFileDropzone.tsx
+++ b/src/components/MultiFileDropzone.tsx
@@ -8,7 +8,7 @@ import { DropzoneOptions, useDropzone } from "react-dropzone"
 import { twMerge } from "tailwind-merge"
 
 const variants = {
-  base: "relative rounded-md p-4 w-96 flex justify-center items-center flex-col cursor-pointer border border-dashed border-zinc-300  transition-colors duration-200 ease-in-out bg-zinc-100",
+  base: "relative rounded-md p-4 w-full flex justify-center items-center flex-col cursor-pointer border border-dashed border-zinc-300  transition-colors duration-200 ease-in-out bg-zinc-100",
   active: "border-2",
   disabled:
     "bg-gray-700 border-white/20 cursor-default pointer-events-none bg-opacity-30",
@@ -120,7 +120,7 @@ const MultiFileDropzone = React.forwardRef<HTMLInputElement, InputProps>(
               <div className="flex flex-col items-center justify-center text-xs text-zinc-900">
                 <UploadCloudIcon className="mb-1 h-7 w-7" />
                 <div className="text-zinc-900">
-                  drag & drop or click to upload
+                  Arrossega i deixa anar o fes clic per pujar fitxers
                 </div>
               </div>
             </div>
@@ -133,7 +133,7 @@ const MultiFileDropzone = React.forwardRef<HTMLInputElement, InputProps>(
           {value?.map((file, i) => (
             <div
               key={i}
-              className="flex h-16 w-96 flex-col justify-center rounded border border-solid border-zinc-300 px-4 py-2"
+              className="flex h-fit max-h-36 w-full flex-col justify-center rounded border border-solid border-zinc-300 px-4 py-2"
             >
               <div className="flex items-center gap-2 text-zinc-900">
                 <FileIcon size="30" className="shrink-0" />

From 6a1ebb17615120406604f618306ea6c9e56f5539 Mon Sep 17 00:00:00 2001
From: Pau Matas <pmatasalbiol@gmail.com>
Date: Wed, 27 Mar 2024 19:13:05 +0100
Subject: [PATCH 2/2] add: Post description (content)

---
 src/app/api/subject/post/create/route.ts | 13 +++++++++++--
 src/components/Form.tsx                  | 16 +++++++++++++---
 src/components/Post.tsx                  |  6 +++++-
 src/components/ui/Input.tsx              |  4 +++-
 src/components/ui/Textarea.tsx           | 24 ++++++++++++++++++++++++
 src/lib/validators/post.ts               |  1 +
 6 files changed, 57 insertions(+), 7 deletions(-)
 create mode 100644 src/components/ui/Textarea.tsx

diff --git a/src/app/api/subject/post/create/route.ts b/src/app/api/subject/post/create/route.ts
index 728ade6..fd515af 100644
--- a/src/app/api/subject/post/create/route.ts
+++ b/src/app/api/subject/post/create/route.ts
@@ -14,8 +14,16 @@ export async function POST(req: Request) {
 
     const body = await req.json()
 
-    const { pdf, title, year, assignatura, tipus, anonim, authorEmail } =
-      ApuntsPostValidator.parse(body)
+    const {
+      pdf,
+      title,
+      content,
+      year,
+      assignatura,
+      tipus,
+      anonim,
+      authorEmail,
+    } = ApuntsPostValidator.parse(body)
 
     const subject = await db.subject.findFirst({
       where: {
@@ -72,6 +80,7 @@ export async function POST(req: Request) {
             }
           }),
         ),
+        content: content,
         subjectId: subject.id,
         authorId: authorId,
         tipus: tipus as TipusType,
diff --git a/src/components/Form.tsx b/src/components/Form.tsx
index ffb9da2..d784d8a 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -24,12 +24,20 @@ import { ApuntsPostCreationRequest } from "@/lib/validators/post"
 import { uploadFiles } from "@/lib/uploadthing"
 import Fireworks from "react-canvas-confetti/dist/presets/fireworks"
 import { MultiFileDropzone } from "@/components/MultiFileDropzone"
+import { Textarea } from "./ui/Textarea"
 
 const formSchema = z.object({
   pdf: z.array(z.any()),
   title: z.string({
     required_error: "Selecciona un títol",
   }),
+  content: z
+    .string()
+    .max(320, {
+      message: "La descripció ha de tenir com a màxim 320 caràcters.",
+    })
+    .optional()
+    .default(""),
   year: z.string({
     required_error: "Selecciona un any",
   }),
@@ -65,6 +73,7 @@ export function ProfileForm({
     mutationFn: async ({
       pdf,
       title,
+      content,
       year,
       assignatura,
       tipus,
@@ -74,6 +83,7 @@ export function ProfileForm({
       const payload: ApuntsPostCreationRequest = {
         pdf,
         title,
+        content,
         year,
         assignatura,
         tipus,
@@ -132,6 +142,7 @@ export function ProfileForm({
     const payload: ApuntsPostCreationRequest = {
       pdf: res,
       title: data.title,
+      content: data.content,
       year: Number(data.year),
       assignatura: data.assignatura,
       tipus: data.tipus,
@@ -252,11 +263,10 @@ export function ProfileForm({
                 render={({ field }) => (
                   <FormItem>
                     <FormControl>
-                      <Input
+                      <Textarea
                         placeholder="Descripció (opcional)"
-                        type="text"
+                        className="resize-none"
                         {...field}
-                        className="h-24 inline-block align-text-top file:inline-block file:align-text-top placeholder:inline-block placeholder:align-text-top"
                       />
                     </FormControl>
                     <FormMessage />
diff --git a/src/components/Post.tsx b/src/components/Post.tsx
index ca4c3ac..292d32d 100644
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@@ -83,7 +83,11 @@ const Post: FC<PostProps> = ({
             )}
             ref={pRef}
           >
-            {/* TODO: If we add text content for posts it needs to be here */}
+            {post.content ? (
+              <div className="md:col-span-3">
+                <p>{post.content}</p>
+              </div>
+            ) : null}
             {postFiles
               ? postFiles.map(
                   (url: ClientUploadedFileData<null>, i: number) => (
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
index 9900814..213abd2 100644
--- a/src/components/ui/Input.tsx
+++ b/src/components/ui/Input.tsx
@@ -1,6 +1,7 @@
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
+import { he } from "date-fns/locale"
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -11,7 +12,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          `h-${props.height ?? 10}`,
+          "flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}
diff --git a/src/components/ui/Textarea.tsx b/src/components/ui/Textarea.tsx
new file mode 100644
index 0000000..9f9a6dc
--- /dev/null
+++ b/src/components/ui/Textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/src/lib/validators/post.ts b/src/lib/validators/post.ts
index 186a522..fbf973a 100644
--- a/src/lib/validators/post.ts
+++ b/src/lib/validators/post.ts
@@ -26,6 +26,7 @@ export const ApuntsPostValidator = z.object({
     }),
   ),
   title: z.string(),
+  content: z.string().max(320),
   year: z.number(),
   assignatura: z.string().min(2).max(6),
   tipus: z.string(),