Feat/pin favorites

src/App.tsx

@@ -15,7 +15,7 @@ function App() {
       <section id="center">
         <LocationList onCitySelect={setSelectedCity} />
         <SearchBar onSearch={handleSearch} />
-        <ViewCity city={selectedCity} />
+        <ViewCity cityName={selectedCity} />
       </section>
       <section id="spacer"></section>
     </>

src/components/ViewCity.tsx

@@ -3,11 +3,11 @@ import useGetCityCoordinates from "../hooks/fetchCities/useGetCityCoordinates"
 import StarButton from "./starButton"
 
 interface ViewCityProp {
-  city: string
+  cityName: string
 }
 
 export default function ViewCity(arg: ViewCityProp) {
-  const data = useGetCityCoordinates({ cityName: arg.city })
+  const data = useGetCityCoordinates({ cityName: arg.cityName })
 
   const { isLoading, error, result } = useGetWeather(
     data.result[0]?.latitude,
@@ -101,7 +101,7 @@ export default function ViewCity(arg: ViewCityProp) {
                 fontWeight: "500",
               }}
             >
-              {arg.city}
+              {arg.cityName}
             </h2>
             <p
               style={{
@@ -114,7 +114,7 @@ export default function ViewCity(arg: ViewCityProp) {
             </p>
           </div>
         </div>
-        <StarButton cityName={arg.city} />
+        <StarButton city={{ name: arg.cityName, lat: data?.result[0]?.latitude, lon: data?.result[0]?.longitude }} />
       </div>
 
       <div

src/components/listItem.tsx

@@ -3,6 +3,8 @@ import StarButton from "./starButton"
 
 type cityWeather = {
   name: string
+  lat: number
+  lon: number
   temperature?: number
   precipitation?: number
   nextDays?: { time: string; temperature?: number; precipitation?: number }[]
@@ -19,7 +21,7 @@ const listItem = ({ city: item }: { city: cityWeather }) => {
           alignItems: "center",
         }}
       >
-        <StarButton cityName={item.name} />
+        <StarButton city={item} />
         {item.name}:
         <span>
           {typeof item.precipitation === "number" && item.precipitation > 0.6

src/components/location-list.tsx

@@ -1,10 +1,11 @@
 import type { WeatherApiResponse, City } from "../hooks/fetchWeather/types"
 import { useGetWeatherForCities } from "../hooks/fetchWeather/useGetWeather"
 import ListItem from "./listItem"
+import { useAppStorage} from "../hooks/useStorage"
 
 const cities: City[] = [
-  { name: "Oslo", lat: 59.91273, lon: 10.74609 },
   { name: "Sørumsand", lat: 59.98621, lon: 11.24154 },
+  { name: "Oslo", lat: 59.91273, lon: 10.74609 },
   { name: "Trondheim", lat: 63.41667, lon: 10.41667 },
   { name: "Las Vegas", lat: 36.1699, lon: -115.1398 },
 ]
@@ -27,9 +28,8 @@ const getNextDays = (data?: WeatherApiResponse) => {
         date.getUTCHours() === 12 &&
         date <
           new Date(
-            now.getTime() -
-              now.getHours() * 60 * 60 * 1000 +
-              4 * 24 * 60 * 60 * 1000
+            now.getTime() +
+              3 * 24 * 60 * 60 * 1000
           )
       )
     })
@@ -47,14 +47,24 @@ interface LocationListProps {
 }
 
 const LocationList = ({ onCitySelect }: LocationListProps) => {
-  const { isLoading, results } = useGetWeatherForCities(cities)
+  const { storage } = useAppStorage()
+  if (storage.starredLocations.length > 0) {
+    for (const starredLocation of storage.starredLocations) {
+      if (!cities.some((city) => city.name === starredLocation.name)) {
+        cities.unshift(starredLocation)
+      }
+    }}
+
+    const { isLoading, results } = useGetWeatherForCities(cities)
 
   if (isLoading) {
-    return <div>Loading...</div>
+    return <div>Laster...</div>
   }
 
   const cityWeather = cities.map((city, index) => ({
     name: city.name,
+    lat: city.lat,
+    lon: city.lon,
     temperature: getTemperature(results[index]),
     precipitation: getPrecipitation(results[index]),
     nextDays: getNextDays(results[index]),

src/components/starButton.tsx

@@ -1,18 +1,21 @@
+import type { City } from "../hooks/fetchWeather/types"
 import { useAppStorage } from "../hooks/useStorage"
 
-const StarButton = ({ cityName }: { cityName: string }) => {
+const StarButton = ({ city }: { city: City }) => {
   const { storage, toggleStarredLocation } = useAppStorage()
 
+  const isStarred = storage.starredLocations.some((starredCity) => starredCity.name === city.name)
+
   const handleClick = () => {
-    toggleStarredLocation(cityName)
+    toggleStarredLocation(city)
   }
 
   return (
     <button onClick={handleClick}>
-      {storage.starredLocations.includes(cityName) ? (
-        <span style={{ color: "#ffee00" }}>⭐</span>
+      {isStarred ? (
+        <span>⭐</span>
       ) : (
-        <span style={{ color: "#000000" }}>☆</span>
+        <span style={{ color: "#000000", fontSize: "20px" }}>☆</span>
       )}
     </button>
   )

src/hooks/useStorage.ts

@@ -1,6 +1,7 @@
 import { useState, useCallback } from "react"
 import { getData, saveData } from "../services/storage"
 import type { AppStorage } from "../services/storage"
+import type { City } from "./fetchWeather/types"
 
 export function useAppStorage() {
   const [storage, setStorage] = useState<AppStorage>(getData)
@@ -21,12 +22,12 @@ export function useAppStorage() {
 
   // Star / unstar a location easily
   const toggleStarredLocation = useCallback(
-    (locationId: string) => {
+    (location: City) => {
       updateStorage((prev) => {
-        const exists = prev.starredLocations.includes(locationId)
+        const exists = prev.starredLocations.includes(location)
         const starredLocations = exists
-          ? prev.starredLocations.filter((id) => id !== locationId)
-          : [...prev.starredLocations, locationId]
+          ? prev.starredLocations.filter((id) => id !== location)
+          : [...prev.starredLocations, location]
 
         return { ...prev, starredLocations }
       })

src/index.css

@@ -96,6 +96,7 @@ ul {
 }
 
 button {
+  color: #000;
   border: none;
   background: transparent;
   cursor: pointer;

src/services/storage.ts

@@ -1,10 +1,12 @@
+import type { City } from "../hooks/fetchWeather/types"
+
 const STORAGE_KEY = "vær:storage_key"
 const STORAGE_VERSION = 1
 
 //Type for tilstand
 export interface AppStorage {
   version: number
-  starredLocations: string[]
+  starredLocations: City[]
   lastPage: string
 }