Merge pull request #59 from ric-v/main

added support for custom name

components/Main.tsx

@@ -88,7 +88,6 @@ const Main = ({ page }: mainProps) => {
               >
                 Change date format
               </button>
-
             </div>
           </div>
           <div className={layout === 'list' ? `grid grid-cols-1 lg:grid-cols-2 gap-2 p-3` : `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-5 p-2 md:p-5 w-full gap-3`}>
@@ -107,4 +106,3 @@ const Main = ({ page }: mainProps) => {
 };
 
 export default Main;
-

components/TimestampModal.tsx

@@ -46,7 +46,7 @@ function TimestampModal({ timezone, setSelected }: Props) {
   return (
     <ModalBase body={
       <>
-        <ModalTitle title={timezone.name} />
+        <ModalTitle title={timezone.customname ? timezone.customname : timezone.name} />
 
         {/* table with timezone details */}
         <table className="table-responsive w-full mt-5">

components/modal/ModalTitle.tsx

@@ -2,18 +2,15 @@ import React from 'react'
 
 type Props = {
   title: string
-  _editable?: boolean
   _classes?: string
 }
 
-const ModalTitle = ({ title, _editable, _classes }: Props) => {
+const ModalTitle = ({ title, _classes }: Props) => {
   return (
-    <input
-      type="text"
-      value={`📌 ${title}`}
+    <p
       className={`text-2xl font-nova-flat leading-6 font-semibold text-teal-500 mb-2 
         appearance-none bg-transparent focus:border-0 text-center ${_classes}`}
-    />
+    >📌 {title}</p>
   )
 }
 

components/ui-elements/Card.tsx

@@ -1,5 +1,8 @@
-import { useEffect, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 import { RiCloseFill } from 'react-icons/ri';
+import { FiEdit } from 'react-icons/fi';
+import { VscClose } from 'react-icons/vsc';
+import { CgUndo } from 'react-icons/cg';
 
 import { getCurrentTime, getParsedTime, Timezones } from '../../pages/api/functions/timeNow';
 import { store } from '../../store/store';
@@ -26,6 +29,20 @@ const Card = ({ tzData, page }: Props) => {
       : getParsedTime(tzData.name)
   );
   const [selected, setSelected] = useState<Timezones | null>(null);
+  const [customName, setCustomName] = useState(tzData.customname ? tzData.customname : tzData.name);
+  const [editable, setEditable] = useState(false);
+
+  // handle card title change
+  const handleCardTitleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setCustomName(e.target.value);
+    const updatedTz = { ...tzData, customname: e.target.value };
+
+    // update store
+    // sleep for 0.1s to allow for input to be updated
+    setTimeout(() => {
+      store.dispatch({ type: "timezone/update", payload: { timezone: updatedTz, dateFormat: '' } });
+    }, 500);
+  }
 
   // set interval to update time
   useEffect(() => {
@@ -42,14 +59,56 @@ const Card = ({ tzData, page }: Props) => {
         border border-slate-600 border-dashed shadow-[0px_50px_30px_-15px_rgba(0,0,0,0.33)] rounded-lg p-4'
       key={tzData.name}>
       <div>
-        <div className="flex flex-row justify-between text-sm font-medium">
+        <div className="flex flex-row justify-start text-sm font-medium">
           <h3
             className="text-lg leading-6 font-medium truncate text-teal-600 cursor-pointer"
             id="modal-title"
-            onClick={() => { setSelected(tzData) }}
+            onClick={() => {
+              if (!editable) {
+                setSelected(tzData)
+              }
+            }}
           >
-            {tzData.customname === undefined ? `${tzData.city} - ${tzData.country}` : tzData.customname}
+            <input
+              type="text"
+              name="card-name"
+              id="card-name"
+              disabled={!editable}
+              className={`appearance-none bg-transparent p-1 rounded-lg ${editable ? 'border-b border-teal-600 border-dashed' : 'cursor-pointer'}
+                focus:outline-none transition ease-in-out duration-1000`}
+              value={customName}
+              onChange={(e) => { handleCardTitleChange(e) }}
+              onBlur={() => { setEditable(false) }}
+            />
           </h3>
+          {
+            editable ? (
+              <VscClose
+                size={22}
+                className='text-gray-600 cursor-pointer'
+                onClick={() => { setEditable(false) }}
+              />
+            ) : (
+              <FiEdit
+                size={18}
+                className='text-gray-600 cursor-pointer'
+                onClick={() => { setEditable(true) }}
+              />
+            )
+          }
+          {
+            !editable && tzData.customname && (
+              <CgUndo
+                size={18}
+                className='text-gray-600 cursor-pointer ml-2'
+                onClick={() => {
+                  setCustomName(tzData.name);
+                  const updatedTz = { ...tzData, customname: null };
+                  store.dispatch({ type: "timezone/update", payload: { timezone: updatedTz, dateFormat: '' } });
+                }}
+              />
+            )
+          }
         </div>
 
         <div className="mt-3 text-gray-200 text-lg truncate font-semibold leading-tight cursor-pointer"

store/store.tsx

@@ -46,6 +46,26 @@ const addTimezoneFunc = (state: storeData, action: { payload: actionData; type:
   }
 };
 
+const updateTimezone = createAction<actionData>("timezone/update");
+/**
+ * @description - updates timezone name in the store and update the state & local storage
+ * 
+ * @param state - current state
+ * @param action - action to be performed
+ * @returns new state
+ */
+const updateTimezoneFunc = (state: storeData, action: { payload: actionData; type: string; }) => {
+  const tz = action.payload.timezone;
+  if (state.timezones.find((tzData) => tzData.city === tz.city && tzData.country === tz.country)) {
+    // add this timezone to local storage
+    localStorage.setItem(
+      "timezones",
+      JSON.stringify(state.timezones.map((tzData) => ((tzData.city === tz.city && tzData.country === tz.country)) ? tz : tzData)),
+    );
+    return { ...state, timezones: state.timezones.map((tzData) => ((tzData.city === tz.city && tzData.country === tz.country)) ? tz : tzData) };
+  }
+};
+
 const removeTimezone = createAction<actionData>("timezone/remove");
 /**
  * @description - remove timezone from the store and update the state & local storage
@@ -100,6 +120,7 @@ const reducers = createReducer(initState, (builder) => {
   // adding new timezone card to dashboard
   builder.addCase(addTimezone, addTimezoneFunc);
   builder.addCase(removeTimezone, removeTimezoneFunc);
+  builder.addCase(updateTimezone, updateTimezoneFunc);
   builder.addCase(setDateFormat, dateFormatSetFunc);
   builder.addCase(setPickedtime, pickedDateFunc);
 });