RLBF-Group · tristanyukio · Jul 15, 2023 · Jul 17, 2023 · Jul 18, 2023 · Jul 19, 2023
diff --git a/.env b/.env
diff --git a/.gitignore b/.gitignore
@@ -79,6 +79,7 @@ web_modules/
 .env.test.local
 .env.production.local
 .env.local
+.env
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache
@@ -129,3 +130,6 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+# MacOS files
+.DS_Store
diff --git a/__tests__/routes.test.js b/__tests__/routes.test.js
@@ -0,0 +1,43 @@
+// import routers/endpoints from files throughout the project to test them here
+// supertest will be a required for http request testing
+const request = require('supertest');
+const app = require('../server/server');
+
+// *** REFER TO `server.js` TO MAKE SURE Application Default Credentials (ADC) ARE AUTHENTICATED ***
+
+// Google API Authentication is essential to server-side operations in the application, but using Jest to mock that authentication here seemed to be unnecessary and inefficient. Google API docs will be of more help
+
+xdescribe("server startup", () => {
+  let server;
+
+  beforeAll(() => {
+    server = app.listen(5555); //start server at PORT before tests
+  })
+
+  afterAll((done) => {
+    if(server) {
+    server.close(done) //close server after tests run
+    } else {
+      done();
+    }
+  });
+
+  it('should start and listen at proper port', async () => {
+    const res = await request(app).get('/');
+    expect(res.status).toBe(404);
+    expect(res.text).toBe('Not Found');
+  })
+
+  it('should catch all invalid routes and return a status 404', async () => {
+    const res = await request(app).get('/api/invalid-route');
+    expect(res.status).toBe(404);
+  })
+})
+
+describe('/api', () => {
+  describe('POST', () => {
+    it('responds with 200 status and application/json content type', async () => {
+      return request(app).post('/api').expect('Content-Type', /application\/json/).expect(200);
+    })
+  })
+})
diff --git a/server/token.json → __tests__/sqlController.test.js b/server/token.json → __tests__/sqlController.test.js
diff --git a/build/index.html b/build/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>RLBF GROUP</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet"><script defer="defer" src="/bundle.js"></script></head><body><h1></h1><div id="root"></div></body></html>
diff --git a/client/App.jsx b/client/App.jsx
@@ -2,9 +2,13 @@ import React from 'react'
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
 import Footer from './components/Footer.js'
 import About from './components/About.js'
+import Signin from './components/Signin.js'
+import Callback from './components/Callback.js'
 import ReadMe from './components/ReadMe.js'
 import Output from './components/Output.js'
 import Form from './components/Form.js'
+import Home from './components/Home.js'
+import Reverse from './components/Reverse.js'
 import './styles/LandingPage.scss'
 
 
@@ -14,7 +18,11 @@ const App = () => {
       <Router>
         <div className="contentWrapper">
           <Routes>
-            <Route path="/" exact element={<Form />}/>
+             <Route path="/home" exact element={<Home />}/>
+          <Route path="/form" element={<Signin />} />
+          <Route path="/callback" element={<Callback />} />
+
+            <Route path="/reverse" exact element={<Reverse />}/>
             <Route path="/readme" exact element={<ReadMe />}/>
             <Route path="/about" exact element={<About />}/>
             <Route path="/output" exact element={<Output />}/>

diff --git a/client/components/Callback.js b/client/components/Callback.js
@@ -0,0 +1,88 @@
+import React, { useEffect, useState } from 'react';
+import { redirect, useParams } from 'react-router-dom';
+
+//once a user has given permissions on the consent page, if the user's credentials were authenticated by Google, Google redirects the user to the redirect URL we provided ('/callback') along with an authorization code query parameter on the URL
+//GET /oauthcallback?code={authorizationCode}
+
+// using that auth code, we will now make a GET request to the server, which will make a GET request here to obtain the access token and refresh token(used as cookie) from Google's API
+
+export default function Callback() {
+	const [fetched, setFetched] = useState(false);
+	//const navigate = useNavigate();
+
+	//get the redirect URL path (including the code query (authentication code) required to send to retrieve user specific tokens)
+	//href, the entire redirect URL appended with the authorization code
+	const href = window.location.href;
+
+	const index = href.indexOf('callback');
+	//append authorization code to the path for the GET request for user's access/refresh tokens
+	const path = '/api/authentication/' + href.slice(index);
+	// console.log('path: ', path);
+
+	//use authentication code in request query to get access/refresh tokens from Google
+	// const getTokens = async () => {
+	// 	try {
+	// 		const response = await fetch(path, {
+	// 			method: 'GET',
+	// 			headers: {
+	// 				'Content-Type': 'Application/JSON',
+	// 			},
+	// 		});
+
+	// 		console.log('getTokens fetch response: ', response);
+	// 		const accessToken = await response.json();
+
+	// 		console.log('Access Token: ', accessToken);
+	// 		console.log(typeof accessToken);
+
+	// 		return redirect('/form');
+	// 	} catch (error) {
+	// 		console.log(
+	// 			'Error when making fetch request to URL for access token and refresh token',
+	// 			error
+	// 		);
+	// 	}
+	// };
+
+    const handleCallback = async () => {
+        try {
+            const response = await fetch(path, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+
+            })
+            // const permission = await response.json();
+
+			// 			console.log('in callback component')
+            // if (permission.status === 200){
+            //     console.log('login successful')
+            //     return redirect('/form');
+            //}
+        } catch (error) {
+            console.log('Error, could not authenticate user with Google', error)
+        }
+
+    }
+
+
+
+
+	if (fetched === false) {
+		setFetched(true);
+	}
+
+	useEffect(() => {
+		handleCallback();
+	}, [fetched]);
+
+	return (
+		<div className="signinPage">
+			<div className="signin">
+				<h2>Confirming Google Account</h2>
+				<p>Please wait..</p>
+			</div>
+		</div>
+	);
+}
diff --git a/client/components/Email.js b/client/components/Email.js
@@ -0,0 +1,17 @@
+import React from 'react'
+
+const Email = ({formData, setFormData}) => {
+  return (
+    <div>      
+      <input 
+        placeholder='Please insert your email' 
+        value={formData.email}
+        onChange={e => {          
+          setFormData({ ...formData, email: e.target.value })
+        }}        
+      ></input>
+    </div>
+  )
+}
+
+export default Email
diff --git a/client/components/Footer.js b/client/components/Footer.js
@@ -1,14 +1,21 @@
-import React from 'react'
-import { Link } from "react-router-dom";
+import React from 'react';
+import { Link } from 'react-router-dom';
 
 const Footer = () => {
-  return (
-    <div className="footer">
-      <Link to="/" className="linkToReadMe">HOME</Link>
-      <Link to="/readme" className="linkToReadMe">READ ME</Link>      
-      <Link to="/about" className="linkToReadMe">ABOUT US</Link>
-    </div>
-  )
-}
+	return (
+		<div className="footer">
+			{/* //! ensure that this route is consistent with the user's logged in status */}
+			<Link to="/form" className="linkToReadMe">
+				HOME
+			</Link>
+			<Link to="/readme" className="linkToReadMe">
+				READ ME
+			</Link>
+			<Link to="/about" className="linkToReadMe">
+				ABOUT US
+			</Link>
+		</div>
+	);
+};
 
-export default Footer
+export default Footer;
diff --git a/client/components/Form.js b/client/components/Form.js
@@ -56,7 +56,7 @@ const Form = props => {
   }
 
   const handleClick = e => {    
-    const url = '/api'
+    const url = '/api/sheets'
     fetch(url, { 
       method: 'POST',
       body: JSON.stringify({

diff --git a/client/components/Home.js b/client/components/Home.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Link } from "react-router-dom";
+
+const Home = () => {
+  return (
+    <div className="button-home">
+        <Link to="/form" className="linkToForm"><button>SheetsQL-ifier</button></Link>
+        <Link to="/reverse" className="linkToReverse"><button className='rev-button'>Reversifier</button></Link>
+    </div>
+  )
+}
+
+
+export default Home;
diff --git a/client/components/Reverse.js b/client/components/Reverse.js
@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from 'react'
+import GoogleSheetsUrl from './GoogleSheetsUrl';
+import DataRange from './DataRange';
+import SqlDatabaseUrl from './SqlDatabaseUrl';
+import PrimaryKeyAndName from './PrimaryKeyAndName';
+import TableName from './TableName';
+import Email from './Email';
+import Url from './Url';
+
+const Form = props => {
+  const [page, setPage] = useState(0);
+  const [formData, setFormData] = useState({
+    sqlDatabaseUrl: "",
+    tableName: "",
+    email: "",
+  });
+  const FormTitles = ["Please Enter SQL Database URL", "Please Enter Table Name From SQL Database", "Please Enter Email Address", "Here Is Your Google Sheet:"];
+
+  const [googleSheetsErrorMessage, setGoogleSheetsErrorMessage] = useState();
+  const [successClassName, setSuccessClassName] = useState("submitSuccessHide");
+  const [submitDisabled, setSubmitDisabled] = useState(true);
+  const [updatedURL, setUpdatedURL] = useState('')
+
+  useEffect(()=> {
+    const {sqlDatabaseUrl, tableName, email} = formData;
+    if (sqlDatabaseUrl.startsWith('postgres://') && tableName && email){
+        setSubmitDisabled(false);
+    } else {
+      if (!submitDisabled) setSubmitDisabled(true);
+    }
+  }, [formData])
+
+  const personalPage = () => {
+    if(page === 0) {
+    return <SqlDatabaseUrl 
+        formData={formData}
+        setFormData={setFormData}
+      />
+    } else if(page === 1) {
+      return <TableName 
+        formData={formData}
+        setFormData={setFormData}
+      />
+    } else if(page === 2) {
+        return <Email
+        formData={formData}
+        setFormData={setFormData}
+      />
+
+    } else if(page === 3) {
+        return <Url
+        // formData={formData}
+        // setFormData={setFormData}
+        updatedURL={updatedURL}
+      />
+    } 
+  }
+
+  const handleClick = e => {    
+    const url = '/api/new'
+    console.log('entered post for backend')
+    fetch(url, { 
+      method: 'POST',
+      body: JSON.stringify({
+        sqlDatabaseUrl: formData.sqlDatabaseUrl,
+        tableName: formData.tableName,
+        email: formData.email, 
+      }),        
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }
+   ) 
+    //  .then(response => {
+    //     console.log('entered response', response)
+    //     //  response.json()
+    // })
+    // .then(data => {
+    //    console.log('data jsoned', data)
+    //    setUpdatedURL(data)
+    }
+
+
+
+  return (
+    <div className="form">
+      <div className="form-container">
+        <div className={successClassName}>
+          <p></p>
+        </div>
+        <div className="formHeader">
+          <h3>{FormTitles[page]}</h3>
+        </div>
+        <div className="formBody">
+          {personalPage()}
+        </div>
+        <div className="formFooter">
+          <button
+            className="formButton"
+            disabled = {page === 0}
+            onClick={() => {
+              if (successClassName==='submitSuccess')
+                setSuccessClassName('submitSuccessHide');
+              setPage((currPage) => currPage -= 1)}
+            }
+          >Prev</button>
+          <button 
+            className="formButtonNext"
+            disabled = {
+              // different cases for prev, next, and submit
+              (page === FormTitles.length -1 ) && (submitDisabled)
+            }
+            onClick={() => {
+
+              if(page === 2) {
+                {handleClick()}
+                setSuccessClassName("submitSuccess");
+                setPage((currPage) => currPage += 1)
+              } else {
+                  setPage((currPage) => currPage += 1)
+                  setSuccessClassName("submitSuccessHide");
+              }              
+            }
+          }>{page === 2 ? 'Submit' : 'Next'}</button>
+        </div>
+        <div className="pageNumber">
+          <p>{page + 1}/4</p>
+        </div>
+        <div className="errorMessage">
+          <p>{googleSheetsErrorMessage}</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Form
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>RLBF GROUP</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet"><script defer="defer" src="/bundle.js"></script></head><body><h1></h1><div id="root"></div></body></html>