From 266a2287d9464be63723011a6d08bc1203a3b577 Mon Sep 17 00:00:00 2001
From: Kevin Compton <kevin@wecreativeagency.com>
Date: Fri, 4 Aug 2023 10:54:48 -0700
Subject: [PATCH] updates view

---
 pages/updates/index.tsx | 105 ++++++++++++++++++++++++++++++++--------
 types/mongo.ts          |   5 ++
 2 files changed, 90 insertions(+), 20 deletions(-)

diff --git a/pages/updates/index.tsx b/pages/updates/index.tsx
index 51284e1..8f13305 100644
--- a/pages/updates/index.tsx
+++ b/pages/updates/index.tsx
@@ -1,7 +1,8 @@
 "use client";
 import React, { useState, useEffect, ReactNode } from "react";
-import { Project } from "@/types/mongo";
+import { Project, ProjectUpdate } from "@/types/mongo";
 import { AdminNav } from "@/components/AdminNav";
+import { useForm, SubmitHandler } from "react-hook-form";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { Textarea } from "@/components/ui/textarea";
 import {
@@ -13,29 +14,82 @@ import {
   } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
 import { useGetCurrentUser } from "@/hooks/useGetCurrentUser";
+import { useContext } from "react";
+import { AuthContext } from "@/components/AuthProvider";
 
 export default function Updates() {
     const { data } = useGetCurrentUser()
     const [projects, setProjects] = useState<Project[]>([]);
     const [project, setProject] = useState<Project>();
+    const [updates, setUpdates] = useState<ProjectUpdate[]>([]);
+    const { idToken } = useContext(AuthContext)
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+      } = useForm<ProjectUpdate>({
+        mode: "onBlur",
+        defaultValues: {
+          project: '',
+          text: ''
+        }
+      });
 
     useEffect(() => {
-       getProjects(data._id)
+        if(data)
+        getProjects(data._id)
     }, [data]);
 
-    ///projects/:projectId/updates
+    const onSubmit: SubmitHandler<ProjectUpdate> = (formData) => {
+        try {
+            sendUpdate(formData)
+        } catch (error) {
+          console.log(error)
+        }
+      };
+    
+    async function sendUpdate(values: ProjectUpdate) {
+        const res = await fetch(`${process.env.BACKEND_URL}/projects/${values.project}/updates`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${idToken}`,
+          },
+          body: JSON.stringify(values),
+        });
+        return await res.json();
+    }
 
     function selectProject(projectId:string) {
         const currentProject = projects.filter((p) => p._id === projectId)
         setProject(currentProject[0])
+        if(project)
+        getUpdates(project?._id)
+    }
+
+    async function getUpdates(projectId:string) {
+        const res = await fetch(`${process.env.BACKEND_URL}/projects/${projectId}/updates`, {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${idToken}`,
+            }
+          })
+          .then(res => res.json())
+          .then(
+            (result) => {
+                setUpdates(result)
+            }
+          );
+          return res;
     }
 
-    async function getProjects(id:number) {
+    async function getProjects(id:string) {
         const res = await fetch(`${process.env.BACKEND_URL}/users/${id}/projects`, {
             method: "GET",
             headers: {
               "Content-Type": "application/json",
-              Authorization: `Bearer ${id}`,
+              Authorization: `Bearer ${idToken}`,
             }
           })
           .then(res => res.json())
@@ -54,19 +108,20 @@ export default function Updates() {
                 <div className="w-1/2 pr-10">
                     <h1 className="text-lg">Share an update with your supporters</h1>
                     <p>Update your supporters with the latest intel on your project and progress. Let them know what you&apos;re looking for and how they can support you. Help them help you spread your vision!</p>
-                    
-                    <Select onValueChange={selectProject}>
-                        <SelectTrigger className="w-full my-6">
-                            <SelectValue placeholder="Select a vision to update" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            {projects.map((project) => (
-                                <SelectItem value={project._id}>{project.title}</SelectItem>
-                            ))}
-                        </SelectContent>
-                    </Select>
-                    <Textarea className="mb-4" />
-                    <Button>Share Update</Button>
+                    <form onSubmit={handleSubmit(onSubmit)}>
+                        <Select {...register(`project`, { required: "Project is required" })} onValueChange={selectProject}>
+                            <SelectTrigger className="w-full my-6">
+                                <SelectValue placeholder="Select a vision to update" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {projects.map((project) => (
+                                    <SelectItem value={project._id}>{project.title}</SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                        <Textarea {...register(`text`, { required: "Text is required" })} className="mb-4" />
+                        <Button type="submit">Share Update</Button>
+                    </form>
                 </div>
                 {project && (
                     <div className="flex-grow">
@@ -74,13 +129,23 @@ export default function Updates() {
                             <AccordionItem value="item-1">
                                 <AccordionTrigger>Previous Updates</AccordionTrigger>
                                 <AccordionContent>
-                                    There are no updates for this project.
+                                    {!updates && (
+                                        <p>There are no updates for this project.</p>
+                                    )}
+                                    {updates && updates.map((update) => (
+                                        <p>{update.text}</p>
+                                    ))}
                                 </AccordionContent>
                             </AccordionItem>
                             <AccordionItem value="item-2">
                                 <AccordionTrigger>Previous Milestones</AccordionTrigger>
                                 <AccordionContent>
-                                    There are no milestones for this project.
+                                    {!project.milestones && (
+                                        <p>There are no milestones for this project.</p>
+                                    )}
+                                    {project.milestones && project.milestones.map((milestone) => (
+                                        <p>{milestone.text}: {milestone.amount}</p>
+                                    ))}
                                 </AccordionContent>
                             </AccordionItem>
                         </Accordion>
diff --git a/types/mongo.ts b/types/mongo.ts
index 7e3713f..ec5305e 100644
--- a/types/mongo.ts
+++ b/types/mongo.ts
@@ -87,6 +87,11 @@ type AmountText = {
   text: string;
 };
 
+export type ProjectUpdate = {
+  project: string;
+  text: string;
+}
+
 export enum Brief {
   THE_ENCHANTRESS = "The Enchantress",
   THE_HEALER = "The Healer",