Open ai slice implemented

src/app/store.ts

@@ -1,11 +1,13 @@
 import { configureStore } from "@reduxjs/toolkit";
 import authReducer from "../features/authSlice";
 import bookReducer from "../features/bookSlice";
+import aiCredentialReducer from "../features/aiCredentialSlice";
 
 export const store = configureStore({
     reducer: {
         auth: authReducer,
         books: bookReducer,
+        aiCredential: aiCredentialReducer,
     },
     devTools: process.env.NODE_ENV !== "production",
 });

src/components/CredentilsFormForAi.tsx

@@ -1,18 +1,28 @@
 import { Button, Input } from "@nextui-org/react";
 import { useForm } from "react-hook-form";
+import { useAppDispatch } from "../app/hooks";
+import { addAiCredential } from "../features/aiCredentialSlice";
 
 interface ICredentialsForAi {
     openAiKey: string;
 }
-const CredentilsFormForAi = () => {
+interface IProps {
+    onClose: () => void;
+}
+const CredentilsFormForAi = ({ onClose }: IProps) => {
     const {
         register,
         handleSubmit,
         formState: { errors },
     } = useForm<ICredentialsForAi>();
 
+    const dispatch = useAppDispatch();
+
     const handleFormSubmit = handleSubmit((data) => {
         console.log("Credential Form Data", data);
+        const trimData = data.openAiKey.trim();
+        dispatch(addAiCredential(trimData));
+        onClose();
     });
 
     console.log(errors);

src/components/SearchByAi.tsx

@@ -13,7 +13,7 @@ const SearchByAi = () => {
     return (
         <div>
             <AppModal
-                modalBody={<CredentilsFormForAi />}
+                modalBody={<CredentilsFormForAi onClose={onClose} />}
                 title={"Integrate Your App With Ai"}
                 isOpen={isOpen}
                 onClose={onClose}

src/features/aiCredentialSlice.ts

@@ -0,0 +1,18 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const openAiKey: string | null = null;
+
+export const aiCredentialSlice = createSlice({
+    name: "aiCredential",
+    initialState: openAiKey,
+    reducers: {
+        addAiCredential: (_, action) => {
+            return action.payload;
+        },
+    },
+});
+
+// Action creators are generated for each case reducer function
+export const { addAiCredential } = aiCredentialSlice.actions;
+
+export default aiCredentialSlice.reducer;