Style dispatches

astro/src/components/KiosMap.tsx

@@ -66,7 +66,7 @@ type Dispatch = {
   courier?: User;
   
   timeSensitive: boolean;
-  status: DispatchStatus[];
+  status: DispatchStatus;
 
   departureDate: string;
   arrivalDate: string;
@@ -151,6 +151,26 @@ const locationSwitcharoo = (location: number[]) => {
   return location
 }
 
+
+const dashArrays: Record<DispatchStatus, string> = {
+  requested: '20, 10',
+  accepted: '0, 0',
+  archived: '1, 5',
+}
+
+const dashColors: Record<DispatchStatus, string> = {
+  requested: '#000',
+  accepted: '#000', 
+  archived: '#000', 
+}
+
+const dashOpacities: Record<DispatchStatus, number> = {
+  requested: 0.7,
+  accepted: 0.7, 
+  archived: 0.5
+}
+
+
 export const KiosMap = () => {
 
   const { data: makers, isLoading: isLoadingMakers } = useGetMakers();
@@ -228,17 +248,20 @@ export const KiosMap = () => {
               productsString += product.productTitle + (i + 1 < dispatch.products.length ? ', ' : '');
             });
 
-            const myDashArray =
+            //status type should already be inferred when list of dispatches is created, weird that is is required
-              dispatch.status === 'requested' ? '20, 10' :
+            const status: DispatchStatus = dispatch.status; 
-                dispatch.status === 'archived' ? '1, 5' :
-                  '0, 0';
 
+            const dashArray:string = dashArrays[status]
+            const dashColor:string = dashColors[status]
+            const dashOpacity:number = dashOpacities[status]
+          
             return (
               <div key={index}>
                 <Polyline
                   positions={[[start[0], start[1]], [end[0], end[1]]]}
-                  color="#000"
+                  color={dashColor}
-                  dashArray={myDashArray} />
+                  opacity={dashOpacity}
+                  dashArray={dashArray} />
               </div>
             );
             }