fix(weather): filter cities and disable unused controls

web/src/App.tsx

@@ -22,6 +22,7 @@ import type { ActivityId } from './types/activity';
 
 const sortModes = ['default', 'best', 'temperature', 'rain', 'wind'] as const;
 type SortMode = (typeof sortModes)[number];
+type CityFilter = 'all' | CityId;
 const cityIds = new Set<CityId>(cities.map(({ id }) => id));
 const activitySchema = z.enum(['walking', 'cycling', 'running', 'skiing']);
 const sortModeSchema = z.enum(sortModes);
@@ -30,6 +31,8 @@ const cityIdSchema = z
   .refine((id): id is CityId => cityIds.has(id as CityId));
 const favoriteIdsSchema = z.array(cityIdSchema);
 
+const cityFilterSchema = z.union([z.literal('all'), cityIdSchema]);
+
 function Header({
   selectedCityId,
   activity,
@@ -38,10 +41,10 @@ function Header({
   onActivityChange,
   onSortChange,
 }: {
-  selectedCityId: CityId;
+  selectedCityId: CityFilter;
   activity: ActivityId;
   sortMode: SortMode;
-  onCityChange: (cityId: CityId) => void;
+  onCityChange: (cityId: CityFilter) => void;
   onActivityChange: (activity: ActivityId) => void;
   onSortChange: (sortMode: SortMode) => void;
 }) {
@@ -61,8 +64,12 @@ function Header({
             By
             <select
               value={selectedCityId}
-              onChange={(event) => onCityChange(event.target.value as CityId)}
+              onChange={(event) =>
+                onCityChange(event.target.value as CityFilter)
+              }
             >
+              <option value="all">Alle</option>
+
               {cities.map((city) => (
                 <option key={city.id} value={city.id}>
                   {city.name}
@@ -74,6 +81,13 @@ function Header({
             Aktivitet
             <select
               value={activity}
+              disabled={selectedCityId !== 'all' || sortMode !== 'best'}
+              aria-label="Velg aktivitet"
+              title={
+                sortMode !== 'best'
+                  ? 'Velg «Best vær for aktivitet» for å velge aktivitet'
+                  : undefined
+              }
               onChange={(event) =>
                 onActivityChange(event.target.value as ActivityId)
               }
@@ -89,6 +103,7 @@ function Header({
             Sorter etter
             <select
               value={sortMode}
+              disabled={selectedCityId !== 'all'}
               onChange={(event) => onSortChange(event.target.value as SortMode)}
             >
               <option value="default">Rekkefølge</option>
@@ -275,12 +290,14 @@ function MainWeather({
   city,
   weather,
   activity,
+  sortMode,
   feedback,
   onClose,
 }: {
   city: City;
   weather: CityWeather | null;
   activity: ActivityId;
+  sortMode: SortMode;
   feedback: ReactNode;
   onClose: () => void;
 }) {
@@ -295,9 +312,12 @@ function MainWeather({
           <h2 id="selected-weather-title">Været i {city.name}</h2>
         </div>
       </div>
-      <p>
-        Vurdert for <strong>{getActivityName(activity).toLowerCase()}</strong>.
-      </p>
+      {sortMode === 'best' && (
+        <p>
+          Vurdert for <strong>{getActivityName(activity).toLowerCase()}</strong>
+          .
+        </p>
+      )}
       {feedback}
       {weather && (
         <>
@@ -340,11 +360,11 @@ function MainWeather({
 }
 
 export function App() {
-  const [selectedCityId, setSelectedCityId] = useStoredState<CityId>(
+  const [selectedCityId, setSelectedCityId] = useStoredState<CityFilter>(
     'sessionStorage',
     't31-selected-city',
-    cityIdSchema,
-    exampleCity.id,
+    cityFilterSchema,
+    'all',
   );
   const [activity, setActivity] = useStoredState<ActivityId>(
     'sessionStorage',
@@ -421,6 +441,10 @@ export function App() {
     ...item,
     rank: sortMode === 'best' && Number.isFinite(item.score) ? index + 1 : null,
   }));
+  const visibleItems =
+    selectedCityId === 'all'
+      ? rankedItems
+      : rankedItems.filter((item) => item.city.id === selectedCityId);
   const detailCity = cities.find(({ id }) => id === detailCityId) ?? null;
   const detailItem = rankedItems.find(({ city }) => city.id === detailCityId);
   const toggleFavorite = (city: City) =>
@@ -434,19 +458,27 @@ export function App() {
     <>
       <main>
         <Header
-          selectedCityId={selectedCity.id}
+          selectedCityId={selectedCityId}
           activity={activity}
           sortMode={sortMode}
-          onCityChange={setSelectedCityId}
+          onCityChange={(cityId) => {
+            setSelectedCityId(cityId);
+
+            if (cityId !== 'all') {
+              setSortMode('default');
+            }
+          }}
           onActivityChange={setActivity}
           onSortChange={setSortMode}
         />
         <WeatherList
-          items={rankedItems}
+          items={visibleItems}
           selectedCity={selectedCity}
-          onCitySelect={(city) => setSelectedCityId(city.id)}
-          onOpenDetails={(city) => {
+          onCitySelect={(city) => {
             setSelectedCityId(city.id);
+            setSortMode('default');
+          }}
+          onOpenDetails={(city) => {
             setDetailCityId(city.id);
           }}
           onToggleFavorite={toggleFavorite}
@@ -458,6 +490,7 @@ export function App() {
                   city={detailCity}
                   weather={detailItem?.weather ?? null}
                   activity={activity}
+                  sortMode={sortMode}
                   feedback={detailItem?.feedback}
                   onClose={() => setDetailCityId(null)}
                 />