From a057576fcd06dd863e249ab232576953b713c74a Mon Sep 17 00:00:00 2001
From: Lateefah Abdulkareem <lateefahabdulkareem@Lateefahs-MacBook-Pro.local>
Date: Mon, 16 Jan 2023 11:16:45 -0500
Subject: [PATCH] implement authentication with google, save, retrieve and
 display code from firestore

---
 .gitignore                                    |   2 +
 package.json                                  |   4 +
 src/App.css                                   |   4 +
 src/components/CodeEditorWindow.js            |   2 +-
 src/components/CustomInput.js                 |   7 +-
 src/components/Landing.js                     | 139 ++++++++++++++----
 src/components/LanguagesDropdown.js           |   8 +-
 .../authentication/AuthenticationView.js      |  21 +++
 src/components/authentication/UserNav.js      |  22 +++
 src/components/authentication/firebase.js     |  20 +++
 src/components/submissions/index.tsx          |  33 +++++
 src/components/submissions/submissionList.tsx |  43 ++++++
 src/contexts/AuthContext.js                   |  29 ++++
 src/hooks/useGetUserSubmissions.tsx           |  35 +++++
 src/hooks/useGoogleAuth.js                    |  48 ++++++
 src/hooks/useSaveSubmission.tsx               |  26 ++++
 src/index.js                                  |   6 +-
 src/lib/localInterfaces.tsx                   |   3 +
 src/reducers/authReducer.js                   |  14 ++
 tsconfig.json                                 |  26 ++++
 20 files changed, 458 insertions(+), 34 deletions(-)
 create mode 100644 src/components/authentication/AuthenticationView.js
 create mode 100644 src/components/authentication/UserNav.js
 create mode 100644 src/components/authentication/firebase.js
 create mode 100644 src/components/submissions/index.tsx
 create mode 100644 src/components/submissions/submissionList.tsx
 create mode 100644 src/contexts/AuthContext.js
 create mode 100644 src/hooks/useGetUserSubmissions.tsx
 create mode 100644 src/hooks/useGoogleAuth.js
 create mode 100644 src/hooks/useSaveSubmission.tsx
 create mode 100644 src/lib/localInterfaces.tsx
 create mode 100644 src/reducers/authReducer.js
 create mode 100644 tsconfig.json

diff --git a/.gitignore b/.gitignore
index 4edfdee..32aea07 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,3 +27,5 @@ yarn-error.log*
 .env
 .env.build
 .vercel
+
+firebaseConfig.js
diff --git a/package.json b/package.json
index ae6b3fa..6177bee 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,13 @@
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
     "axios": "^0.27.2",
+    "bootstrap": "^5.2.3",
+    "firebase": "^9.15.0",
     "monaco-themes": "^0.4.1",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.7.0",
     "react-dom": "^17.0.2",
+    "react-google-button": "^0.7.2",
     "react-scripts": "5.0.0",
     "react-select": "^5.3.1",
     "react-toastify": "^9.0.1",
diff --git a/src/App.css b/src/App.css
index 74b5e05..9d1dc96 100644
--- a/src/App.css
+++ b/src/App.css
@@ -36,3 +36,7 @@
     transform: rotate(360deg);
   }
 }
+
+.authDiv {
+  margin-right: 40px;
+}
\ No newline at end of file
diff --git a/src/components/CodeEditorWindow.js b/src/components/CodeEditorWindow.js
index e8286d8..ccbf2fa 100644
--- a/src/components/CodeEditorWindow.js
+++ b/src/components/CodeEditorWindow.js
@@ -13,7 +13,7 @@ const CodeEditorWindow = ({ onChange, language, code, theme }) => {
   return (
     <div className="overlay rounded-md overflow-hidden w-full h-full shadow-4xl">
       <Editor
-        height="85vh"
+        height="55vh"
         width={`100%`}
         language={language || "javascript"}
         value={value}
diff --git a/src/components/CustomInput.js b/src/components/CustomInput.js
index b41dce0..d7d3fb8 100644
--- a/src/components/CustomInput.js
+++ b/src/components/CustomInput.js
@@ -4,9 +4,12 @@ import { classnames } from "../utils/general";
 const CustomInput = ({ customInput, setCustomInput }) => {
   return (
     <>
-      {" "}
+      {/* {" "} */}
+      <h1 className="font-bold text-xl bg-clip-text text-transparent bg-gradient-to-r from-slate-900 to-slate-700 mb-2">
+        Custom Input
+      </h1>
       <textarea
-        rows="5"
+        rows="8"
         value={customInput}
         onChange={(e) => setCustomInput(e.target.value)}
         placeholder={`Custom input`}
diff --git a/src/components/Landing.js b/src/components/Landing.js
index c7250f8..ba469b2 100644
--- a/src/components/Landing.js
+++ b/src/components/Landing.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { Fragment, useContext, useEffect, useState, useCallback } from "react";
 import CodeEditorWindow from "./CodeEditorWindow";
 import axios from "axios";
 import { classnames } from "../utils/general";
@@ -16,6 +16,11 @@ import OutputDetails from "./OutputDetails";
 import ThemeDropdown from "./ThemeDropdown";
 import LanguagesDropdown from "./LanguagesDropdown";
 
+import AuthenticationView from "./authentication/AuthenticationView"
+import Submission from "./submissions";
+import { useSaveSubmission } from "../hooks/useSaveSubmission";
+import { AuthContext } from "../contexts/AuthContext";
+
 const javascriptDefault = `/**
 * Problem: Binary Search: Search a sorted array for a target value.
 */
@@ -47,21 +52,30 @@ console.log(binarySearch(arr, target));
 `;
 
 const Landing = () => {
+  const { user, selectedSubmission } = useContext(AuthContext);
   const [code, setCode] = useState(javascriptDefault);
   const [customInput, setCustomInput] = useState("");
   const [outputDetails, setOutputDetails] = useState(null);
   const [processing, setProcessing] = useState(null);
   const [theme, setTheme] = useState("cobalt");
   const [language, setLanguage] = useState(languageOptions[0]);
+  const [title, setTitle] = useState('');
+  const [showSaveSection, setShowSaveSection] = useState(false)
 
   const enterPress = useKeyPress("Enter");
   const ctrlPress = useKeyPress("Control");
+  const { isSubmitting, submit, error} = useSaveSubmission();
 
   const onSelectChange = (sl) => {
     console.log("selected Option...", sl);
     setLanguage(sl);
   };
 
+  // const onSelectChange = useCallback((newValue) => {
+  //   console.log("selected Option...", newValue);
+  //   setLanguage(newValue);
+  // }, [])
+
   useEffect(() => {
     if (enterPress && ctrlPress) {
       console.log("enterPress", enterPress);
@@ -69,6 +83,7 @@ const Landing = () => {
       handleCompile();
     }
   }, [ctrlPress, enterPress]);
+
   const onChange = (action, data) => {
     switch (action) {
       case "code": {
@@ -80,6 +95,7 @@ const Landing = () => {
       }
     }
   };
+
   const handleCompile = () => {
     setProcessing(true);
     const formData = {
@@ -171,6 +187,7 @@ const Landing = () => {
       defineTheme(theme.value).then((_) => setTheme(theme));
     }
   }
+
   useEffect(() => {
     defineTheme("oceanic-next").then((_) =>
       setTheme({ value: "oceanic-next", label: "Oceanic Next" })
@@ -188,6 +205,7 @@ const Landing = () => {
       progress: undefined,
     });
   };
+
   const showErrorToast = (msg, timer) => {
     toast.error(msg || `Something went wrong! Please try again.`, {
       position: "top-right",
@@ -200,6 +218,40 @@ const Landing = () => {
     });
   };
 
+  const handleSave = () => {
+    const submission = {
+      uId: user.uid,
+      code: code,
+      languageId: language,
+      title: title
+    }
+
+    submit(submission)
+
+    if (error) {
+      showErrorToast(error, 5000)
+    } else {
+      showSuccessToast("Successfully saved your code")
+    }
+  }
+
+  const handleChangeTitle = (event) => {
+    setTitle(event.target.value)
+  }
+
+  const toggleSaveCode = () => {
+    setShowSaveSection(!showSaveSection)
+  }
+
+  useEffect(() => {
+    console.log(selectedSubmission)
+    if (selectedSubmission) {
+      const language = languageOptions.find(language => language.id === selectedSubmission.languageId);
+      setLanguage(language);
+      setCode(selectedSubmission.code)
+    }
+  }, [selectedSubmission])
+
   return (
     <>
       <ToastContainer
@@ -246,42 +298,77 @@ const Landing = () => {
       <div className="h-4 w-full bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500"></div>
       <div className="flex flex-row">
         <div className="px-4 py-2">
-          <LanguagesDropdown onSelectChange={onSelectChange} />
+          <LanguagesDropdown onSelectChange={onSelectChange} key={language} selected={language} />
         </div>
         <div className="px-4 py-2">
           <ThemeDropdown handleThemeChange={handleThemeChange} theme={theme} />
         </div>
+        <div className="px-4 py-2 ml-auto authDiv">
+          <AuthenticationView />
+        </div>
       </div>
       <div className="flex flex-row space-x-4 items-start px-4 py-4">
-        <div className="flex flex-col w-full h-full justify-start items-end">
-          <CodeEditorWindow
-            code={code}
-            onChange={onChange}
-            language={language?.value}
-            theme={theme.value}
-          />
+        <div className="flex flex-col w-full h-[50%] justify-start items-end">
+          <div className="flex w-full">
+            <div className="w-[80%]">
+              <CodeEditorWindow
+              key={code}
+                code={code}
+                onChange={onChange}
+                language={language?.value}
+                theme={theme.value}
+              />
+            </div>
+            <div className="w-[20%] px-4">
+              <button
+                onClick={handleCompile}
+                disabled={!code}
+                className={classnames(
+                  "mb-5 border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] px-4 py-2 hover:shadow transition duration-200 bg-white flex-shrink-0",
+                  !code ? "opacity-50" : ""
+                )}
+              >
+                {processing ? "Processing..." : "Compile and Execute"}
+              </button>
+              {outputDetails && <OutputDetails outputDetails={outputDetails} />}
+              <br/>
+              {user &&
+              <a role="button" onClick={toggleSaveCode} className="">Save Code?</a>}
+              {showSaveSection &&
+              <Fragment>
+                <input type="text" class="form-control mt-2 shadow-[5px_5px_0px_0px_rgba(0,0,0)]" placeholder="title" onChange={handleChangeTitle} />
+                <button
+                  onClick={handleSave}
+                  className={classnames(
+                    "mt-4 border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] px-4 py-2 hover:shadow transition duration-200 bg-white flex-shrink-0",
+                    !code ? "opacity-50" : ""
+                  )}>
+                    {isSubmitting ? "Saving...": "Save"}
+                </button>
+              </Fragment>}
+            </div>
+          </div>
+          
+          <div className="flex flex-row w-full">
+            <div className="w-50 py-2">
+              <CustomInput
+                customInput={customInput}
+                setCustomInput={setCustomInput}
+              />
+            </div>
+            <div className="w-50 px-4 py-2">
+              <OutputWindow outputDetails={outputDetails} />
+            </div>
+          </div>
+          
         </div>
 
+        {user &&
         <div className="right-container flex flex-shrink-0 w-[30%] flex-col">
-          <OutputWindow outputDetails={outputDetails} />
           <div className="flex flex-col items-end">
-            <CustomInput
-              customInput={customInput}
-              setCustomInput={setCustomInput}
-            />
-            <button
-              onClick={handleCompile}
-              disabled={!code}
-              className={classnames(
-                "mt-4 border-2 border-black z-10 rounded-md shadow-[5px_5px_0px_0px_rgba(0,0,0)] px-4 py-2 hover:shadow transition duration-200 bg-white flex-shrink-0",
-                !code ? "opacity-50" : ""
-              )}
-            >
-              {processing ? "Processing..." : "Compile and Execute"}
-            </button>
+            <Submission />
           </div>
-          {outputDetails && <OutputDetails outputDetails={outputDetails} />}
-        </div>
+        </div>}
       </div>
       <Footer />
     </>
diff --git a/src/components/LanguagesDropdown.js b/src/components/LanguagesDropdown.js
index c0a6a08..5034734 100644
--- a/src/components/LanguagesDropdown.js
+++ b/src/components/LanguagesDropdown.js
@@ -1,16 +1,16 @@
-import React from "react";
 import Select from "react-select";
 import { customStyles } from "../constants/customStyles";
 import { languageOptions } from "../constants/languageOptions";
 
-const LanguagesDropdown = ({ onSelectChange }) => {
+const LanguagesDropdown = ({ onSelectChange, selected }) => {
   return (
     <Select
       placeholder={`Filter By Category`}
       options={languageOptions}
       styles={customStyles}
-      defaultValue={languageOptions[0]}
-      onChange={(selectedOption) => onSelectChange(selectedOption)}
+      defaultValue={selected}
+      value = {selected}
+      onChange={onSelectChange}
     />
   );
 };
diff --git a/src/components/authentication/AuthenticationView.js b/src/components/authentication/AuthenticationView.js
new file mode 100644
index 0000000..4372e8b
--- /dev/null
+++ b/src/components/authentication/AuthenticationView.js
@@ -0,0 +1,21 @@
+import { useContext } from "react";
+import GoogleButton from "react-google-button";
+import { AuthContext } from "../../contexts/AuthContext";
+import { useGoogleAuth } from "../../hooks/useGoogleAuth";
+import UserNav from "./UserNav";
+
+const AuthenticationView = () => {
+    const { user } = useContext(AuthContext);
+    const { login } = useGoogleAuth();
+
+    return (
+        <>
+        {user ?
+            <UserNav {...user} />:
+            <GoogleButton onClick={login} />
+        }
+        </>
+    )
+}
+
+export default AuthenticationView
\ No newline at end of file
diff --git a/src/components/authentication/UserNav.js b/src/components/authentication/UserNav.js
new file mode 100644
index 0000000..8db5c26
--- /dev/null
+++ b/src/components/authentication/UserNav.js
@@ -0,0 +1,22 @@
+import Dropdown from 'react-bootstrap/Dropdown';
+import { useGoogleAuth } from '../../hooks/useGoogleAuth';
+
+function UserNav(user) {
+  const { logout } = useGoogleAuth();
+
+  return (
+      <Dropdown navbar={true}>
+        <Dropdown.Toggle id="dropdown-basic">
+          Hello, {user.displayName}
+        </Dropdown.Toggle>
+
+        <Dropdown.Menu>
+          <Dropdown.Item onClick={logout}>
+            Logout
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+  );
+}
+
+export default UserNav;
\ No newline at end of file
diff --git a/src/components/authentication/firebase.js b/src/components/authentication/firebase.js
new file mode 100644
index 0000000..42cadc8
--- /dev/null
+++ b/src/components/authentication/firebase.js
@@ -0,0 +1,20 @@
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import {
+    getFirestore } from "firebase/firestore";
+
+const firebaseConfig = {
+    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
+    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
+    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
+    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
+    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
+    appId: process.env.REACT_APP_FIREBASE_APP_ID,
+    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
+};
+
+const app = initializeApp(firebaseConfig);
+const auth = getAuth(app);
+const db = getFirestore(app);
+
+export { auth, db }
\ No newline at end of file
diff --git a/src/components/submissions/index.tsx b/src/components/submissions/index.tsx
new file mode 100644
index 0000000..1e8f012
--- /dev/null
+++ b/src/components/submissions/index.tsx
@@ -0,0 +1,33 @@
+import React, { useContext, useState } from 'react'
+import { useEffect } from 'react';
+import { AuthContext } from '../../contexts/AuthContext';
+import { useGetUserSubmissions } from '../../hooks/useGetUserSubmissions';
+import SubmissionList from './submissionList';
+
+export interface ISubmission {
+    id: string,
+    uId: string,
+    title?: string,
+    code: string,
+    languageId: number,
+    createdAt: string,
+    modifiedAt: string
+}
+
+const Submission = () => {
+    const { user } = useContext(AuthContext);
+
+    const { isFetching, fetch, submissions } = useGetUserSubmissions()
+     
+    useEffect(() => {
+        if (user) {
+            fetch(user.uid)
+        }
+    }, [user])
+
+    return (
+        <SubmissionList submissions={submissions} isFetching={isFetching} />
+    )
+}
+
+export default Submission;
\ No newline at end of file
diff --git a/src/components/submissions/submissionList.tsx b/src/components/submissions/submissionList.tsx
new file mode 100644
index 0000000..8c9afae
--- /dev/null
+++ b/src/components/submissions/submissionList.tsx
@@ -0,0 +1,43 @@
+import React, { useContext, useState } from "react";
+import { useEffect } from "react";
+import { ListGroup } from "react-bootstrap";
+import { ISubmission } from ".";
+import { AuthContext } from "../../contexts/AuthContext";
+
+interface ISubmissionList {
+    submissions: ISubmission[],
+    isFetching: boolean
+}
+
+const SubmissionList = ({submissions, isFetching}: ISubmissionList) => {
+    const { dispatch } = useContext(AuthContext);
+    const [selected, setSelected] = useState<ISubmission>();
+
+    useEffect(() => {
+        dispatch({ type: "SUBMISSION_SELECTED", payload: selected})
+    }, [selected]);
+
+    return  (
+        <ListGroup as="ol" numbered>
+            {submissions.map(submission => (
+                <ListGroup.Item as="li" 
+                    className="d-flex justify-content-between align-items-start" 
+                    key ={submission.id}
+                    onClick = {() => setSelected(submission)}
+                    active = {submission.id === selected?.id}
+                >
+                    <div className="ms-2 me-auto">
+                        <div className="fw-bold">{submission.title}</div>
+                        {submission.code.substring(0, 100)}
+                    </div>
+                    {/* <Badge bg="primary" pill>
+                    14
+                    </Badge> */}
+                </ListGroup.Item>)
+            )}
+            
+        </ListGroup>
+    )
+} 
+
+export default SubmissionList;
\ No newline at end of file
diff --git a/src/contexts/AuthContext.js b/src/contexts/AuthContext.js
new file mode 100644
index 0000000..1cb5d31
--- /dev/null
+++ b/src/contexts/AuthContext.js
@@ -0,0 +1,29 @@
+import { onAuthStateChanged } from "firebase/auth";
+import React, { createContext, useEffect, useReducer } from "react"
+import { auth } from "../components/authentication/firebase";
+import { authReducer } from "../reducers/authReducer";
+
+export const AuthContext = createContext();
+
+const AuthContextProvider = ({ children }) => {
+    const [state, dispatch] = useReducer(authReducer, {
+        user: null,
+        authIsReady: false
+    });
+
+    useEffect(() => {
+        const unsubscribe = onAuthStateChanged(auth, (user) => {
+            dispatch({type: "AUTH_IS_READY", payload: user})
+        })
+
+        return unsubscribe;
+    }, []);
+
+    return ( 
+        <AuthContext.Provider value={{...state, dispatch}}>
+            {children}
+        </AuthContext.Provider>
+    )
+}
+
+export default AuthContextProvider;
\ No newline at end of file
diff --git a/src/hooks/useGetUserSubmissions.tsx b/src/hooks/useGetUserSubmissions.tsx
new file mode 100644
index 0000000..ca6cd6b
--- /dev/null
+++ b/src/hooks/useGetUserSubmissions.tsx
@@ -0,0 +1,35 @@
+import { collection, getDocs, query, where } from "firebase/firestore";
+import { useState } from "react";
+import { db } from "../components/authentication/firebase";
+import { ISubmission } from "../components/submissions";
+
+export const useGetUserSubmissions = () => {
+    const [isFetching, setIsFetching] = useState(false);
+    const [error, setError] = useState(null);
+    const [submissions, setSubmissions] = useState<ISubmission[]>([]);
+
+    const fetch = async (userId: string) => {
+        setError(null);
+        setIsFetching(true)
+        try {
+            const q = query(
+                collection(db, "submissions"), 
+                where("submission.uId", '==', userId));
+            
+            const querySnapshot = await getDocs(q);
+            const data = querySnapshot.docs.map((doc) => {
+                const submission = doc.data();
+                return {...submission.submission, id: doc.id} as ISubmission 
+            })
+            
+            setSubmissions(data)
+            setIsFetching(false);
+        } catch (error: any) {
+            console.log(error)
+            setError(error.message);
+            setIsFetching(false);
+        }
+    }
+
+    return { isFetching, error, submissions, fetch }
+}
\ No newline at end of file
diff --git a/src/hooks/useGoogleAuth.js b/src/hooks/useGoogleAuth.js
new file mode 100644
index 0000000..c9fd239
--- /dev/null
+++ b/src/hooks/useGoogleAuth.js
@@ -0,0 +1,48 @@
+import { useContext, useState } from "react";
+import { auth } from "../components/authentication/firebase";
+import {
+    signInWithPopup,
+    GoogleAuthProvider,
+    signOut
+} from "firebase/auth";
+import { AuthContext } from "../contexts/AuthContext";
+
+export const useGoogleAuth = () => {
+    const { dispatch } = useContext(AuthContext);
+    const [error, setError] = useState();
+    const [isAuthenticating, setIsAuthenticating] = useState(false);
+    const provider = new GoogleAuthProvider();
+
+    const login = async () => {
+        setError(null);
+        setIsAuthenticating(true);
+
+        try {
+            const res = await signInWithPopup(auth, provider);
+
+            if (!res) {
+                throw new Error("Could not complete sign in")
+            }
+
+            const user = res.user;
+            dispatch({ type: "LOGIN", payload: user})
+            setIsAuthenticating(false);
+        } catch (error) {
+            console.log(error);
+            setError(error.message);
+            setIsAuthenticating(false);
+        }
+    }
+
+    const logout = async () => {
+        try {
+            await signOut(auth);
+            dispatch({ type: "LOGOUT"})
+            console.log("User signed out")
+        } catch (error) {
+            console.log(error.message);
+        }
+    }
+
+    return { login, error, isAuthenticating, logout }
+}
\ No newline at end of file
diff --git a/src/hooks/useSaveSubmission.tsx b/src/hooks/useSaveSubmission.tsx
new file mode 100644
index 0000000..2c44174
--- /dev/null
+++ b/src/hooks/useSaveSubmission.tsx
@@ -0,0 +1,26 @@
+import { addDoc, collection } from "firebase/firestore";
+import { useState } from "react";
+import { db } from "../components/authentication/firebase";
+import { ISubmission } from "../components/submissions";
+
+export const useSaveSubmission = () => {
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [error, setError] = useState(null);
+
+    const submit = async (submission: ISubmission) => {
+        setError(null);
+        setIsSubmitting(true)
+        try {
+            await addDoc(collection(db, "submissions"), {
+                submission: {...submission, createdAt: new Date()}
+            })
+            setIsSubmitting(false)
+        } catch (error: any) {
+            console.log(error)
+            setError(error.message);
+            setIsSubmitting(false);
+        }
+    }
+
+    return { isSubmitting, error, submit }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 846ed2c..9351114 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,10 +2,14 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
+import AuthContextProvider from "./contexts/AuthContext";
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <AuthContextProvider>
+      <App />
+    </AuthContextProvider>
   </React.StrictMode>,
   document.getElementById("root")
 );
diff --git a/src/lib/localInterfaces.tsx b/src/lib/localInterfaces.tsx
new file mode 100644
index 0000000..b519a93
--- /dev/null
+++ b/src/lib/localInterfaces.tsx
@@ -0,0 +1,3 @@
+export interface IError {
+    message: string
+}
\ No newline at end of file
diff --git a/src/reducers/authReducer.js b/src/reducers/authReducer.js
new file mode 100644
index 0000000..1238d87
--- /dev/null
+++ b/src/reducers/authReducer.js
@@ -0,0 +1,14 @@
+export const authReducer = (state, action) => {
+    switch(action.type) {
+        case "LOGIN":
+            return {...state, user: action.payload}
+        case "LOGOUT":
+            return {...state, user: null};
+        case "AUTH_IS_READY":
+            return {...state, user: action.payload, authIsReady: true}
+        case "SUBMISSION_SELECTED":
+            return {...state, selectedSubmission: action.payload}
+        default :
+            return state;
+    }
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..74caf0d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}
\ No newline at end of file