feat: edit child

package.json

@@ -13,7 +13,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-google-charts": "^4.0.1",
-    "react-router-dom": "^6.20.1"
+    "react-router-dom": "^6.20.1",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",

src/components/Calendar.tsx

@@ -8,6 +8,7 @@ import {
 } from "../utils/DateUtilities";
 import Button from "./Button";
 import DateButton from "./DateButton";
+import { DateCell, MyAllocatedDate, MyDate } from "../types/types";
 
 const Months = [
   "Januari",

src/components/Card.tsx

@@ -1,13 +1,17 @@
 import { PropsWithChildren } from "react";
 
+type CardWidth = "full" | "max";
+
 export type Props = PropsWithChildren & {
-  width?: string;
+  width?: CardWidth;
   title?: string;
 };
 
-export default function Card({ children, width = "w-max", title }: Props & {}) {
+export default function Card({ children, width = "max", title }: Props & {}) {
   return (
-    <div className={`border-transparent shadow-sm shadow-black py-3 px-2 ${width} rounded-sm bg-white`}>
+    <div
+      className={`border-transparent shadow-sm shadow-black py-3 px-2 ${width} rounded-sm bg-white`}
+    >
       {title && <h1 className="px-2 py-2 text-xl font-bold">{title}</h1>}
       {children}
     </div>

src/components/DateButton.tsx

@@ -1,3 +1,5 @@
+import { Leave, MyDate } from "../types/types";
+
 function getAllocationBarWidthStyle(allocation?: number) {
   if (!allocation || allocation < 0.25) {
     return "w-0";

src/components/Modal.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren } from "react";
 
 export default function Modal({ children }: PropsWithChildren) {
   return (
-    <div className="m-0 w-screen h-screen fixed top-0 left-0 bg-black bg-opacity-50 z-30">
+    <div className="m-0 w-full h-full fixed top-0 left-0 bg-black bg-opacity-50 z-30">
       <div className="m-2 flex justify-center items-center h-full">{children}</div>
     </div>
   );

src/components/NavBar.tsx

@@ -39,7 +39,7 @@ export default function NavBar() {
   return (
     <>
       <div className="flex flex-col justify-start sticky top-0 z-20">
-        <div className="flex justify-between items-center text-lg bg-green-700 text-white font-mono w-screen min-w-fit h-12">
+        <div className="flex justify-between items-center text-lg bg-green-700 text-white font-mono w-full min-w-fit h-12">
           <button onClick={() => toggleMenu()}>
             <div className="flex flex-col space-y-1 py-3 px-4">
               {!menuOpen && line}
@@ -72,7 +72,7 @@ export default function NavBar() {
         </div>
       </div>
       {menuOpen && (
-        <div className="sticky top-12 flex flex-row w-screen h-0 z-20">
+        <div className="sticky top-12 flex flex-row w-full h-0 z-20">
           <nav className="left-0 bg-green-700 pt-2 px-2 h-screen text-white w-max flex flex-col z-20">
             {getMenuItem("Familj", "/family")}
             {getMenuItem("Kalender", "/calendar")}
@@ -82,7 +82,7 @@ export default function NavBar() {
       )}
       {menuOpen && (
         <div
-          className="fixed top-0 w-screen h-screen bg-black bg-opacity-50 block z-10"
+          className="fixed top-0 w-full h-full bg-black bg-opacity-50 block z-10"
           onClick={() => setMenuOpen(false)}
         />
       )}

src/components/SelectedDatesList.tsx

@@ -1,3 +1,4 @@
+import { MyDate } from "../types/types";
 import { convertToDate, toggleDateInArray } from "../utils/DateUtilities";
 
 export type Props = {

src/context/ChildContext.tsx

@@ -6,6 +6,8 @@ import {
   useState,
 } from "react";
 import { useSearchParams } from "react-router-dom";
+import { Child } from "../types/Child";
+import { MyDate } from "../types/types";
 
 export const CHILDREN: Child[] = [
   {
@@ -35,6 +37,10 @@ const ChildDeleteContext = createContext((id: string) =>
   alert(`No delete handler in place, but you entered ${id}`)
 );
 
+const ChildEditContext = createContext((child: Child) =>
+  alert(`No delete handler in place, but you entered ${JSON.stringify(child)}`)
+);
+
 export function useChild() {
   return useContext(ChildContext);
 }
@@ -51,6 +57,10 @@ export function useChildAdd() {
   return useContext(ChildAddContext);
 }
 
+export function useChildEdit() {
+  return useContext(ChildEditContext);
+}
+
 export function useChildDelete() {
   return useContext(ChildDeleteContext);
 }
@@ -82,7 +92,6 @@ export default function ChildProvider({
     }
   }, [children]);
 
-
   const handleSetChild = (id: string) => {
     setChild(children.find((p) => p.id === id) || children[0]);
     localStorage.setItem("child", id);
@@ -97,6 +106,14 @@ export default function ChildProvider({
     localStorage.setItem("children", JSON.stringify(updatedChildren));
   };
 
+  const handleEditChild = (editedChild: Child) => {
+    const index = children.findIndex((c) => c.id === editedChild.id);
+    let updatedChildren = [...children];
+    updatedChildren.splice(index, 1, editedChild);
+    setChildren(updatedChildren);
+    localStorage.setItem("children", JSON.stringify(updatedChildren));
+  };
+
   const handleDeleteChild = (id: string) => {
     const index = children.findIndex((c) => c.id === id);
     const updatedChildren = [...children];
@@ -106,16 +123,18 @@ export default function ChildProvider({
   };
 
   return (
-    <ChildContext.Provider value={child}>
-      <ChildUpdateContext.Provider value={handleSetChild}>
+    <ChildrenContext.Provider value={children}>
+      <ChildContext.Provider value={child}>
         <ChildAddContext.Provider value={handleAddChild}>
-          <ChildDeleteContext.Provider value={handleDeleteChild}>
-            <ChildrenContext.Provider value={children}>
-              {reactChildren}
-            </ChildrenContext.Provider>
-          </ChildDeleteContext.Provider>
+          <ChildEditContext.Provider value={handleEditChild}>
+            <ChildUpdateContext.Provider value={handleSetChild}>
+              <ChildDeleteContext.Provider value={handleDeleteChild}>
+                {reactChildren}
+              </ChildDeleteContext.Provider>
+            </ChildUpdateContext.Provider>
+          </ChildEditContext.Provider>
         </ChildAddContext.Provider>
-      </ChildUpdateContext.Provider>
-    </ChildContext.Provider>
+      </ChildContext.Provider>
+    </ChildrenContext.Provider>
   );
 }

src/hooks/useAllocatedDates.ts

@@ -4,6 +4,7 @@ import {
   getAllAllocatedDatesFromLocalStorage,
   setAllocatedDatesLocalStorage,
 } from "../utils/LocalStorage";
+import { MyAllocatedDate, MyDate } from "../types/types";
 
 export function useAllAllocatedDates() {
   const [allAllocatedDates, setAllocatedDates] = useState<MyAllocatedDate[]>(

src/pages/CalendarPage.tsx

@@ -10,6 +10,7 @@ import { useChild, useChildUpdate, useChildren } from "../context/ChildContext";
 import { useParent } from "../context/ParentContext";
 import { useAllAllocatedDates } from "../hooks/useAllocatedDates";
 import { convertToDate } from "../utils/DateUtilities";
+import { MyDate } from "../types/types";
 
 const leaveOptions: Option[] = [
   { label: "100%", value: 1 },
@@ -158,15 +159,15 @@ function CalendarPage() {
       <div className="flex justify-center m-4">
         <div className="flex flex-col gap-4">
           {(children.length === 0 || !parent) && (
-            <Card width="w-full">
+            <Card width="full">
               Både barn och föräldrar krävs för kalendern. Konfigurera på{" "}
               <Link to="/family" className="font-bold text-blue-700">
                 familjsidan.
               </Link>
             </Card>
           )}
           {child && (
-            <Card width="w-full">
+            <Card width="full">
               <select
                 onChange={(e) => setChildId(e.target.value)}
                 className="rounded-md p-2 pr-4 w-full"
@@ -191,7 +192,7 @@ function CalendarPage() {
             </Card>
           )}
           {child && (
-            <Card width="w-full">
+            <Card width="full">
               <Calendar
                 selectedDates={selectedDates}
                 setSelectedDates={updateSelectedDates}
@@ -212,7 +213,7 @@ function CalendarPage() {
                   </Link>
                 </Card>
               ) : (
-                <Card width="w-full">
+                <Card width="full">
                   <div className="flex flex-col gap-3">
                     <div className="flex justify-end">
                       <Button variant="delete" onClick={clearSelectedDates}>