Deliveries updates

pizza-to-the-polls · Nov 6, 2023 · e94730d · e94730d
1 parent 0dd167e
commit e94730d
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 66 deletions.
diff --git a/src/api/PizzaApi.ts b/src/api/PizzaApi.ts
@@ -58,7 +58,7 @@ class PizzaApi {
   }
 
   public async getOrder(id: OrderId, errorHandler?: (error: ApiError) => void): Promise<OrderDetails | null> {
-    return this.handleResponse(await baseFetch<OrderDetails>(`/order/${id}`), errorHandler);
+    return this.handleResponse(await baseFetch<OrderDetails>(`/orders/${id}`), errorHandler);
   }
 
   public async getOrders(page: number = 0, limit: number = 100, errorHandler?: (error: ApiError) => void): Promise<OrderQueryResults> {

diff --git a/src/components/app-root/app-root.tsx b/src/components/app-root/app-root.tsx
@@ -72,7 +72,7 @@ export class AppRoot {
               <stencil-route url="/activity" component="page-activity" />
               <stencil-route url="/covid" component="page-covid" />
               <stencil-route url="/contact" component="page-contact" />
-              <stencil-route url={["/deliveries/:location", "/deliveries"]} component="page-deliveries" />
+              <stencil-route url={["/deliveries/:location/:order", "/deliveries/:location", "/deliveries"]} component="page-deliveries" />
               <stencil-route url="/donate" component="page-donate" />
               <stencil-route url="/gift" component="page-gift" />
               <stencil-route url="/crustclub" component="page-crustclub" />

diff --git a/src/components/page-activity/page-activity.tsx b/src/components/page-activity/page-activity.tsx
@@ -1,7 +1,7 @@
 import { Component, h, Host, State } from "@stencil/core";
 
 import { OrderDetails, PizzaApi } from "../../api";
-import { scrollPageToTop } from "../../util";
+import { locationURL, scrollPageToTop } from "../../util";
 
 @Component({
   tag: "page-activity",
@@ -41,11 +41,11 @@ export class PageActivity {
               <div class="order-day">
                 <h3 class="date-header">{date}</h3>
                 <ui-pizza-list class="order-list">
-                  {orders.map(({ id, createdAt, orderType, pizzas, location: { fullAddress }, reports }: OrderDetails) => (
+                  {orders.map(({ id, createdAt, orderType, pizzas, location, reports }: OrderDetails) => (
                     <li id={"order-id-" + id} key={id}>
                       <b>
                         {pizzas} {orderType} ordered at {new Date(createdAt).toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit" })} for{" "}
-                        <stencil-route-link url={`/deliveries/${encodeURI(fullAddress)}`}>{fullAddress}</stencil-route-link>
+                        <stencil-route-link url={locationURL(location)}>{location.fullAddress}</stencil-route-link>
                       </b>
                       <ul>
                         {reports.map(({ reportURL, createdAt: reportCreatedAt, waitTime }) => (

diff --git a/src/components/page-deliveries/page-deliveries.tsx b/src/components/page-deliveries/page-deliveries.tsx
@@ -4,7 +4,7 @@ import { MatchResults, RouterHistory } from "@stencil/router";
 import {} from "googlemaps";
 
 import { LocationInfo, LocationStatus, OrderDetails, OrderInfo, OrderTypes, PizzaApi, TruckDetails, TruckInfo } from "../../api";
-import { scrollPageToTop } from "../../util";
+import { formatDateTime, formatTime, scrollPageToTop } from "../../util";
 import { UiGeoMap } from "../ui-geo-map/ui-geo-map";
 
 enum FoodChoice {
@@ -15,10 +15,6 @@ enum FoodChoice {
 
 type OrderOrTruckItem = { type: "pizza"; data: OrderDetails | null } | { type: "truck"; data: TruckDetails | null };
 
-const formatTime = (date: Date) => date.toLocaleTimeString([], { hour: "numeric", minute: "2-digit", timeZoneName: "short" });
-
-const formatDate = (date: Date) => date.toLocaleDateString([], { day: "2-digit", month: "2-digit" });
-
 const ReportLink = () => <stencil-route-link url="/report">Make a report</stencil-route-link>;
 
 const FoodChoices: FunctionalComponent<{
@@ -46,7 +42,7 @@ const OrderDetailDisplay: FunctionalComponent<{
       <ui-dynamic-text value={order} format={x => x.location.fullAddress} />
     </span>
     <div>
-      <ui-dynamic-text value={order} format={x => `${x.quantity} ${x.orderType} at ${formatDate(x.createdAt)} ${formatTime(x.createdAt)}`} />
+      <ui-dynamic-text value={order} format={x => `${x.quantity} ${x.orderType} at ${formatDateTime(x.createdAt)}`} />
     </div>
   </li>
 );
@@ -62,10 +58,7 @@ const OrderInfoDisplay: FunctionalComponent<{
       <ui-dynamic-text value={order} format={x => `${x.quantity} ${x.orderType} en route`} />
     </span>
     <div>
-      <ui-dynamic-text
-        value={order}
-        format={x => `${formatDate(x.createdAt)} ${formatTime(x.createdAt)}${reportCount > 0 ? ` • ${reportCount} report${reportCount === 1 ? "" : "s"}` : ""}`}
-      />
+      <ui-dynamic-text value={order} format={x => `${formatDateTime(x.createdAt)}${reportCount > 0 ? ` • ${reportCount} report${reportCount === 1 ? "" : "s"}` : ""}`} />
     </div>
   </li>
 );
@@ -80,7 +73,7 @@ const TruckInfoDisplay: FunctionalComponent<{
       <ui-dynamic-text value={truck} format={x => x.location.fullAddress} />
     </span>
     <div>
-      <ui-dynamic-text value={truck} format={x => `Food truck on location since ${formatDate(x.createdAt)} ${formatTime(x.createdAt)}`} />
+      <ui-dynamic-text value={truck} format={x => `Food truck on location since ${formatDateTime(x.createdAt)}`} />
     </div>
   </li>
 );
@@ -117,14 +110,13 @@ export class PageDeliveries {
   @Prop() public match!: MatchResults;
 
   @State() private selectedAddress?: string;
+  @State() private selectedLocation?: LocationStatus;
+  @State() private selectedOrder?: OrderInfo;
   /**
    * Watched and used to re-center the map
    */
-  // @ts-ignore
   @State() private mapCenterPoint: { lat: number; lng: number };
   @State() private selectedFood: FoodChoice;
-  @State() private selectedLocation?: LocationStatus;
-  @State() private selectedOrder?: OrderInfo;
   @State() private recentOrders?: OrderDetails[];
   @State() private recentTrucks?: TruckInfo[];
   @State() private mapZoom: number;
@@ -161,32 +153,19 @@ export class PageDeliveries {
     }
   }
 
-  /*
-  @Watch( "selectedFood" )
-  public selectedFoodChanged( filter: FoodChoice ) {
-    const val = filter === FoodChoice.all
-      ? ""
-      : Object.keys( FoodChoice ).find( k => ( FoodChoice as any )[k] === filter ) + "";
-    if( window.location.hash !== val ) {
-      window.location.hash = val;
-    }
-  }
-  */
-
   /**
    * Lookup location info when the selected address value changes
    */
   @Watch("selectedAddress")
   public selectedAddressChanged(newAddress?: string, oldAddress?: string) {
-    const ownPathFragment = this.history.location.pathname.split("/").filter(x => x !== "")[0];
-    if (newAddress == null && oldAddress != null) {
-      const path = `/${ownPathFragment}`;
+    if (newAddress === null && oldAddress != null) {
+      const path = `/deliveries`;
       this.selectedLocation = undefined;
       if (this.history.location.pathname !== path) {
         this.history.push(path, {});
       }
     } else if (newAddress != null && newAddress !== oldAddress) {
-      const path = `/${ownPathFragment}/${newAddress}`;
+      const path = `/deliveries/${newAddress.replace(/\s/g, "+")}`;
       if (this.history.location.pathname !== path) {
         this.history.push(path, {});
       }
@@ -365,14 +344,14 @@ export class PageDeliveries {
 
           <ui-card>
             <div>
-              <h3>Current Deliveries</h3>
+              <h3>Recent Deliveries</h3>
               {selectedLocation != null && selectedFood === FoodChoice.trucks && locationItems.length < 1 ? (
                 <p>
                   There are no food trucks currently at this location.
                   <br />
                   <ReportLink />
                 </p>
-              ) : selectedLocation != null && ((selectedFood === FoodChoice.pizza && locationItems.length < 1) || selectedLocation.notFound === true) ? (
+              ) : selectedLocation != null && (locationItems.length < 1 || selectedLocation.notFound === true) ? (
                 <p>
                   There are no reports of lines at this location.
                   <br />
@@ -433,9 +412,7 @@ export class PageDeliveries {
             <div>
               <h3>{selectedOrder!.pizzas} Pizzas</h3>
               <p>
-                <strong>
-                  {formatDate(selectedOrder!.createdAt)}, {formatTime(selectedOrder!.createdAt)}
-                </strong>
+                <strong>{formatDateTime(selectedOrder!.createdAt)}</strong>
               </p>
               <p>From {selectedOrder!.restaurant}</p>
               <ul>
@@ -470,8 +447,9 @@ export class PageDeliveries {
     };
   }
 
-  private setAddressFromUrl(match: MatchResults) {
-    const location = match.params.location;
+  private async setAddressFromUrl(match: MatchResults) {
+    const location = match.params.location.replace(/\+/g, " ");
+
     if (location !== this.selectedAddress) {
       this.selectedAddress = location;
       // TODO: Lookup address lat/lng from selectedAddress

diff --git a/src/components/page-home/Deliveries.tsx b/src/components/page-home/Deliveries.tsx
@@ -1,29 +1,23 @@
 import { h } from "@stencil/core";
 
 import { OrderDetails } from "../../api";
+import { locationURL } from "../../util";
+import { formatDateTime } from "../../util";
 
 const capitalize = (word: string): String => `${word.slice(0, 1).toUpperCase()}${word.slice(1, word.length)}`;
 
-const formatDate = (date: Date): String => {
-  const day = date.getDate();
-  const month = date.getMonth() + 1;
-  const hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
-  const minutes = date.getMinutes();
-  const meridian = date.getHours() > 12 ? "pm" : "am";
-
-  return `${day}/${month} ${hours}:${minutes} ${meridian}`;
-};
-
 const Delivery = ({ order }: { order: OrderDetails }) => (
   <div class="delivery">
-    <h5>
+    <h5 class="has-text-black">
       {order.quantity} {capitalize(order.orderType)}
     </h5>
-    <span class="time">{formatDate(order.createdAt)}</span>
+    <span class="time">{formatDateTime(order.createdAt)}</span>
     <p>
-      {order.location.address} in
-      <br />
-      {order.location.city}, {order.location.state}
+      <stencil-route-link url={locationURL(order.location)}>
+        {order.location.address} in
+        <br />
+        {order.location.city}, {order.location.state}
+      </stencil-route-link>
     </p>
   </div>
 );
@@ -36,6 +30,10 @@ const Deliveries = ({ orders }: { orders?: OrderDetails[] }) => (
         <Delivery order={order} />
       ))}
     </div>
+    <hr />
+    <stencil-route-link url="/activity" class="has-text-blue">
+      See more deliveries
+    </stencil-route-link>
   </div>
 );
 

diff --git a/src/components/page-home/page-home.scss b/src/components/page-home/page-home.scss
@@ -232,7 +232,7 @@ page-home {
 
     .deliveries-wrapper {
       overflow-y: scroll;
-      height: 100%;
+      height: 93%;
     }
 
     @media ($under-tweet) {
@@ -250,7 +250,6 @@ page-home {
       border-bottom: 1px solid $gray2;
       margin: 10px 0;
       padding: 4px 0;
-
       h5 {
         margin: 0;
         line-height: 0.5rem;
@@ -263,6 +262,10 @@ page-home {
       p {
         color: $gray4;
         font-size: 0.75rem;
+        font-weight: normal;
+        a {
+          color: $gray4;
+        }
       }
     }
   }

diff --git a/src/components/page-home/page-home.tsx b/src/components/page-home/page-home.tsx
@@ -1,4 +1,4 @@
-import { Build, Component, h, Prop, State } from "@stencil/core";
+import { Component, h, Prop, State } from "@stencil/core";
 import { RouterHistory } from "@stencil/router";
 
 import { OrderDetails, PizzaApi, PizzaTotals } from "../../api";
@@ -20,10 +20,8 @@ export class PageHome {
   public async componentWillLoad() {
     document.title = `Home | Pizza to the Polls`;
 
-    if (Build.isBrowser) {
-      PizzaApi.getTotals().then(totals => (this.totals = totals));
-      PizzaApi.getOrders(0, 20).then(({ results }) => (this.orders = results));
-    }
+    PizzaApi.getTotals().then(totals => (this.totals = totals));
+    PizzaApi.getOrders(0, 20).then(({ results }) => (this.orders = results));
   }
 
   public render() {

diff --git a/src/components/ui-main-content/ui-main-content.scss b/src/components/ui-main-content/ui-main-content.scss
@@ -1,6 +1,6 @@
 ui-main-content {
   .background {
-    background-image: url("images/redpepper.png"), url("images/pizza-star.svg"), url("images/basil.png"), url("images/pizza-yellow.svg");
+    background-image: url("/images/redpepper.png"), url("/images/pizza-star.svg"), url("/images/basil.png"), url("/images/pizza-yellow.svg");
     background-repeat: no-repeat;
     background-position: 2% 27.4rem, -3% 38rem, 98% 15rem, 102% 25rem;
     background-size: 3rem, 8rem, 4rem, 10rem;
@@ -24,7 +24,7 @@ ui-main-content {
         &:before {
           position: absolute;
           content: "";
-          background-image: url(images/pizza-pink.svg);
+          background-image: url("/images/pizza-pink.svg");
           width: 10rem;
           height: 10rem;
           background-size: contain;

diff --git a/src/util/format.ts b/src/util/format.ts
@@ -0,0 +1,5 @@
+export const formatTime = (date: Date): string => date.toLocaleTimeString([], { hour: "numeric", minute: "2-digit", timeZoneName: "short" });
+
+export const formatDate = (date: Date): string => date.toLocaleDateString([], { day: "2-digit", month: "2-digit" });
+
+export const formatDateTime = (date: Date): string => `${formatDate(date)} ${formatTime(date)}`;
diff --git a/src/util/index.ts b/src/util/index.ts
@@ -1,3 +1,5 @@
 export { default as debounce } from "./debounce";
 export { default as scrollPageToTop } from "./scrollPageToTop";
 export { default as toQueryString } from "./toQueryString";
+export { orderURL, locationURL } from "./urls";
+export { formatDateTime, formatTime } from "./format";
diff --git a/src/util/urls.ts b/src/util/urls.ts
@@ -0,0 +1,5 @@
+import { LocationInfo, OrderDetails } from "../api";
+
+export const orderURL = (order: OrderDetails): string => `${locationURL(order.location)}/${order.id}`;
+
+export const locationURL = (location: LocationInfo): string => `/deliveries/${location.fullAddress.replace(/\s/g, "+")}`;