Add datepicker for editing dates

RobinsonZ · Nov 14, 2023 · 41e7568 · 41e7568
1 parent df20390
commit 41e7568
Show file tree

Hide file tree

Showing 5 changed files with 281 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "path-browserify": "^1.0.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-contenteditable": "^3.3.7",
+    "react-date-picker": "^10.5.2",
     "react-use": "^17.4.0",
     "uuid": "^9.0.1"
   },

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
@@ -101,7 +101,7 @@ function App(): JSX.Element {
         {
           type: "day",
           id: uuidv4(),
-          day: "sept 19",
+          day: "sept 19 2023",
         },
         {
           type: "file",
@@ -148,12 +148,14 @@ function App(): JSX.Element {
               >
                 New Column
               </button>
-              {showDev && <button
-                className="bg-blue-200 inline mx-2 p-1 rounded text-xl"
-                onClick={() => setData(fakeCardData())}
-              >
-                reset cards
-              </button>}
+              {showDev && (
+                <button
+                  className="bg-blue-200 inline mx-2 p-1 rounded text-xl"
+                  onClick={() => setData(fakeCardData())}
+                >
+                  reset cards
+                </button>
+              )}
             </h1>
           </div>
         </header>
@@ -229,23 +231,54 @@ function App(): JSX.Element {
 
                           return {
                             ...col,
-                            cards: col.cards.map((card) => {
-                              if (card.id !== id) {
-                                return card;
-                              }
+                            cards: col.cards.reduce(
+                              (filtered, card) => {
+                                if (card.id !== id) {
+                                  filtered.push(card);
+                                  return filtered;
+                                }
 
-                              if (card.type === "day") {
-                                return {
-                                  ...card,
-                                  day: newName,
-                                };
-                              } else {
-                                return {
-                                  ...card,
-                                  fileName: newName,
-                                };
-                              }
-                            }),
+                                if (newName == "") {
+                                  return filtered;
+                                }
+
+                                if (card.type === "day") {
+                                  filtered.push({
+                                    ...card,
+                                    day: newName,
+                                  });
+                                } else {
+                                  filtered.push({
+                                    ...card,
+                                    fileName: newName,
+                                  });
+                                }
+                                return filtered;
+                              },
+                              [] as (SlateFile | SlateDayHeader)[]
+                            ),
+                          };
+                        }),
+                      }))
+                    }
+                    addNewDate={() =>
+                      setData((old) => ({
+                        ...old,
+                        columns: old.columns.map((col) => {
+                          if (col.id !== colData.id) {
+                            return col;
+                          }
+
+                          return {
+                            ...col,
+                            cards: [
+                              ...col.cards,
+                              {
+                                type: "day",
+                                id: uuidv4(),
+                                day: new Date().toString(),
+                              },
+                            ],
                           };
                         }),
                       }))