refactored farmContext

cubeseed_login/src/context/context.tsx

@@ -1,84 +1,123 @@
-import React, { useState, createContext } from "react";
-export const Context = React.createContext<props>({
-  text: "",
-  inputValue: { date: "", time: "" },
-  congrate: false,
-  open: false,
-  show: false,
-  setText: (value: string) => {},
-  handleChangeInputValues: () => {},
-  setOpen: () => {},
-  handleCloseModal: () => {},
+import React, {
+  useState,
+  createContext,
+  ChangeEvent,
+  Dispatch,
+  SetStateAction,
+  useContext,
+} from "react";
 
-  handleShowModal: () => {},
-  handleCongrateMeaasge: () => {},
-});
-type props = {
+type InputValue = {
+  time: string;
+  date: string;
+};
+
+type FarmContextType = {
   text: string;
-  inputValue: {
-    time: string;
-    date: string;
-  };
+  inputValue: InputValue;
   congrate: boolean;
   open: boolean;
   show: boolean;
   setText: (value: string) => void;
-  handleChangeInputValues: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  handleChangeInputValues: (event: ChangeEvent<HTMLInputElement>) => void;
+  setOpen: Dispatch<SetStateAction<boolean>>;
   handleCloseModal: () => void;
-  handleCongrateMeaasge: () => void;
-
+  handleCongrateMessage: () => void;
   handleShowModal: () => void;
 };
-type contextProps = {
-  children: React.ReactElement;
+
+// Create the context with default values, throws error if used outside of provider
+export const FarmContext = createContext<FarmContextType>({
+  text: "",
+  inputValue: { date: "", time: "" },
+  congrate: false,
+  open: false,
+  show: false,
+  setText: () => {
+    throw new Error("setText function called outside of FarmContextProvider");
+  },
+  handleChangeInputValues: () => {
+    throw new Error(
+      "handleChangeInputValues function called outside of FarmContextProvider"
+    );
+  },
+  setOpen: () => {
+    throw new Error("setOpen function called outside of FarmContextProvider");
+  },
+  handleCloseModal: () => {
+    throw new Error(
+      "handleCloseModal function called outside of FarmContextProvider"
+    );
+  },
+  handleCongrateMessage: () => {
+    throw new Error(
+      "handleCongrateMessage function called outside of FarmContextProvider"
+    );
+  },
+  handleShowModal: () => {
+    throw new Error(
+      "handleShowModal function called outside of FarmContextProvider"
+    );
+  },
+});
+
+type FarmContextProviderProps = {
+  children: React.ReactNode;
 };
 
-export const FarmContexProvider = ({ children }: contextProps) => {
-  const [inputValue, setInPutValue] = React.useState({
+// provider component
+export const FarmContextProvider: React.FC<FarmContextProviderProps> = ({
+  children,
+}) => {
+  const [inputValue, setInputValue] = useState<InputValue>({
     time: "",
     date: "",
   });
+  const [text, setText] = useState<string>("");
+  const [open, setOpen] = useState<boolean>(false);
+  const [show, setShow] = useState<boolean>(false);
+  const [congrate, setCongrate] = useState<boolean>(false);
 
-  const [text, setText] = React.useState<string>("");
-  const [open, setOpen] = useState(false);
-  const [show, setShow] = React.useState(false);
-  const [congrate, setCongrate] = React.useState(false);
-
-  const handleChangeInputValues = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    const value = event.target.value;
-    setInPutValue({
-      ...inputValue,
-      [event.target.name]: value,
-    });
+  const handleChangeInputValues = (event: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    setInputValue((prevState) => ({ ...prevState, [name]: value }));
   };
-  const handleCongrateMeaasge = () => {
+
+  const handleCongrateMessage = () => {
     setCongrate(true);
   };
 
   const handleShowModal = () => {
     setShow(true);
     setOpen(true);
   };
+
   const handleCloseModal = () => {
     setShow(false);
   };
 
-  const contexProvider: props = {
-    text,
-    setText,
-    congrate,
-    open,
-    show,
-    setOpen,
-    inputValue,
+  return (
+    <FarmContext.Provider
+      value={{
+        text,
+        setText,
+        congrate,
+        open,
+        show,
+        setOpen,
+        inputValue,
+        handleShowModal,
+        handleCloseModal,
+        handleChangeInputValues,
+        handleCongrateMessage,
+      }}
+    >
+      {children}
+    </FarmContext.Provider>
+  );
+};
 
-    handleShowModal,
-    handleCloseModal,
-    handleChangeInputValues,
-    handleCongrateMeaasge,
-  };
-  return <Context.Provider value={contexProvider}>{children}</Context.Provider>;
+// Custom hook
+export const useFarmContext = () => {
+  return useContext(FarmContext);
 };