implement authentication with google, save, retrieve and display code…

.gitignore

@@ -27,3 +27,5 @@ yarn-error.log*
 .env
 .env.build
 .vercel
+
+firebaseConfig.js

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",

src/App.css

@@ -36,3 +36,7 @@
     transform: rotate(360deg);
   }
 }
+
+.authDiv {
+  margin-right: 40px;
+}

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}

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`}

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,28 +52,38 @@ 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);
       console.log("ctrlPress", ctrlPress);
       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 />
     </>

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}
     />
   );
 };

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

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;

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 }