Progress Bar dinamico,done!

wizelineacademy · Jun 8, 2024 · c612497 · c612497
2 parents dff955b + 8c41897
commit c612497
Show file tree

Hide file tree

Showing 41 changed files with 1,072 additions and 436 deletions.
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -25,7 +25,7 @@ jobs:
 
       - name: Install SST
         run: |
-          wget https://github.com/sst/ion/releases/download/v0.0.399/sst-linux-amd64.deb 
+          wget https://github.com/sst/ion/releases/download/v0.0.411/sst-linux-amd64.deb 
           sudo dpkg -i sst-linux-amd64.deb
 
       - name: Install Bun

diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
@@ -8,10 +8,14 @@ on:
     branches:
       - dev
 
+env:
+  AUTH_SECRET: ${{ secrets.AUTH_SECRET }}
+  POSTGRES_URL: ${{ secrets.POSTGRES_URL }}
+  OPENAI_KEY: ${{ secrets.OPENAI_KEY }}
+
 jobs:
   cypress-test:
     runs-on: ubuntu-latest
-    needs: build
 
     steps:
       - name: Git checkout
@@ -48,7 +52,7 @@ jobs:
           headless: true
         env:
           CYPRESS_CACHE_FOLDER: ~/.cache/Cypress
-  build:
+  unit-test:
     runs-on: ubuntu-latest
 
     steps:

diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
@@ -25,7 +25,7 @@ const Login = () => {
 
   return (
     <main className="flex h-dvh items-center justify-center bg-gradient-to-r from-primary to-primary-light">
-      <section className="flex h-fit w-[33%] flex-col justify-center divide-y divide-gray-500 rounded-[20px] bg-bone px-16 py-8 drop-shadow-md">
+      <section className="flex h-fit w-fit flex-col justify-center divide-y divide-gray-500 rounded-[20px] bg-bone px-8 py-8 drop-shadow-md md:px-14 lg:px-16">
         <div className="flex w-full flex-col items-center justify-start gap-y-4 pb-8">
           <p className="mb-4 mt-6 text-center text-3xl font-semibold leading-normal text-black">
             Log in to Feedback Flow

diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx
@@ -18,13 +18,13 @@ const Register = () => {
         toast.error("There was an error saving the data. Try again.");
     } else {
       toast.success("Account created successfully.");
-      router.push("/profile");
+      router.push("/dashboard");
     }
   };
 
   return (
     <div className="flex h-dvh items-center justify-center bg-gradient-to-r from-primary to-primary-light">
-      <section className="flex h-fit w-[33%] flex-col justify-center rounded-[20px] bg-bone px-10 py-8 drop-shadow-md ">
+      <section className="flex h-fit w-fit flex-col justify-center rounded-[20px] bg-bone px-8 py-8 drop-shadow-md md:px-14 lg:px-16 ">
         <p className="mt-6 text-center text-3xl font-semibold leading-normal text-black">
           Sign Up
         </p>

diff --git a/app/(base)/dashboard/[userId]/page.tsx b/app/(base)/dashboard/[userId]/page.tsx
@@ -58,15 +58,15 @@ const Dashboard = async ({ params }: { params: { userId: string } }) => {
         <UserProfile userId={params.userId} userName={user.name} />
       )}
 
-      <div className="mt-2 flex flex-row justify-between md:flex-row">
-        <div className="grid gap-7">
+      <div className="mx-auto mt-2 flex flex-row justify-evenly gap-10">
+        <div className="flex flex-col justify-between gap-10">
           <DashboardGaugeSection gaugeData={gaugeData} />
-          <div className="flex justify-between">
+          <div className="flex flex-row justify-between">
             <DashboardRadarSection radarData={radarData} />
             <DashboardEmotionsSection emotionsData={emotionsData} />
           </div>
         </div>
-        <div className="mt-4 grid gap-7">
+        <div className="mt-4 flex flex-col justify-between">
           <DashboardSurveyCalendar completedSurveys={completedSurveys} />
           <DashboardPCPSection PCPData={PCPData} />
         </div>

diff --git a/app/(base)/pcp/page.tsx b/app/(base)/pcp/page.tsx
@@ -11,9 +11,9 @@ import {
   getUserTasksHistory,
   updateTask,
 } from "@/services/tasks-and-resources";
-import { useEffect, useState } from "react";
+import { Fragment, useEffect, useState } from "react";
 import DialogComponent from "@/components/DialogComponent";
-import { Menu } from "@headlessui/react";
+import { Listbox, Menu, Transition } from "@headlessui/react";
 import { SelectPipResource, SelectPipTask } from "@/db/schema";
 import InfoIcon from "@/components/icons/InfoIcon";
 import VideoIcon from "@/components/icons/VideoIcon";
@@ -60,7 +60,7 @@ const PCP = () => {
   });
 
   useEffect(() => {
-    if (tasksData) {
+    if (Array.isArray(tasksData)) {
       const doneTasks = tasksData.filter(
         (task) => task.status === "DONE",
       ).length;
@@ -78,10 +78,13 @@ const PCP = () => {
     }
   }, [projectId, queryClient]);
 
-  const scheduledAt = sprintSurveyQuery.data?.scheduledAt;
-  const formattedDate = scheduledAt
-    ? new Date(scheduledAt).toLocaleDateString("es-ES")
-    : "";
+  const formatDate = (date: Date) => {
+    return new Date(date).toLocaleString("default", {
+      day: "2-digit",
+      month: "short",
+      year: "numeric",
+    });
+  };
 
   if (
     projectsQuery.isError ||
@@ -98,42 +101,92 @@ const PCP = () => {
 
   return (
     <div>
-      <section id="pip-progressbar" className="mt-4">
+      <section id="pip-progressbar" className="mt-4 w-full">
         <div className="flex items-center justify-between">
           <p className=" mb-2 text-3xl font-semibold">Personal Career Plan</p>
           <p className=" mb-2 text-xl font-medium text-graySubtitle">
-            {`Sprint ${formattedDate}`}
+            {sprintSurveyQuery.data &&
+            typeof sprintSurveyQuery.data === "string"
+              ? sprintSurveyQuery.data
+              : sprintSurveyQuery.isLoading || !sprintSurveyQuery.data
+                ? "loading..."
+                : `Sprint ${formatDate(sprintSurveyQuery.data.scheduledAt as Date)}`}
           </p>
         </div>
-        <ProgressBar width={progressPercentage} height={6} />
-      </section>
-
-      <section id="pip-selectproject" className="pt-4">
-        <div className="relative inline-block w-full">
-          <select
-            onChange={(e) => {
-              console.log(e.target.value);
-              setProjectId(parseInt(e.target.value));
-            }}
-            className="focus:shadow-outline w-full appearance-none rounded border border-gray-400 bg-white p-2 font-medium leading-tight drop-shadow-lg hover:border-gray-500 focus:border-primary focus:outline-none"
-          >
-            <option>Personal Improvement</option>
-            {projectsQuery.data &&
-              projectsQuery.data.map((project) => (
-                <option key={project.id} value={project.id}>
-                  {project.name}
-                </option>
-              ))}
-          </select>
-          <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-            <svg
-              className="h-4 w-4 fill-current"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-            >
-              <path d="M5.516 7.548a.75.75 0 011.06.025L10 10.704l3.424-3.13a.75.75 0 011.06-.024.75.75 0 01.024 1.06l-4 3.5a.75.75 0 01-1.084 0l-4-3.5a.75.75 0 01.024-1.06z" />
-            </svg>
-          </div>
+        <div className="flex w-full flex-row items-center justify-between gap-4">
+          <ProgressBar width={progressPercentage} height={6} />
+          <Listbox value={projectId} onChange={setProjectId}>
+            <div className="relative mt-1 w-1/4">
+              <Listbox.Button className="relative flex w-full cursor-default items-center justify-between rounded-lg bg-white py-2 pl-3 pr-4 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
+                <p className="truncate">
+                  {(projectsQuery.data &&
+                    projectsQuery.data.find((p) => p.id === projectId)?.name) ??
+                    "Personal Improvement"}
+                </p>
+                <svg
+                  className="h-4 w-4 fill-current text-gray-700"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M5.516 7.548a.75.75 0 011.06.025L10 10.704l3.424-3.13a.75.75 0 011.06-.024.75.75 0 01.024 1.06l-4 3.5a.75.75 0 01-1.084 0l-4-3.5a.75.75 0 01.024-1.06z" />
+                </svg>
+              </Listbox.Button>
+              <Transition
+                as={Fragment}
+                leave="transition ease-in duration-100"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <Listbox.Options className="absolute z-50 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
+                  <Listbox.Option
+                    key={-1}
+                    value={-1}
+                    className={({ active }) =>
+                      `relative my-1 cursor-default select-none rounded-xl  ${
+                        active ? "bg-gray-200 text-black" : "text-gray-900"
+                      }`
+                    }
+                  >
+                    {({ selected }) => (
+                      <span
+                        className={`block truncate rounded-xl py-2 pl-10 pr-4 ${
+                          selected
+                            ? "bg-primary font-medium text-white"
+                            : "font-normal"
+                        }`}
+                      >
+                        Personal Improvement
+                      </span>
+                    )}
+                  </Listbox.Option>
+                  {projectsQuery.data &&
+                    projectsQuery.data.map((project) => (
+                      <Listbox.Option
+                        key={project.id}
+                        className={({ active }) =>
+                          `relative my-1 cursor-default select-none rounded-xl  ${
+                            active ? "bg-gray-200 text-black" : "text-gray-900"
+                          }`
+                        }
+                        value={project.id}
+                      >
+                        {({ selected }) => (
+                          <span
+                            className={`block truncate rounded-xl py-2 pl-10 pr-4 ${
+                              selected
+                                ? "bg-primary font-medium text-white"
+                                : "font-normal"
+                            }`}
+                          >
+                            {project.name}
+                          </span>
+                        )}
+                      </Listbox.Option>
+                    ))}
+                </Listbox.Options>
+              </Transition>
+            </div>
+          </Listbox>
         </div>
       </section>
 
@@ -178,7 +231,7 @@ const PCPTasks = ({
   });
 
   useEffect(() => {
-    if (tasksData) {
+    if (Array.isArray(tasksData)) {
       const doneTasks = tasksData.filter(
         (task) => task.status === "DONE",
       ).length;
@@ -191,9 +244,9 @@ const PCPTasks = ({
 
   const mutation = useMutation({
     mutationFn: updateTask,
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({ queryKey: ["tasks", projectId] });
-      await queryClient.invalidateQueries({
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["tasks", projectId] });
+      queryClient.invalidateQueries({
         queryKey: ["tasks-history", projectId],
       });
 
@@ -227,7 +280,8 @@ const PCPTasks = ({
         ) : tasksError ? (
           <NoDataCard text={tasksError.message} />
         ) : (
-          tasksData && (
+          tasksData &&
+          Array.isArray(tasksData) && (
             <div className="mt-2">
               <div className="mb-10 mt-2 flex flex-row gap-12 overflow-x-auto whitespace-nowrap pb-3">
                 {tasksData.map((task) => (
@@ -269,8 +323,8 @@ const PCPTasksDialogContent = ({ projectId }: { projectId: number }) => {
     mutationFn: updateTask,
   });
 
-  if (tasksHistoryQuery.isError) {
-    return <NoDataCard text={tasksHistoryQuery.error.message} />;
+  if (tasksHistoryQuery.data && typeof tasksHistoryQuery.data === "string") {
+    return <NoDataCard text={tasksHistoryQuery.data} />;
   }
 
   if (tasksHistoryQuery.isLoading || !tasksHistoryQuery.data) {
@@ -478,10 +532,10 @@ const PCPResources = ({ projectId }: { projectId: number }) => {
           </button>
         </div>
 
-        {resourcesQuery.isLoading ? (
+        {resourcesQuery.isLoading || !resourcesQuery.data ? (
           <p>loading...</p>
-        ) : resourcesQuery.isError ? (
-          <NoDataCard text={resourcesQuery.error.message} />
+        ) : resourcesQuery.data && typeof resourcesQuery.data === "string" ? (
+          <NoDataCard text={resourcesQuery.data} />
         ) : (
           resourcesQuery.data && (
             <div className="mt-2">
@@ -562,8 +616,11 @@ const PCPResourcesDialogContent = ({ projectId }: { projectId: number }) => {
     refetchOnWindowFocus: false,
   });
 
-  if (resourcesHistoryQuery.isError) {
-    return <NoDataCard text={resourcesHistoryQuery.error.message} />;
+  if (
+    resourcesHistoryQuery.data &&
+    typeof resourcesHistoryQuery.data === "string"
+  ) {
+    return <NoDataCard text={resourcesHistoryQuery.data} />;
   }
 
   if (resourcesHistoryQuery.isLoading || !resourcesHistoryQuery.data) {