From 5f724b0d8f750e77627ba1e3082864d8907628e9 Mon Sep 17 00:00:00 2001
From: Jasper Concepcion <jasper@manok.dev>
Date: Mon, 9 Oct 2023 09:47:47 +0800
Subject: [PATCH] feat(profile): add company logo

---
 app/_experiences.tsx                       | 32 +++++++++----
 app/dashboard/experiences/_form.tsx        | 56 ++++++++++++++++++++--
 components/add-tech-form.tsx               | 50 +++++++++++++++++--
 lib/validators.ts                          |  1 +
 server/server-actions/experience-upsert.ts |  1 +
 5 files changed, 125 insertions(+), 15 deletions(-)

diff --git a/app/_experiences.tsx b/app/_experiences.tsx
index 4bd4a0c..b7baa1f 100644
--- a/app/_experiences.tsx
+++ b/app/_experiences.tsx
@@ -18,6 +18,7 @@ import type { GetPortfolioWithRelations } from "@/queries";
 import { format } from "date-fns/esm";
 import { StackItem } from "./_stack-item";
 import NextLink from "next/link";
+import NextImage from "next/image";
 
 interface Props {
   experiences: GetPortfolioWithRelations["experiences"];
@@ -46,16 +47,29 @@ export function ExperienceList({ experiences = [] }: Props) {
                     {format(exp.startedAt, "MMMM yyyy")} —{" "}
                     {exp.endedAt ? format(exp.endedAt, "MMMM yyyy") : "Present"}
                   </TypographyP>
-                  <div className="flex items-center flex-nowrap gap-1">
-                    <NextLink href={exp.companyWebsite || "#"}>
-                      <TypographyLead className="font-bold text-foreground leading-none">
-                        {exp.companyName}
-                      </TypographyLead>
-                    </NextLink>
+                  <div className="flex gap-4">
+                    {exp.companyLogo && (
+                      <NextImage
+                        src={exp.companyLogo}
+                        alt="logo"
+                        className="object-contain"
+                        height={45}
+                        width={45}
+                      />
+                    )}
+                    <div className="flex flex-col gap-2">
+                      <div className="flex items-center flex-nowrap gap-1">
+                        <NextLink href={exp.companyWebsite || "#"}>
+                          <TypographyLead className="font-bold text-foreground leading-none">
+                            {exp.companyName}
+                          </TypographyLead>
+                        </NextLink>
+                      </div>
+                      <TypographyP className="text-foreground/90 leading-none whitespace-pre">
+                        {exp.jobTitle}
+                      </TypographyP>
+                    </div>
                   </div>
-                  <TypographyP className="text-foreground/90 leading-none whitespace-pre">
-                    {exp.jobTitle}
-                  </TypographyP>
                   {exp.jobDescription && (
                     <MarkdownNoHeadings content={exp.jobDescription} />
                   )}
diff --git a/app/dashboard/experiences/_form.tsx b/app/dashboard/experiences/_form.tsx
index 7db76a5..3f03ba8 100644
--- a/app/dashboard/experiences/_form.tsx
+++ b/app/dashboard/experiences/_form.tsx
@@ -1,4 +1,5 @@
 "use client";
+import "@uploadthing/react/styles.css";
 import { insertExperienceSchema } from "@/lib/validators";
 import type { GetExp, GetAllTech } from "@/queries";
 import {
@@ -25,6 +26,7 @@ import {
   IconCalendar,
   IconDeviceFloppy,
   IconLoader2,
+  IconTrash,
   IconX,
 } from "@tabler/icons-react";
 import { Badge } from "@/components/ui/badge";
@@ -37,6 +39,8 @@ import {
 import { format } from "date-fns";
 import { cn } from "@/lib/utils";
 import { Calendar } from "@/components/ui/calendar";
+import { UploadDropzone } from "@uploadthing/react";
+import type { UploadRouter } from "@/app/api/uploadthing/core";
 
 interface Props {
   experience?: GetExp;
@@ -58,8 +62,9 @@ export function ExperienceForm({
       id: experience?.id,
       portfolioId,
       companyName: experience?.companyName ?? "",
-      jobTitle: experience?.jobTitle ?? "",
       companyWebsite: experience?.companyWebsite ?? "",
+      companyLogo: experience?.companyLogo ?? "",
+      jobTitle: experience?.jobTitle ?? "",
       jobDescription: experience?.jobDescription ?? "",
       startedAt: experience?.startedAt ?? new Date(),
       endedAt: experience?.endedAt,
@@ -67,7 +72,7 @@ export function ExperienceForm({
     },
   });
 
-  const experienceId = form.watch("id");
+  const [experienceId, companyLogo] = form.watch(["id", "companyLogo"]);
   const submit = form.handleSubmit(async (data) => {
     startTransition(async () => {
       const newExp = await upsertExperience(data);
@@ -80,6 +85,7 @@ export function ExperienceForm({
         companyName: newExp.companyName ?? "",
         jobTitle: newExp.jobTitle ?? "",
         companyWebsite: newExp.companyWebsite ?? "",
+        companyLogo: newExp.companyLogo ?? "",
         jobDescription: newExp.jobDescription ?? "",
         startedAt: newExp.startedAt ?? new Date(),
         endedAt: newExp.endedAt,
@@ -167,7 +173,51 @@ export function ExperienceForm({
                 <FormItem>
                   <FormLabel>Job Description</FormLabel>
                   <FormControl>
-                    <Textarea placeholder="I code..." {...field} />
+                    <Textarea
+                      placeholder="I code..."
+                      {...field}
+                      className="min-h-[200px]"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="companyLogo"
+              render={() => (
+                <FormItem>
+                  <FormLabel>Icon</FormLabel>
+                  <FormControl>
+                    <div className="flex flex-col gap-2 items-center ring-1 ring-muted p-8">
+                      {companyLogo && (
+                        <div className="relative p-4 bg-card/30 rounded-md w-full">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="absolute top-2 right-2"
+                            onClick={() => form.setValue("companyLogo", "")}
+                          >
+                            <IconTrash className="h-4 w-4" />
+                          </Button>
+                          <div
+                            className="bg-contain w-full h-40 bg-center bg-no-repeat"
+                            style={{ backgroundImage: `url("${companyLogo}")` }}
+                          />
+                        </div>
+                      )}
+                      <UploadDropzone<UploadRouter>
+                        endpoint="imageUploader"
+                        onClientUploadComplete={(res = []) => {
+                          const file = res.at(0);
+                          if (file) {
+                            form.setValue("companyLogo", file.fileUrl);
+                          }
+                        }}
+                      />
+                    </div>
                   </FormControl>
                   <FormMessage />
                 </FormItem>
diff --git a/components/add-tech-form.tsx b/components/add-tech-form.tsx
index c241c0e..efb2a1c 100644
--- a/components/add-tech-form.tsx
+++ b/components/add-tech-form.tsx
@@ -1,3 +1,4 @@
+import "@uploadthing/react/styles.css";
 import { insertTechnologiesSchema } from "@/lib/validators";
 import {
   type InsertTechnology,
@@ -15,9 +16,11 @@ import {
   FormMessage,
 } from "./ui/form";
 import { Button } from "./ui/button";
-import { IconDeviceFloppy, IconLoader2 } from "@tabler/icons-react";
+import { IconDeviceFloppy, IconLoader2, IconTrash } from "@tabler/icons-react";
 import { Input } from "./ui/input";
 import { Textarea } from "./ui/textarea";
+import { UploadDropzone } from "@uploadthing/react";
+import { type UploadRouter } from "@/app/api/uploadthing/core";
 
 interface Props {
   onSuccess: (newTech: InsertTechnology) => void;
@@ -36,6 +39,8 @@ export function TechnologyAddForm({ onSuccess }: Props) {
     },
   });
 
+  const icon = form.watch("icon");
+
   const submit = form.handleSubmit((data) => {
     startTransition(async () => {
       try {
@@ -56,7 +61,7 @@ export function TechnologyAddForm({ onSuccess }: Props) {
             name="name"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Technology Name</FormLabel>
+                <FormLabel>Technology Name *</FormLabel>
                 <FormControl>
                   <Input {...field} placeholder="NextJs..." />
                 </FormControl>
@@ -69,7 +74,7 @@ export function TechnologyAddForm({ onSuccess }: Props) {
             name="slug"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Slug</FormLabel>
+                <FormLabel>Slug *</FormLabel>
                 <FormControl>
                   <Input {...field} placeholder="nextjs" />
                 </FormControl>
@@ -93,6 +98,45 @@ export function TechnologyAddForm({ onSuccess }: Props) {
               </FormItem>
             )}
           />
+          <FormField
+            control={form.control}
+            name="icon"
+            render={() => (
+              <FormItem>
+                <FormLabel>Icon</FormLabel>
+                <FormControl>
+                  <div className="flex flex-col gap-2 items-center ring-1 ring-muted p-8">
+                    {icon && (
+                      <div className="relative p-4 bg-card/30 rounded-md w-full">
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="absolute top-2 right-2"
+                          onClick={() => form.setValue("icon", "")}
+                        >
+                          <IconTrash className="h-4 w-4" />
+                        </Button>
+                        <div
+                          className="bg-contain w-full h-40 bg-center bg-no-repeat"
+                          style={{ backgroundImage: `url("${icon}")` }}
+                        />
+                      </div>
+                    )}
+                    <UploadDropzone<UploadRouter>
+                      endpoint="imageUploader"
+                      onClientUploadComplete={(res = []) => {
+                        const file = res.at(0);
+                        if (file) {
+                          form.setValue("icon", file.fileUrl);
+                        }
+                      }}
+                    />
+                  </div>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
           <Button>
             {pending ? (
               <IconLoader2 className="animate-spin mr-2 h-5 w-5" />
diff --git a/lib/validators.ts b/lib/validators.ts
index 1eaa043..5e6e512 100644
--- a/lib/validators.ts
+++ b/lib/validators.ts
@@ -40,6 +40,7 @@ export const insertExperienceSchema = createInsertSchema(experiences, {
   jobTitle: (schema) => schema.jobTitle.min(3).max(255),
   jobDescription: (schema) => schema.jobDescription.max(2048),
   companyWebsite: (schema) => schema.companyWebsite.url().or(emptyString),
+  companyLogo: (schema) => schema.companyLogo.url().or(emptyString),
 }).extend({
   stack: z.array(z.number().positive()),
 });
diff --git a/server/server-actions/experience-upsert.ts b/server/server-actions/experience-upsert.ts
index c16d0c9..8010fcc 100644
--- a/server/server-actions/experience-upsert.ts
+++ b/server/server-actions/experience-upsert.ts
@@ -37,6 +37,7 @@ export async function upsertExperience(formData: InsertExperienceSchema) {
           portfolioId: exp.portfolioId,
           companyName: exp.companyName,
           companyWebsite: exp.companyWebsite,
+          companyLogo: exp.companyLogo,
           jobTitle: exp.jobTitle,
           startedAt: exp.startedAt,
           endedAt: exp.endedAt,