Merge branch 'main' into error-handling

frontend/package.json

@@ -17,6 +17,7 @@
     "@mui/icons-material": "^5.14.14",
     "@mui/material": "^5.14.13",
     "@radix-ui/react-slot": "^1.0.2",
+    "@react-google-maps/api": "^2.19.2",
     "@react-oauth/google": "^0.11.1",
     "@reduxjs/toolkit": "^1.9.7",
     "@stripe/react-stripe-js": "^2.4.0",

frontend/src/components/Jobs/AvatarCell.tsx

@@ -4,10 +4,12 @@ type ProducerCellProps = {
   avatar?: string,
   firstName?: string,
   lastName?: string,
-  userType: 'designer' | 'producer'
+  userType: 'designer' | 'producer',
+  imageOnly: boolean,
+  size: number,
 }
 
-export default function AvatarCell({ firstName, lastName, userType } : ProducerCellProps) {
+export default function AvatarCell({ firstName, lastName, userType, imageOnly, size } : ProducerCellProps) {
   const avatarOutlineColor = {
     designer: '!bg-designer',
     producer: '!bg-producer',
@@ -17,34 +19,34 @@ export default function AvatarCell({ firstName, lastName, userType } : ProducerC
     <div className="flex items-center text-base">
       <Avatar
         sx={{
-          width: 85,
-          height: 85,
+          width: size,
+          height: size,
           marginRight: '20px'
         }}
         className={avatarOutlineColor[userType]}
       >
         <Avatar
           sx={{
-            width: 80,
-            height: 80,
+            width: size - 5,
+            height: size - 5,
             backgroundColor: "#FFFFFF",
           }}
         >
           <Avatar
             sx={{
-              width: 70,
-              height: 70
+              width: size - 15,
+              height: size - 15,
             }}
           >
-            {firstName?.charAt(0)}
+            {firstName && lastName ? firstName.charAt(0) : undefined}
           </Avatar>
         </Avatar>
       </Avatar>
-      {(firstName && lastName)
+      {!imageOnly && ((firstName && lastName)
         ? firstName + " " + lastName
         : userType === "producer"
           ? "Awaiting Acceptance"
-          : "User Not Found"}
+          : "User Not Found")}
     </div>
   );
 }

frontend/src/components/Jobs/DesignerJobs/JobsDesigner.tsx

@@ -15,7 +15,7 @@ import { Job, PageStatus } from "../../../main.types";
 import { resetUser } from "../../../store/userSlice";
 import FilterDropDown from "../FilterDropDown";
 import TableHeader from "../TableHeader";
-import JobRow from "../JobRow";
+import JobRow, { JobExtended } from "../JobRow";
 import ErrorImage from "../../../assets/hero-image-2.png"
 
 export default function JobsDesigner() {
@@ -105,7 +105,7 @@ export default function JobsDesigner() {
             </TableHead>
             <TableBody>
               {jobsInView.map((job) =>
-                <JobRow job={job} type='producer' />
+                <JobRow job={job as JobExtended} type='producer' />
               )}
             </TableBody>
           </Table>

frontend/src/components/Jobs/JobRow.tsx

@@ -5,8 +5,16 @@ import AvatarCell from "./AvatarCell";
 import StyledButton from "../Button/Button";
 import { userApi } from "../../api/api";
 
+export type JobExtended =
+  Job & {
+    designerFirstName: string
+    designerLastName: string
+    producerFirstName: string
+    producerLastName: string
+  }
+
 type JobRowProps = {
-  job: Job;
+  job: JobExtended;
   type: 'designer' | 'producer';
 }
 
@@ -50,7 +58,10 @@ export default function JobRow({ job, type }: JobRowProps) {
   };
 
   // Retrieve the designer name:
-  const name = designerName(type === 'producer' ? job.producerId as string : job.designerId as string)
+  let name
+  if (type === 'designer' && !job.designerFirstName) {
+    name = designerName(job.designerId as string)
+  }
 
   const createdDate = new Date(job.createdAt)
   if (type === 'designer') {
@@ -70,8 +81,10 @@ export default function JobRow({ job, type }: JobRowProps) {
       <JobTableCell size='lg'>
         <AvatarCell
           userType={type}
-          firstName={name?.firstName}
-          lastName={name?.lastName}
+          firstName={name ? name.firstName : type === "producer" ? job.producerFirstName : job.designerFirstName}
+          lastName={name ? name.lastName : type === "producer" ? job.producerLastName : job.designerLastName}
+          imageOnly={false}
+          size={85}
         />
       </JobTableCell>
       <JobTableCell size='md'>
@@ -89,7 +102,7 @@ export default function JobRow({ job, type }: JobRowProps) {
         <StyledButton
           color='primary'
           size='sm'
-          href={`/job-accept/${job.id}`}
+          href={(job.status === "PENDING" && type === "designer") ? `/job-accept/${job.id}` : `/jobs/${job.id}`}
         >
           View Job
         </StyledButton>

frontend/src/components/Jobs/ProducerJobs/JobViewProducer.tsx

@@ -0,0 +1,9 @@
+type JobViewProducerProps = {
+  jobId: string
+}
+
+export default function JobViewProducer({ jobId } : JobViewProducerProps) {
+  return (
+    <h1>Producer Job View {jobId}</h1>
+  )
+}

frontend/src/components/Jobs/ProducerJobs/JobsProducer.tsx

@@ -13,7 +13,7 @@ import { Job } from "../../../main.types";
 import Loading from "./components/Loading";
 import { PageStatus } from "../../../main.types";
 import FilterDropDown from "../FilterDropDown";
-import JobRow from "../JobRow";
+import JobRow, { JobExtended } from "../JobRow";
 import TableHeader from "../TableHeader";
 import { useStateSelector } from "../../../hooks/use-redux";
 import ErrorImage from "../../../assets/hero-image-2.png"
@@ -131,7 +131,7 @@ export default function JobsProducer() {
               </TableHead>
               <TableBody>
                 {jobs.map((job) =>
-                  <JobRow job={job} type='designer' />
+                  <JobRow job={job as JobExtended} type='designer' />
                 )}
               </TableBody>
             </Table>

frontend/src/components/Map/Map.tsx

@@ -0,0 +1,60 @@
+import { useCallback, useState } from 'react'
+import { GoogleMap, useJsApiLoader, MarkerF, InfoWindowF } from '@react-google-maps/api';
+
+const containerStyle = {
+  width: '100%',
+  height: '250px'
+};
+
+type MapProps = {
+  zoom: number,
+  latitude: number,
+  longitude: number,
+}
+
+export default function Map({ zoom, latitude, longitude } : MapProps) {
+  const [selected, setSelected] = useState(false)
+
+  const center = {
+    lat: latitude,
+    lng: longitude,
+  };
+
+  const { isLoaded } = useJsApiLoader({
+    id: 'google-map-script',
+    googleMapsApiKey: "AIzaSyAP5_5mbMLn34q2B_UHDM4MHsbfb82ZTZM"
+  })
+
+  const onLoad = useCallback(function callback(map: google.maps.Map) {
+    map.setZoom(zoom)
+  }, [zoom])
+
+  return isLoaded ? (
+    <GoogleMap
+      mapContainerStyle={containerStyle}
+      center={center}
+      zoom={zoom}
+      onLoad={onLoad}
+    >
+      {!selected
+        ? <MarkerF
+            position={center}
+            onClick={() => setSelected(true)}
+          />
+        : <InfoWindowF
+            position={center}
+            zIndex={1}
+            onCloseClick={() => setSelected(false)}
+          >
+            <div className='m-3'>
+              <h1 className='font-semibold mb-2'>
+                Delivery Address
+              </h1>
+              <h2>3618 NE Couch St</h2>
+              <h2>Portland, OR</h2>
+            </div>
+          </InfoWindowF>
+      }
+    </GoogleMap>
+) : <></>
+}

frontend/src/main.types.ts

@@ -45,8 +45,7 @@ export interface Design {
 
 // Address coordinates
 export type Coordinates = {
-  latitude: number;
-  longitude: number;
+  coordinates: number[]
 };
 
 // An address