Load question data and submit answers

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.15",
     "@headlessui/tailwindcss": "^0.1.3",
+    "@reduxjs/toolkit": "^1.9.5",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/App.js

@@ -1,13 +1,17 @@
-import QuestionnaireModal from './components/QuestionnaireModal'
+import QuestionnaireModal from "./components/QuestionnaireModal";
+import { Provider } from "react-redux";
+import store from "./lib/store";
 
-localStorage.setItem('user', 'example@gmail.com') // Set user here
+localStorage.setItem("user", "mkt@narola.email"); // Set user here
 
 function App() {
-  return (
-    <div className="App">
-      <QuestionnaireModal />
-    </div>
-  );
+    return (
+        <Provider store={store}>
+            <div className="App">
+                <QuestionnaireModal />
+            </div>
+        </Provider>
+    );
 }
 
 export default App;

src/components/questionnaire.js

@@ -8,7 +8,7 @@ import { ReactComponent as MyBusinessIcon } from '../assets/questionnaire/3-busi
 import { ReactComponent as ClientIcon } from '../assets/questionnaire/3-client.svg';
 import { ReactComponent as CuriousIcon } from '../assets/questionnaire/3-curious.svg';
 
-export const QuestionnairePages = [
+export const questionnairePages = [
   {
     title: 'What role describes you best?',
     key: 'occupation',

src/index.js

@@ -1,15 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<App />);
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

src/lib/axiosInterceptor.js

@@ -0,0 +1,28 @@
+import axios from "axios";
+
+const Axios = axios.create({
+    // baseURL: process.env.REACT_APP_SERVER_URL,
+    baseURL: "https://qstnr.intvw.logodiffusion.com/api/",
+});
+
+const requestHandler = (config) => {
+    return Promise.resolve(config);
+};
+
+//request interceptor
+Axios.interceptors.request.use(
+    (config) => requestHandler(config),
+    (error) => Promise.reject(error)
+);
+
+const errorHandler = async (error) => {
+    return Promise.reject(error);
+};
+
+//response interceptor
+Axios.interceptors.response.use(
+    (response) => Promise.resolve(response),
+    (error) => errorHandler(error)
+);
+
+export default Axios;

src/lib/store.js

@@ -1 +1,9 @@
-// Setup redux store here
+import { configureStore } from "@reduxjs/toolkit";
+import userReducer from "./userSlice";
+
+export default configureStore({
+    reducer: {
+        users: userReducer,
+    },
+    devTools: true,
+});

src/lib/useEffectOnce.js

@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from "react";
+
+export const useEffectOnce = (effect) => {
+    const destroyFunc = useRef();
+    const effectCalled = useRef(false);
+    const renderAfterCalled = useRef(false);
+    const [val, setVal] = useState(0);
+
+    if (effectCalled.current) {
+        renderAfterCalled.current = true;
+    }
+
+    useEffect(() => {
+        // only execute the effect first time around
+        if (!effectCalled.current) {
+            destroyFunc.current = effect();
+            effectCalled.current = true;
+        }
+
+        // this forces one render after the effect is run
+        setVal((val) => val + 1);
+
+        return () => {
+            // if the comp didn't render since the useEffect was called,
+            // we know it's the dummy React cycle
+            if (!renderAfterCalled.current) {
+                return;
+            }
+            if (destroyFunc.current) {
+                destroyFunc.current();
+            }
+        };
+    }, []);
+};

src/lib/userSlice.js

@@ -1 +1,58 @@
-// Setup user slice here
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import services from "../services/questuinaiire";
+const initialState = {
+    isModalOpen: false,
+    submitted: false,
+};
+
+export const submitAnswers = createAsyncThunk("services/create", async (data) => {
+    const res = await services.create(data);
+    console.log("res.status => ", res.status);
+    if (res.status === 201) {
+        localStorage.setItem("noShow", "noshow");
+        localStorage.setItem("id", res.data.id);
+        console.log("res => ", res);
+        return res.data;
+    }
+});
+export const getAnswers = createAsyncThunk("services/get", async (data) => {
+    const res = await services.get(data);
+    console.log("res.data => ", res.data);
+    if (res.status === 201) {
+        return res.data;
+    }
+});
+
+export const userSlice = createSlice({
+    name: "users",
+    initialState,
+    reducers: {
+        handleModal: (state, action) => {
+            console.log("action => ", action);
+            return { ...state, isModalOpen: action.payload };
+        },
+    },
+    extraReducers: {
+        [submitAnswers.fulfilled]: (state, action) => {
+            alert("submitted");
+            return { ...state, submitted: true, isModalOpen: false };
+        },
+        [submitAnswers.rejected]: (state, action) => {
+            alert("error");
+            return { ...state, submitted: true, isModalOpen: true };
+        },
+        [getAnswers.fulfilled]: (state, action) => {
+            alert("User has already submitted answers.");
+            return { ...state, submitted: true, isModalOpen: false };
+        },
+        [getAnswers.rejected]: (state, action) => {
+            alert("error");
+            return { ...state, submitted: true, isModalOpen: true };
+        },
+    },
+});
+
+export const { handleModal } = userSlice.actions;
+
+// this is for configureStore
+export default userSlice.reducer;

src/services/questuinaiire.js

@@ -0,0 +1,12 @@
+import Axios from "../lib/axiosInterceptor";
+
+class TutorialDataService {
+    create(data) {
+        return Axios.post("/questionnaire/", data);
+    }
+    get(id) {
+        return Axios.get(`/questionnaire/${id}/`);
+    }
+}
+
+export default new TutorialDataService();