Format place name and sort places list

components/time-block-add.tsx

@@ -5,24 +5,33 @@ const TimeBlockAdd = () => {
     const [isAddMode, setIsAddMode] = useState<boolean>(false)
     const allTimes = useMemo(() => getAllTimes(), [])
     const [selectedTimeZone, setSelectedTimeZone] = useState<string>(allTimes[0].timeZone)
+    const [error, setError] = useState<string>('')
 
     async function addClicked() {
         const tzParts = selectedTimeZone.split('/')
-        setIsAddMode(false)
-        await addTime({
+        const error = await addTime({
             timeZone: selectedTimeZone,
             place: tzParts[1]
         })
+
+        if (!error) {
+            setIsAddMode(false)
+        } else {
+            setError(error)
+        }
     }
 
     function timeZoneChanged(event: ChangeEvent<HTMLSelectElement>): void {
         setSelectedTimeZone(event.target.value)
     }
 
     return (
-        <div className="p-4 border-neutral border rounded flex flex-col justify-center items-center h-[88px]">
+        <div className="p-4 border rounded flex flex-col justify-center items-center h-[88px]">
             {!isAddMode &&
-                <div onClick={() => setIsAddMode(true)}><button type="button">+</button></div>
+                <div onClick={() => {
+                    setError('')
+                    setIsAddMode(true)
+                }}><button type="button">+</button></div>
             }
             {isAddMode &&
                 <>
@@ -32,12 +41,15 @@ const TimeBlockAdd = () => {
                         })}
                     </select>
                     <div className="flex gap-1 mt-1">
-                        <button className="border-neutral-100 rounded border p-1" type="button" onClick={() => {
+                        <button className="rounded border p-1" type="button" onClick={() => {
                             setSelectedTimeZone(allTimes[0].timeZone)
                             setIsAddMode(false)
                         }}>Cancel</button>
-                        <button className="border-neutral-100 rounded border p-1" type="button" onClick={addClicked}>Add</button>
+                        <button className="rounded border p-1" type="button" onClick={addClicked}>Add</button>
                     </div>
+                    {error != '' &&
+                        <div className="text-red-500">{error}</div>
+                    }
                 </>
             }
         </div>

components/time-block.tsx

@@ -1,4 +1,5 @@
 import { deleteTime } from "~db"
+import { formatPlace } from "~services/format"
 
 type Props = {
     place: string,
@@ -13,14 +14,13 @@ const TimeBlock = ({ place, dateTime, timeZone }: Props) => {
     const timePart = dateTimeParts[1].trimStart()
 
     async function deleteClicked(): Promise<void> {
-        debugger
         await deleteTime(place)
     }
 
     return (
         <div className="p-4 border-neutral border rounded flex flex-col justify-center items-center relative">
             <button className="absolute top-1 right-1 leading-[0]" type="button" onClick={deleteClicked}>-</button>
-            <div>{place}</div>
+            <div>{formatPlace(place)}</div>
             <div>{datePart}</div>
             <div>{timePart}</div>
         </div>

constants.ts

@@ -1 +1,3 @@
-export const TIMES_STORAGE_KEY = 'times-storage-key'
+export const TIMES_STORAGE_KEY = 'times-storage-key'
+export const ALREADY_ADDED_ERROR = 'Already added'
+export const NON_WORD_REGEX = /[^a-zA-Z]/g

db.ts

@@ -1,11 +1,12 @@
 import type { Time } from "~types"
 import { Storage } from "@plasmohq/storage"
-import { TIMES_STORAGE_KEY } from "~constants"
+import { ALREADY_ADDED_ERROR, TIMES_STORAGE_KEY } from "~constants"
+import { formatPlace } from "~services/format"
 
 const defaultTimes: Array<Time> = [
     { place: 'London', timeZone: 'Europe/London' },
     { place: 'Moscow', timeZone: 'Europe/Moscow' },
-    { place: 'New York', timeZone: 'America/New_York' },
+    { place: 'New_York', timeZone: 'America/New_York' },
     { place: 'Tokyo', timeZone: 'Asia/Tokyo' }
 ]
 
@@ -26,18 +27,33 @@ export const getAllTimes: () => Array<Time> = () => {
     const times: Array<Time> = timeZones.map((tz) => {
         const tzParts = tz.split('/')
         return {
-            place: tzParts[1],
+            place: formatPlace(tzParts[tzParts.length - 1]),
             timeZone: tz
         }
     })
+    times.sort((a, b) => {
+        if (a.place > b.place) {
+            return 1
+        } else if (a.place < b.place) {
+            return -1
+        } else {
+            return 0
+        }
+    })
 
     return times
 }
 
-export const addTime = async (time: Time) => {
+export const addTime = async (time: Time): Promise<string> => {
     const storage = new Storage()
 
     const times = await storage.get<Array<Time>>(TIMES_STORAGE_KEY)
+    if (times.some((t) => {
+        return t.place == time.place
+    })) {
+        return ALREADY_ADDED_ERROR
+    }
+
     times.push(time)
     await storage.set(TIMES_STORAGE_KEY, times)
 }

services/format.ts

@@ -0,0 +1,5 @@
+import { NON_WORD_REGEX } from "~constants"
+
+export const formatPlace = (place: string): string => {
+    return place.replaceAll(NON_WORD_REGEX, ' ')
+}