Session storage (#148)

* Store city selection * Create Spinner * Show loading state while saved city is being retrieved * Rename * Fix content shift
mirhamasala · Aug 28, 2023 · 1605c48 · 1605c48 · vercel · Aug 28, 2023
1 parent 6d50080
commit 1605c48
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 32 deletions.
diff --git a/src/components/Spinner.jsx b/src/components/Spinner.jsx
@@ -0,0 +1,23 @@
+export function Spinner() {
+  return (
+    <svg
+      className="mr-3 h-5 w-5 animate-spin text-white"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  );
+}
diff --git a/src/data/cities.ts b/src/data/cities.ts
@@ -13,7 +13,7 @@ interface GeoLocation {
 }
 
 export interface City {
-  canBeSelected: boolean;
+  isPublished: boolean;
   geo: GeoLocation;
   id: CityID;
   label: string;
@@ -22,7 +22,7 @@ export interface City {
 
 export const cities: City[] = [
   {
-    canBeSelected: true,
+    isPublished: true,
     geo: {
       latitude: 52.3676,
       longitude: 4.9041,
@@ -32,7 +32,7 @@ export const cities: City[] = [
     post: "/posts/all-my-amsterdam-memories-gather-round-food",
   },
   {
-    canBeSelected: true,
+    isPublished: true,
     geo: {
       latitude: 41.3851,
       longitude: 2.1734,
@@ -42,7 +42,7 @@ export const cities: City[] = [
     post: undefined,
   },
   {
-    canBeSelected: true,
+    isPublished: true,
     geo: {
       latitude: 40.4167754,
       longitude: -3.7037902,
@@ -52,7 +52,7 @@ export const cities: City[] = [
     post: undefined,
   },
   {
-    canBeSelected: true,
+    isPublished: true,
     geo: {
       latitude: -37.8136,
       longitude: 144.9631,
@@ -62,7 +62,7 @@ export const cities: City[] = [
     post: undefined,
   },
   {
-    canBeSelected: true,
+    isPublished: true,
     geo: {
       latitude: 43.8563,
       longitude: 18.4131,
@@ -72,7 +72,7 @@ export const cities: City[] = [
     post: "/posts/sarajevo-favorites",
   },
   {
-    canBeSelected: true,
+    isPublished: true,
     geo: {
       latitude: 1.2860229769167766,
       longitude: 103.8572152796645,
@@ -82,7 +82,7 @@ export const cities: City[] = [
     post: "/posts/goodbye-little-red-dot",
   },
   {
-    canBeSelected: true,
+    isPublished: true,
     geo: {
       latitude: 32.0853,
       longitude: 34.7818,
@@ -92,3 +92,5 @@ export const cities: City[] = [
     post: undefined,
   },
 ];
+
+export const publishedCities = cities.filter((city) => city.isPublished);
diff --git a/src/pages/map.jsx b/src/pages/map.jsx
@@ -1,21 +1,26 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Head from "next/head";
 import { Listbox } from "@headlessui/react";
 
-import { cities } from "@/data/cities";
+import { publishedCities } from "@/data/cities";
 import { getAllSpots } from "@/lib/getAllSpots";
 import { getPublishedSpotsWithCategoryAndCity } from "@/lib/getPublishedSpotsWithCategoryAndCity";
 
 import Map from "@/components/Map";
+import { Spinner } from "@/components/Spinner";
 import { SimpleLayout } from "@/components/SimpleLayout";
 
 function Icon(props) {
   return (
     <svg
+      className="h-5 w-5"
+      viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth="1.5"
-      viewBox="0 0 24 24"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
       {...props}
     >
       {props.children}
@@ -25,42 +30,39 @@ function Icon(props) {
 
 function CheckIcon() {
   return (
-    <Icon className="h-5 w-5" aria-hidden="true">
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M4.5 12.75l6 6 9-13.5"
-      />
+    <Icon>
+      <path d="M4.5 12.75l6 6 9-13.5" />
     </Icon>
   );
 }
 
 function ChevronUpDownIcon() {
   return (
-    <Icon className="h-5 w-5" aria-hidden="true">
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
-      />
+    <Icon>
+      <path d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
     </Icon>
   );
 }
 
 function CitySelect({ selectedCity, setSelectedCity }) {
-  const citiesThatCanBeSelected = cities.filter((city) => city.canBeSelected);
+  const handleCityChange = (city) => {
+    setSelectedCity(city);
+    sessionStorage.setItem("selectedCity", city.id);
+  };
 
   return (
     <div className="relative z-10 mb-12 w-full xs:w-72">
-      <Listbox value={selectedCity} onChange={setSelectedCity}>
+      <Listbox value={selectedCity} onChange={handleCityChange}>
         <Listbox.Button className="relative w-full cursor-default rounded-md border border-zinc-900/10 bg-white py-2 pl-3 pr-10 text-left shadow-md shadow-zinc-800/5 dark:border-zinc-700 dark:bg-zinc-800-50 dark:font-medium dark:text-zinc-200 sm:text-sm">
-          <span className="block truncate">{selectedCity.label}</span>
+          <span className="grid min-h-[1.5rem] content-center truncate">
+            {selectedCity ? selectedCity.label : <Spinner />}
+          </span>
           <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
             <ChevronUpDownIcon />
           </span>
         </Listbox.Button>
         <Listbox.Options className="absolute mt-1 max-h-60 w-full overflow-auto rounded-md border border-zinc-900/10 bg-white p-2 shadow-lg shadow-zinc-800/5 dark:border-zinc-700 dark:bg-zinc-800-50 dark:text-zinc-200 sm:text-sm">
-          {citiesThatCanBeSelected.map((city) => (
+          {publishedCities.map((city) => (
             <Listbox.Option
               key={city.id}
               className={({ active }) =>
@@ -100,7 +102,19 @@ function MapPage({ spots }) {
   const publishedSpotsWithCategoryAndCity =
     getPublishedSpotsWithCategoryAndCity(spots);
 
-  const [selectedCity, setSelectedCity] = useState(cities[0]);
+  const [selectedCity, setSelectedCity] = useState(null);
+
+  useEffect(() => {
+    const savedCityId = sessionStorage.getItem("selectedCity");
+
+    if (savedCityId) {
+      const city = publishedCities.find((city) => city.id === savedCityId);
+
+      if (city) {
+        setSelectedCity(city);
+      }
+    }
+  }, []);
 
   return (
     <>
@@ -123,10 +137,14 @@ function MapPage({ spots }) {
             selectedCity={selectedCity}
             setSelectedCity={setSelectedCity}
           />
-          <Map
-            center={selectedCity.geo}
-            spots={publishedSpotsWithCategoryAndCity}
-          />
+          {selectedCity ? (
+            <Map
+              center={selectedCity.geo}
+              spots={publishedSpotsWithCategoryAndCity}
+            />
+          ) : (
+            <Spinner />
+          )}
         </div>
       </SimpleLayout>
     </>