Refracting Frontend Code - Milestone 2 FOSS (Overflow 2024)

.gitignore

@@ -4,4 +4,5 @@ node_modules
 *.log
 *.env
 *.pyc
-*.sqlite3
+*.sqlite3
+/overflow

app/.env.template

@@ -0,0 +1 @@
+REACT_APP_BACKEND_URL=http://localhost:8000

app/src/App.js

@@ -17,7 +17,7 @@ import { LeetcodeTable } from "./components/LeetcodeTable";
 import PrivateRoute from "./utils/PrivateRoute";
 import { AuthProvider } from "./Context/AuthContext";
 import GoToTop from "./components/GoToTop";
-import Footer from "./components/Footer"
+import Footer from "./components/Footer";
 import LeetcodeRankings from "./components/LeetcodeRankings";
 import LeetcodeRankingsCCPS from "./components/LeetcodeRankingsCCPS";
 import LeetcodeGraphs from "./components/LeetcodeGraphs";
@@ -111,37 +111,37 @@ function App() {
     }
   }, []);
   useEffect(() => {
-    fetch("http://localhost:8000/codeforces/")
+    fetch(process.env.REACT_APP_BACKEND_URL + "/codeforces/")
       .then((res) => res.json())
       .then((res) => {
         setCodeforcesUsers(res);
       });
   }, []);
 
   useEffect(() => {
-    fetch("http://localhost:8000/codechef/")
+    fetch(process.env.REACT_APP_BACKEND_URL + "/codechef/")
       .then((res) => res.json())
       .then((res) => {
         setCodechefUsers(res);
       });
   }, []);
   useEffect(() => {
-    fetch("http://localhost:8000/leetcode/")
+    fetch(process.env.REACT_APP_BACKEND_URL + "/leetcode/")
       .then((res) => res.json())
       .then((res) => {
         setLeetcodeUsers(res);
       });
   }, []);
   useEffect(() => {
-    fetch("http://localhost:8000/openlake/")
+    fetch(process.env.REACT_APP_BACKEND_URL + "/openlake/")
       .then((res) => res.json())
       .then((res) => {
         setOpenlakeContributor(res);
       });
   }, []);
 
   useEffect(() => {
-    fetch("http://localhost:8000/github/")
+    fetch(process.env.REACT_APP_BACKEND_URL + "/github/")
       .then((res) => res.json())
       .then((res) => {
         setGithubUser(res);
@@ -154,7 +154,7 @@ function App() {
       <Router>
         <AuthProvider>
           <div className="App">
-            <Navbar darkmode={darkmode} toggle={toggle}/>
+            <Navbar darkmode={darkmode} toggle={toggle} />
             <Grid container>
               <Grid item xs={6}>
                 <Switch>
@@ -228,23 +228,22 @@ function App() {
                   <PrivateRoute exact path="/leetcoderankings">
                     <LeetcodeRankings darkmode={darkmode} />
                   </PrivateRoute>
-                  <PrivateRoute  path="/leetcoderanking/:username">
+                  <PrivateRoute path="/leetcoderanking/:username">
                     <LeetcodeGraphs darkmode={darkmode} />
                   </PrivateRoute>
 
                   {/* <PrivateRoute exact path="/leetcoderankingsccps">
                     <LeetcodeRankingsCCPS darkmode={darkmode} />
                   </PrivateRoute> */}
-                  
+
                   <Route exact path="/*">
                     <HomePage />
                   </Route>
-
                 </Switch>
               </Grid>
             </Grid>
-            <GoToTop/>
-            <Footer/>
+            <GoToTop />
+            <Footer />
           </div>
         </AuthProvider>
       </Router>

app/src/Context/AuthContext.js

@@ -1,127 +1,145 @@
-import { createContext,useState } from "react";
-import jwt_decode from  "jwt-decode"
-import {useHistory} from "react-router-dom"
+import { createContext, useState } from "react";
+import jwt_decode from "jwt-decode";
+import { useHistory } from "react-router-dom";
 
-
-
-const AuthContext=createContext()
+const AuthContext = createContext();
 export default AuthContext;
 
-export const AuthProvider=({children})=>{
-    let [authTokens,setAuthTokens]=useState(localStorage.getItem('authTokens')?JSON.parse(localStorage.getItem('authTokens')):null)
-    let [user,setUser]=useState(authTokens?jwt_decode(authTokens.access):null)
-    const history=useHistory()
-    let loginUser=async (e)=>
-    {
-        e.preventDefault();
-        let response=await fetch('http://localhost:8000/api/token/',{
-            method:'POST',
-            headers:{
-                'Content-Type':'application/json'
-            },
-            body:JSON.stringify({
-                'username':e.target.UserName.value,'password':e.target.password.value
-            })
-        })
-        let data = await response.json()
-        if(response.status===200)
-        {
-            setAuthTokens(data)
-            setUser(jwt_decode(data.access))
-            localStorage.setItem('authTokens',JSON.stringify(data))
-            history.push('/')
-        }else{
-            alert('ERROR!!!!')
-        }
+export const AuthProvider = ({ children }) => {
+  let [authTokens, setAuthTokens] = useState(
+    localStorage.getItem("authTokens")
+      ? JSON.parse(localStorage.getItem("authTokens"))
+      : null
+  );
+  let [user, setUser] = useState(
+    authTokens ? jwt_decode(authTokens.access) : null
+  );
+  const history = useHistory();
+  let loginUser = async (e) => {
+    e.preventDefault();
+    let response = await fetch(
+      process.env.REACT_APP_BACKEND_URL + "api/token/",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          username: e.target.UserName.value,
+          password: e.target.password.value,
+        }),
+      }
+    );
+    let data = await response.json();
+    if (response.status === 200) {
+      setAuthTokens(data);
+      setUser(jwt_decode(data.access));
+      localStorage.setItem("authTokens", JSON.stringify(data));
+      history.push("/");
+    } else {
+      alert("ERROR!!!!");
     }
+  };
 
-    let logoutUser=()=>{
-        setAuthTokens(null)
-        setUser(null)
-        localStorage.removeItem('authTokens')
-        history.push('/login')
-    }
-    let registerUser=async(e)=>
-    {
-        e.preventDefault();
-        let response=await fetch('http://localhost:8000/api/register/',{
-            method:'POST',
-            headers:{
-                'Content-Type':'application/json'
-            },
-            body:JSON.stringify({
-                'first_name':e.target.first_name.value,'email':e.target.email.value,'username':e.target.username.value,'password':e.target.password.value,
-                'last_name':e.target.last_name.value,'cc_uname':e.target.cc_uname.value,'cf_uname':e.target.cf_uname.value,'gh_uname':e.target.gh_uname.value,
-                'lt_uname':e.target.lt_uname.value
-            })
-        })
-        if(response.status===200)
+  let logoutUser = () => {
+    setAuthTokens(null);
+    setUser(null);
+    localStorage.removeItem("authTokens");
+    history.push("/login");
+  };
+  let registerUser = async (e) => {
+    e.preventDefault();
+    let response = await fetch(
+      process.env.REACT_APP_BACKEND_URL + "api/register/",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          first_name: e.target.first_name.value,
+          email: e.target.email.value,
+          username: e.target.username.value,
+          password: e.target.password.value,
+          last_name: e.target.last_name.value,
+          cc_uname: e.target.cc_uname.value,
+          cf_uname: e.target.cf_uname.value,
+          gh_uname: e.target.gh_uname.value,
+          lt_uname: e.target.lt_uname.value,
+        }),
+      }
+    );
+    if (response.status === 200) {
+      let response = await fetch(
+        process.env.REACT_APP_BACKEND_URL + "api/token/",
         {
-            let response=await fetch('http://localhost:8000/api/token/',{
-                method:'POST',
-                headers:{
-                    'Content-Type':'application/json'
-                },
-                body:JSON.stringify({
-                    'username':e.target.username.value,'password':e.target.password.value
-                })
-            })
-            let data = await response.json()
-            if(response.status===200)
-            {
-                setAuthTokens(data)
-                setUser(jwt_decode(data.access))
-                localStorage.setItem('authTokens',JSON.stringify(data))
-                history.push('/')
-            }else{
-                alert('ERROR!!!!')
-            }
-        }else{
-            alert('ERROR!!!!')
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            username: e.target.username.value,
+            password: e.target.password.value,
+          }),
         }
+      );
+      let data = await response.json();
+      if (response.status === 200) {
+        setAuthTokens(data);
+        setUser(jwt_decode(data.access));
+        localStorage.setItem("authTokens", JSON.stringify(data));
+        history.push("/");
+      } else {
+        alert("ERROR!!!!");
+      }
+    } else {
+      alert("ERROR!!!!");
     }
-    let update_addUsernames=async(e)=>
-    {
-        e.preventDefault();
-        console.log("!!!!!!!!!!!!!!!!!!!!!!!!!")
-        // console.log(JSON.parse(localStorage.getItem('authTokens')).access);https://leaderboard-stswe61wi-aditya062003.vercel.app
-        let response=await fetch('http://localhost:8000/api/insertapi/',{
-            method:'POST',
-            headers:{
-                'Content-Type':'application/json',
-                'Authorization':'Bearer '+JSON.parse(localStorage.getItem('authTokens')).access,
-            },
-            body:JSON.stringify({
-                'cc_uname':e.target.cc_uname.value,'cf_uname':e.target.cf_uname.value,'gh_uname':e.target.gh_uname.value,
-                'lt_uname':e.target.lt_uname.value
-            })
-        })
-        if(response.status===201)
-        {
-            history.push('/')
-        }else{
-            alert('ERROR!!!!')
-        }
-    }
-    let toLogin=()=>{
-        history.push('/login')
-    }
-    let toRegister=()=>{
-        history.push('/register')
-    }
-    let contextData={
-        user:user,
-        authTokens:authTokens,
-        loginUser:loginUser,
-        registerUser:registerUser,
-        logoutUser:logoutUser,
-        toLogin:toLogin,
-        toRegister:toRegister,
-        update_addUsernames:update_addUsernames
+  };
+  let update_addUsernames = async (e) => {
+    e.preventDefault();
+    console.log("!!!!!!!!!!!!!!!!!!!!!!!!!");
+    // console.log(JSON.parse(localStorage.getItem('authTokens')).access);https://leaderboard-stswe61wi-aditya062003.vercel.app
+    let response = await fetch(
+      process.env.REACT_APP_BACKEND_URL + "api/insertapi/",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization:
+            "Bearer " + JSON.parse(localStorage.getItem("authTokens")).access,
+        },
+        body: JSON.stringify({
+          cc_uname: e.target.cc_uname.value,
+          cf_uname: e.target.cf_uname.value,
+          gh_uname: e.target.gh_uname.value,
+          lt_uname: e.target.lt_uname.value,
+        }),
+      }
+    );
+    if (response.status === 201) {
+      history.push("/");
+    } else {
+      alert("ERROR!!!!");
     }
-    return (
-        <AuthContext.Provider value={contextData}>
-            {children}
-        </AuthContext.Provider>
-    )
-}
+  };
+  let toLogin = () => {
+    history.push("/login");
+  };
+  let toRegister = () => {
+    history.push("/register");
+  };
+  let contextData = {
+    user: user,
+    authTokens: authTokens,
+    loginUser: loginUser,
+    registerUser: registerUser,
+    logoutUser: logoutUser,
+    toLogin: toLogin,
+    toRegister: toRegister,
+    update_addUsernames: update_addUsernames,
+  };
+  return (
+    <AuthContext.Provider value={contextData}>{children}</AuthContext.Provider>
+  );
+};