Merge branch 'codu-code:develop' into fix-1102-implment-wysiwyg-to-se…

…e-article-exactly
codu-code · Oct 18, 2024 · 42cd56d · 42cd56d
2 parents 560a7f7 + 474c544
commit 42cd56d
Show file tree

Hide file tree

Showing 9 changed files with 214 additions and 89 deletions.
diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml
@@ -91,7 +91,7 @@ jobs:
 
       - name: Seed database
         run: |
-          npm run db:push
+          npm run db:migrate
           npm run db:seed
 
       - name: Run Playwright tests

diff --git a/README.md b/README.md
@@ -48,7 +48,7 @@ For a more detailed how to guide on setting them up [go to the Environment Varia
 6.  Setup the tables in the database with Drizzle by running:
 
 ```bash
-npm run db:push
+npm run db:migrate
 ```
 
 The full command can be seen in our [package.json](/package.json#16) file

diff --git a/app/(app)/jobs/create/_client.tsx b/app/(app)/jobs/create/_client.tsx
@@ -7,7 +7,12 @@ import {
   CheckboxGroup,
 } from "@/components/ui-components/checkbox";
 import { Divider } from "@/components/ui-components/divider";
-import { Description, Field, Label } from "@/components/ui-components/fieldset";
+import {
+  Description,
+  ErrorMessage,
+  Field,
+  Label,
+} from "@/components/ui-components/fieldset";
 import { Heading, Subheading } from "@/components/ui-components/heading";
 import { Input } from "@/components/ui-components/input";
 import {
@@ -17,22 +22,50 @@ import {
 } from "@/components/ui-components/radio";
 import { Strong, Text } from "@/components/ui-components/text";
 import { Textarea } from "@/components/ui-components/textarea";
+import { saveJobsInput, saveJobsSchema } from "@/schema/job";
 import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags";
+import { zodResolver } from "@hookform/resolvers/zod";
 import Image from "next/image";
 import { notFound } from "next/navigation";
 import React, { useRef, useState } from "react";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
 
 export default function Content() {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<saveJobsInput>({
+    resolver: zodResolver(saveJobsSchema),
+    defaultValues: {
+      companyName: "",
+      jobTitle: "",
+      jobDescription: "",
+      jobLocation: "",
+      applicationUrl: "",
+      remote: false,
+      relocation: false,
+      visa_sponsorship: false,
+      jobType: "full-time",
+    },
+  });
   const flagEnabled = isFlagEnabled(FEATURE_FLAGS.JOBS);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [imgUrl, setImgUrl] = useState<string | null>(null);
-
+  const onSubmit: SubmitHandler<saveJobsInput> = (values) => {
+    console.log(values);
+  };
   if (!flagEnabled) {
     notFound();
   }
 
   return (
-    <form className="mx-auto max-w-4xl p-3 pt-8 sm:px-4">
+    <form
+      className="mx-auto max-w-4xl p-3 pt-8 sm:px-4"
+      onSubmit={handleSubmit(onSubmit)}
+    >
       <Heading level={1}>Post a job</Heading>
       <Divider className="my-10 mt-6" />
       <section className="grid gap-x-8 gap-y-6 sm:grid-cols-2">
@@ -89,9 +122,12 @@ export default function Content() {
             type="text"
             placeholder="Pixel Pulse Studios"
             autoComplete="given-company-name"
+            {...register("companyName")}
           />
+          {errors?.companyName && (
+            <ErrorMessage>{errors.companyName.message}</ErrorMessage>
+          )}
         </Field>
-        {/* Add error part after validation here */}
       </section>
 
       <Divider className="my-10" soft />
@@ -107,9 +143,12 @@ export default function Content() {
             type="text"
             placeholder="Reality Architect"
             autoComplete="given-job-title"
+            {...register("jobTitle")}
           />
+          {errors?.jobTitle && (
+            <ErrorMessage>{errors.jobTitle.message}</ErrorMessage>
+          )}
         </Field>
-        {/* Add error part after validation here */}
       </section>
 
       <Divider className="my-10" soft />
@@ -123,11 +162,13 @@ export default function Content() {
           <Textarea
             id="job-description"
             placeholder="As a Reality Architect, you'll be at the forefront of creating immersive mixed reality experiences that blur the line between the digital and physical..."
-            resizable={false}
             rows={3}
+            {...register("jobDescription")}
           />
+          {errors?.jobDescription && (
+            <ErrorMessage>{errors.jobDescription.message}</ErrorMessage>
+          )}
         </Field>
-        {/* Add error part after validation here */}
       </section>
 
       <Divider className="my-10" soft />
@@ -140,23 +181,46 @@ export default function Content() {
           </Text>
         </div>
         <Field>
-          <Input placeholder="Dublin (2 days in the office per week)" />
+          <Input
+            placeholder="Dublin (2 days in the office per week)"
+            {...register("jobLocation")}
+          />
           <CheckboxGroup className="mt-3">
             <CheckboxField>
-              <Checkbox name="remote" value="is_remote" />
+              <Controller
+                name="remote"
+                control={control}
+                render={({ field }) => (
+                  <Checkbox checked={field.value} onChange={field.onChange} />
+                )}
+              />
               <Label>Work is remote</Label>
             </CheckboxField>
             <CheckboxField>
-              <Checkbox name="relocation" value="is_relocation_package" />
+              <Controller
+                name="relocation"
+                control={control}
+                render={({ field }) => (
+                  <Checkbox checked={field.value} onChange={field.onChange} />
+                )}
+              />
               <Label>Relocation package given</Label>
             </CheckboxField>
             <CheckboxField>
-              <Checkbox name="visa" value="is_visa_sponsored" />
+              <Controller
+                name="visa_sponsorship"
+                control={control}
+                render={({ field }) => (
+                  <Checkbox checked={field.value} onChange={field.onChange} />
+                )}
+              />
               <Label>Visa sponsorship provided</Label>
             </CheckboxField>
           </CheckboxGroup>
+          {errors?.jobLocation && (
+            <ErrorMessage>{errors.jobLocation.message}</ErrorMessage>
+          )}
         </Field>
-        {/* Add error part after validation here */}
       </section>
 
       <Divider className="my-10" soft />
@@ -172,9 +236,12 @@ export default function Content() {
             type="text"
             autoComplete="url"
             placeholder="https://example.com"
+            {...register("applicationUrl")}
           />
+          {errors?.applicationUrl && (
+            <ErrorMessage>{errors.applicationUrl.message}</ErrorMessage>
+          )}
         </Field>
-        {/* Add error part after validation here */}
       </section>
 
       <Divider className="my-10" soft />
@@ -185,34 +252,42 @@ export default function Content() {
           <Text>Full-time, part-time or freelancer</Text>
         </div>
         <Field>
-          <RadioGroup defaultValue="full_time">
-            <RadioField>
-              <Radio value="full_time" />
-              <Label>Full-time (€150)</Label>
-              <Description>Salaried Position</Description>
-            </RadioField>
-            <RadioField>
-              <Radio value="part_time" />
-              <Label>Part-time (€100)</Label>
-              <Description>
-                Salaried position but less than 4 days per week
-              </Description>
-            </RadioField>
-            <RadioField>
-              <Radio value="freelancer" />
-              <Label>Freelancer (€100)</Label>
-              <Description>Shorter-term usually or fixed term/job</Description>
-            </RadioField>
-            <RadioField>
-              <Radio value="other_role_type" />
-              <Label>Other (€100)</Label>
-              <Description>
-                Looking for a co-founder or something else we haven’t thought of
-              </Description>
-            </RadioField>
-          </RadioGroup>
+          <Controller
+            name="jobType"
+            control={control}
+            render={({ field }) => (
+              <RadioGroup value={field.value} onChange={field.onChange}>
+                <RadioField>
+                  <Radio value="full-time" />
+                  <Label>Full-time (€150)</Label>
+                  <Description>Salaried Position</Description>
+                </RadioField>
+                <RadioField>
+                  <Radio value="part-time" />
+                  <Label>Part-time (€100)</Label>
+                  <Description>
+                    Salaried position but less than 4 days per week
+                  </Description>
+                </RadioField>
+                <RadioField>
+                  <Radio value="freelancer" />
+                  <Label>Freelancer (€100)</Label>
+                  <Description>
+                    Shorter-term usually or fixed term/job
+                  </Description>
+                </RadioField>
+                <RadioField>
+                  <Radio value="other" />
+                  <Label>Other (€100)</Label>
+                  <Description>
+                    Looking for a co-founder or something else we haven’t
+                    thought of
+                  </Description>
+                </RadioField>
+              </RadioGroup>
+            )}
+          />
         </Field>
-        {/* Add error part after validation here */}
       </section>
 
       <Divider className="my-10" soft />
@@ -252,13 +327,17 @@ export default function Content() {
             practices.
           </Text>
         </div>
-        {/* Add error part after validation here */}
       </section>
 
       <Divider className="my-10" soft />
 
       <div className="flex justify-end">
-        <Button className="rounded-md" color="pink">
+        <Button
+          className="rounded-md"
+          color="pink"
+          type="submit"
+          disabled={isSubmitting}
+        >
           Submit and checkout
         </Button>
       </div>

diff --git a/app/(app)/not-found.tsx b/app/(app)/not-found.tsx
@@ -0,0 +1,7 @@
+import NotFound from "@/components/NotFound/NotFound";
+
+const notfound = () => {
+  return <NotFound />;
+};
+
+export default notfound;
diff --git a/app/not-found.tsx b/app/not-found.tsx
@@ -1,43 +1,7 @@
-"use client";
+import NotFound from "@/components/NotFound/NotFound";
 
-import Link from "next/link";
-import Image from "next/image";
+const notfound = () => {
+  return <NotFound />;
+};
 
-export default function NotFound() {
-  return (
-    <main className="flex w-full flex-grow flex-col justify-center bg-white px-4 py-20 sm:px-6 lg:py-40">
-      <div className="flex flex-shrink-0 justify-center">
-        <Link href="/">
-          <span className="sr-only">Codú</span>
-          <Image
-            src="/images/codu-black.png"
-            alt="Codú logo"
-            height={60}
-            width={189}
-          />
-        </Link>
-      </div>
-      <div className="py-16">
-        <div className="text-center">
-          <p className="bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text text-xl font-semibold uppercase leading-6 tracking-wide text-transparent">
-            404 error
-          </p>
-          <h1 className="mt-2 text-4xl font-extrabold tracking-tight text-black sm:text-5xl">
-            Page not found.
-          </h1>
-          <p className="mt-2 text-base text-neutral-500">
-            Sorry, we couldn’t find the page you’re looking for.
-          </p>
-          <div className="mt-6">
-            <Link
-              className="bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text text-base font-semibold tracking-wide text-transparent"
-              href="/"
-            >
-              Return home<span aria-hidden="true"> &rarr;</span>
-            </Link>
-          </div>
-        </div>
-      </div>
-    </main>
-  );
-}
+export default notfound;
diff --git a/components/NotFound/NotFound.tsx b/components/NotFound/NotFound.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+
+export default function NotFound() {
+  return (
+    <main className="flex w-full flex-grow flex-col justify-center bg-white px-4 py-20 sm:px-6 lg:py-40">
+      <div className="flex flex-shrink-0 justify-center">
+        <Link href="/">
+          <span className="sr-only">Codú</span>
+          <Image
+            src="/images/codu-black.png"
+            alt="Codú logo"
+            height={60}
+            width={189}
+          />
+        </Link>
+      </div>
+      <div className="py-16">
+        <div className="text-center">
+          <p className="bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text text-xl font-semibold uppercase leading-6 tracking-wide text-transparent">
+            404 error
+          </p>
+          <h1 className="mt-2 text-4xl font-extrabold tracking-tight text-black sm:text-5xl">
+            Page not found.
+          </h1>
+          <p className="mt-2 text-base text-neutral-500">
+            Sorry, we couldn’t find the page you’re looking for.
+          </p>
+          <div className="mt-6">
+            <Link
+              className="bg-gradient-to-r from-orange-400 to-pink-600 bg-clip-text text-base font-semibold tracking-wide text-transparent"
+              href="/"
+            >
+              Return home<span aria-hidden="true"> &rarr;</span>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -13,7 +13,7 @@
       "type": "image/png"
     }
   ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
+  "theme_color": "#000000",
+  "background_color": "#000000",
   "display": "standalone"
 }