Fix dispatches

astro/src/components/KiosMap.tsx

@@ -83,8 +83,6 @@ const headers = {
   "Content-Type": "application/json",
 }
 
-
-
 const getMakers = async () => {
   const url = `${API_URL}/api/makers`
   console.log("Fetching url:", url)
@@ -129,6 +127,7 @@ const getDispatches = async () => {
   const response = await axios.get(url);
 
   const dispatches:Dispatch[] = response.data.docs;
+  
   console.log(`Fetch result from ${url}`, dispatches)
   return dispatches;
 
@@ -137,11 +136,21 @@ const getDispatches = async () => {
 const useGetDispatches = () => {
   return useQuery<Dispatch[]>({
     queryFn: () => getDispatches(),
-    queryKey: ['retailers'],
+    queryKey: ['dispatches'],
     enabled: true
   })
 }
 
+//Payload longitude and latitude are mislabeled in payload (lol)
+const locationSwitcharoo = (location: number[]) => {
+  if(location.length === 2) {
+    const correctedLocation = [location[1], location[0]]
+    return correctedLocation;
+  }
+  console.error("locationSwitcharoo: Location array malformed")
+  return location
+}
+
 export const KiosMap = () => {
 
   const { data: makers, isLoading: isLoadingMakers } = useGetMakers();
@@ -176,12 +185,12 @@ export const KiosMap = () => {
         attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
       />
 
-      {makers &&
+      {(makers && !isLoadingMakers) &&
         <LayerGroup>
           {makers.map((maker: any, index: number) => (
             <Marker
               key={index}
-              position={[maker.location[0], maker.location[1]]}
+              position={[locationSwitcharoo(maker.location)[0], locationSwitcharoo(maker.location)[1]]}
               icon={blackDotIcon}
             >
               <Popup>{maker.name}</Popup>
@@ -190,12 +199,12 @@ export const KiosMap = () => {
         </LayerGroup>
       }
 
-      {retailers &&
+      {(retailers && !isLoadingRetailers) &&
         <LayerGroup>
           {retailers.map((retailer: any, index: number) => (
             <Marker
               key={index}
-              position={[retailer.location[0], retailer.location[1]]}
+              position={[locationSwitcharoo(retailer.location)[0], locationSwitcharoo(retailer.location)[1]]}
               icon={blackDotIcon}
             >
               <Popup>{retailer.name}</Popup>
@@ -204,11 +213,15 @@ export const KiosMap = () => {
         </LayerGroup>
       }
 
-      {dispatches &&
+      {(dispatches && !isLoadingDispatches) &&
         <LayerGroup>
           {dispatches.map((dispatch: any, index: number) => {
-            const start = dispatch.maker.location;
-            const end = dispatch.retailer.location;
+
+            if(dispatch.maker && dispatch.retailer) {
+
+              const start = locationSwitcharoo(dispatch.maker.location);
+              const end = locationSwitcharoo(dispatch.retailer.location);
+            
 
             let productsString = '';
             dispatch.products.forEach((product: any, i: number) => {
@@ -222,22 +235,13 @@ export const KiosMap = () => {
 
             return (
               <div key={index}>
-                <Marker position={[start[0], start[1]]}
-                  icon={blackDotIcon}
-                >
-                  <Popup>{dispatch.startingPoint.name}</Popup>
-                </Marker>
-                <Marker position={[end[0], end[1]]}
-                  icon={blackDotIcon}
-                >
-                  <Popup>{dispatch.endPoint.name}</Popup>
-                </Marker>
                 <Polyline
                   positions={[[start[0], start[1]], [end[0], end[1]]]}
                   color="#000"
                   dashArray={myDashArray} />
               </div>
             );
+            }
           })}
         </LayerGroup>
       }

astro/src/types.ts

@@ -52,11 +52,12 @@ export interface Courier {
 }
 export interface Dispatch {
   id: string;
+  code: string;
   products: string[] | Product[];
   courier?: string | Courier;
-  maker?: string | Maker;
-  retailer?: string | Retailer;
-  status: ('requested' | 'accepted' | 'archived')[];
+  maker: string | Maker;
+  retailer: string | Retailer;
+  status: 'requested' | 'accepted' | 'archived';
   updatedAt: string;
   createdAt: string;
 }

payload/src/collections/Dispatches.ts

@@ -3,17 +3,20 @@ import { CollectionConfig } from 'payload/types';
 const Dispatches: CollectionConfig = {
   slug: 'dispatches',
   admin: {
-    useAsTitle: 'dispatchesCode',
+    useAsTitle: 'code',
   },
   access: {
     read: () => true,
   },
   fields: [
-    // {
-    //   name: 'dispatchesCode',
-    //   type: 'text', 
-    //   required: false,
-    // },
+    {
+      name: 'code',
+      type: 'text', 
+      required: true,
+      maxLength: 20,
+      unique: true,
+      label: "Code, a unique name for the dispatch"
+    },
     {
       name: 'products', 
       type: 'relationship', 
@@ -33,19 +36,19 @@ const Dispatches: CollectionConfig = {
       type: 'relationship', 
       relationTo: 'makers', 
       hasMany: false,
-      required: false
+      required: true
     },
     {
       name: 'retailer', 
       type: 'relationship', 
       relationTo: 'retailers', 
       hasMany: false,
-      required: false
+      required: true
     },
     {
       name: 'status',
       type: 'select',
-      hasMany: true,
+      hasMany: false,
       required: true,
       options: [
         {

payload/src/collections/Products.ts

@@ -3,7 +3,7 @@ import { CollectionConfig } from 'payload/types';
 const Products: CollectionConfig = {
   slug: 'products',
   admin: {
-    useAsTitle: 'productTitle',
+    useAsTitle: 'title',
   },
   access: {
     read: () => true,