Merge pull request #418 from marchhq/dazai/mar-238-show-add-an-item-i…

…n-todo-section-in-empty-week dazai/mar 238 show add an item in todo section in empty week
marchhq · Oct 29, 2024 · 7c19774 · 7c19774
2 parents 7d9cce1 + c212e9e
commit 7c19774
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 18 deletions.
diff --git a/apps/frontend/src/components/ThisWeek/CustomKanban.tsx b/apps/frontend/src/components/ThisWeek/CustomKanban.tsx
@@ -143,6 +143,8 @@ const Column = ({ title, items, column, onDragEnd, icon }) => {
     setActive(false)
   }
 
+  const totalItems = items?.length || 0
+
   return (
     <div className="group/section flex size-full flex-1 flex-col gap-4 rounded-lg">
       <div className="flex items-center gap-2 text-xl text-foreground">
@@ -164,7 +166,11 @@ const Column = ({ title, items, column, onDragEnd, icon }) => {
           />
         ))}
         <DropIndicator beforeId={null} column={column} />
-        <AddCard column={column} createItem={createItem} />
+        <AddCard
+          column={column}
+          createItem={createItem}
+          totalItems={totalItems}
+        />
       </div>
     </div>
   )
@@ -216,7 +222,7 @@ interface AddCardProps {
   createItem: (session: string, data: Partial<CycleItem>) => void
 }
 
-const AddCard: React.FC<AddCardProps> = ({ column, createItem }) => {
+const AddCard = ({ column, createItem, totalItems = 0 }) => {
   const [text, setText] = useState("")
   const [adding, setAdding] = useState(false)
   const { session } = useAuth()
@@ -258,19 +264,6 @@ const AddCard: React.FC<AddCardProps> = ({ column, createItem }) => {
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      /*
-      if (
-        adding &&
-        addItemRef.current &&
-        !addItemRef.current.contains(event.target as Node)
-      ) {
-        if (text.trim().length) {
-          handleSubmit()
-        } else {
-          handleCancel()
-      }
-      */
-
       if (
         adding &&
         addItemRef.current &&
@@ -279,7 +272,6 @@ const AddCard: React.FC<AddCardProps> = ({ column, createItem }) => {
         handleCancel()
       }
     }
-
     document.addEventListener("mousedown", handleClickOutside)
     return () => {
       document.removeEventListener("mousedown", handleClickOutside)
@@ -297,6 +289,14 @@ const AddCard: React.FC<AddCardProps> = ({ column, createItem }) => {
     }
   }
 
+  // Determine visibility class based on column and total items
+  const getVisibilityClass = () => {
+    if (column === "todo" && totalItems === 0) {
+      return "visible" // Always visible for todo column when no items
+    }
+    return "invisible group-hover/section:visible" // Default hover behavior
+  }
+
   return (
     <div ref={addItemRef} className="">
       {adding ? (
@@ -308,7 +308,7 @@ const AddCard: React.FC<AddCardProps> = ({ column, createItem }) => {
               setText(e.target.value)
             }
             onKeyDown={handleKeyDown}
-            // eslint-disable-next-line jsx-a11y/no-autofocus
+            /* eslint-disable-next-line jsx-a11y/no-autofocus */
             autoFocus
             placeholder="title"
             className="w-full resize-none overflow-hidden truncate whitespace-pre-wrap break-words bg-transparent p-4 text-sm font-bold text-foreground outline-none placeholder:text-secondary-foreground focus:outline-none"
@@ -320,7 +320,7 @@ const AddCard: React.FC<AddCardProps> = ({ column, createItem }) => {
         <motion.button
           layout
           onClick={() => setAdding(true)}
-          className="hover-bg invisible flex w-full items-center gap-2 rounded-lg p-4 text-sm group-hover/section:visible"
+          className={`hover-bg flex w-full items-center gap-2 rounded-lg p-4 text-sm ${getVisibilityClass()}`}
         >
           <Icon icon="ic:round-plus" className="text-[18px]" />
           <p>New item</p>

diff --git a/apps/frontend/src/lib/store/cycle.store.ts b/apps/frontend/src/lib/store/cycle.store.ts
@@ -281,6 +281,7 @@ export const useCycleItemStore = create<ExtendedCycleItemStore>((set, get) => ({
   createItem: async (session: string, item: Partial<CycleItem>) => {
     set((state) => ({
       inbox: { ...state.inbox, isLoading: true, error: null },
+      thisWeek: { ...state.thisWeek, isLoading: true, error: null },
       isLoading: true,
       error: null,
     }))
@@ -308,6 +309,11 @@ export const useCycleItemStore = create<ExtendedCycleItemStore>((set, get) => ({
           isLoading: false,
           error: null,
         },
+        thisWeek: {
+          items: [data.response, ...state.thisWeek.items],
+          isLoading: false,
+          error: null,
+        },
         items: [data.response, ...state.items],
         isLoading: false,
       }))
@@ -324,6 +330,11 @@ export const useCycleItemStore = create<ExtendedCycleItemStore>((set, get) => ({
           error: errorMessage,
           isLoading: false,
         },
+        thisWeek: {
+          ...state.thisWeek,
+          error: errorMessage,
+          isLoading: false,
+        },
         error: errorMessage,
         isLoading: false,
       }))