Separate Wrapped (#241)

backend/src/constants.py

@@ -3,7 +3,6 @@
 # GLOBAL
 LOCAL = os.getenv("LOCAL", "False") == "True"
 PROD = os.getenv("PROD", "False") == "True"
-DOCKER = os.getenv("DOCKER", "False") == "True"
 PROJECT_ID = "github-334619"
 BACKEND_URL = "https://api.githubtrends.io" if PROD else "http://localhost:8000"
 

backend/src/main.py

@@ -28,8 +28,11 @@
 
 origins = [
     "http://localhost:3000",
+    "http://localhost:3001",
     "https://githubtrends.io",
     "https://www.githubtrends.io",
+    "https://githubwrapped.io",
+    "https://www.githubwrapped.io",
 ]
 
 app.add_middleware(

docs/CONTRIBUTING.md

@@ -6,14 +6,6 @@ If you are interested in contributing to GitHub Trends, take a look through the
 
 First, copy `backend/.env-template` into `backend/.env` and fill in the missing variables. Similarly, copy `frontend/.env-template` into `frontend/.env` and fill in the missing variables. Create a Google Cloud Platform service account and include the key in `backend/gcloud_key.json`. Then run:
 
-### Docker (recommended)
-
-```
-docker-compose up --build -d
-```
-
-### Manual
-
 With Python3.11, install the dependencies from `backend/requirements.txt` and run `yarn start`.
 
 With Node16 and Yarn, install the dependencies from `frontend/package.json` and run on a separate terminal window `yarn start`.

frontend/package.json

@@ -47,7 +47,8 @@
     "tailwindcss": "^3.3.5"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "trends": "REACT_APP_MODE=trends react-scripts start",
+    "wrapped": "REACT_APP_MODE=wrapped PORT=3001 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

frontend/src/api/wrapped.js

@@ -2,9 +2,9 @@
 
 import axios from 'axios';
 
-import { SUBSCRIBER_URL } from '../constants';
+import { BACKEND_URL } from '../constants';
 
-const URL_PREFIX = `${SUBSCRIBER_URL}/wrapped`;
+const URL_PREFIX = `${BACKEND_URL}/wrapped`;
 
 const getValidUser = async (userId) => {
   try {

frontend/src/constants.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 export const PROD = process.env.REACT_APP_PROD === 'true';
 
 export const USE_LOGGER = true;
@@ -6,17 +7,25 @@ export const CLIENT_ID = PROD
   ? process.env.REACT_APP_PROD_CLIENT_ID
   : process.env.REACT_APP_DEV_CLIENT_ID;
 
+export const MODE = process.env.REACT_APP_MODE;
+
 export const REDIRECT_URI = PROD
-  ? 'https://www.githubtrends.io/user'
-  : 'http://localhost:3000/user';
+  ? MODE === 'trends'
+    ? 'https://www.githubtrends.io/user'
+    : 'https://www.githubtrends.io/user/wrapped'
+  : MODE === 'trends'
+  ? 'http://localhost:3000/user'
+  : 'http://localhost:3000/user/wrapped';
+
+console.log(REDIRECT_URI);
 
 export const GITHUB_PRIVATE_AUTH_URL = `https://github.com/login/oauth/authorize?scope=user,repo&client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}/private`;
 export const GITHUB_PUBLIC_AUTH_URL = `https://github.com/login/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}/public`;
 
+export const WRAPPED_URL = PROD
+  ? 'https://www.githubwrapped.io'
+  : 'http://localhost:3001';
+
 export const BACKEND_URL = PROD
   ? 'https://api.githubtrends.io'
   : 'http://localhost:8000';
-
-export const SUBSCRIBER_URL = PROD
-  ? 'https://github-334619.uc.r.appspot.com'
-  : 'http://localhost:8000';

frontend/src/index.js

@@ -3,15 +3,30 @@ import ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
 
 import configureStore from './redux/store';
-import App from './pages/App';
+import { AppTrends, AppWrapped } from './pages/App';
 import './index.css';
 
+import { MODE } from './constants';
+
 export const store = configureStore();
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
-root.render(
-  <Provider store={store}>
-    <App />
-  </Provider>,
-);
+if (MODE === 'trends') {
+  root.render(
+    <Provider store={store}>
+      <AppTrends />
+    </Provider>,
+  );
+} else if (MODE === 'wrapped') {
+  root.render(
+    <Provider store={store}>
+      <AppWrapped />
+    </Provider>,
+  );
+} else {
+  // Throw an error if the mode is not set correctly.
+  throw new Error(
+    'REACT_APP_MODE must be set to "trends" or "wrapped" in your .env file.',
+  );
+}

frontend/src/pages/App/App.js → frontend/src/pages/App/AppTrends.js

@@ -3,19 +3,35 @@
 import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  useParams,
+} from 'react-router-dom';
 
 import Header from './Header';
 import LandingScreen from '../Landing';
 import DemoScreen from '../Demo';
 import { SignUpScreen } from '../Auth';
 import HomeScreen from '../Home';
-import { SelectUserScreen, WrappedScreen } from '../Wrapped';
 import SettingsScreen from '../Settings';
 import { NoMatchScreen, RedirectScreen } from '../Misc';
 
 import { setPrivateAccess as _setPrivateAccess } from '../../redux/actions/userActions';
 import { getUserMetadata } from '../../api';
+import { WRAPPED_URL } from '../../constants';
+import Footer from './Footer';
+
+function WrappedAuthRedirectScreen() {
+  const { rest } = useParams();
+  useEffect(() => {
+    const code = new URLSearchParams(window.location.search).get('code');
+    window.location.href = `${WRAPPED_URL}/${rest}?code=${code}`;
+  }, [rest]);
+
+  return null;
+}
 
 function App() {
   const userId = useSelector((state) => state.user.userId);
@@ -47,28 +63,19 @@ function App() {
             )}
             <Route path="/demo" element={<DemoScreen />} />
             <Route path="/user/redirect" element={<RedirectScreen />} />
-            <Route path="/user" element={<HomeScreen />} />
+            <Route
+              path="/user/wrapped/:rest"
+              element={<WrappedAuthRedirectScreen />}
+            />
             <Route path="/user/*" element={<HomeScreen />} />
-            <Route path="/wrapped/:userId/:year" element={<WrappedScreen />} />
-            <Route path="/wrapped/:userId" element={<WrappedScreen />} />
-            <Route path="/wrapped" element={<SelectUserScreen />} />
             {isAuthenticated && (
               <Route path="/settings" element={<SettingsScreen />} />
             )}
-            <Route path="/:userId" element={<WrappedScreen />} />
             <Route exact path="/" element={<LandingScreen />} />
             <Route path="*" element={<NoMatchScreen />} />
           </Routes>
         </section>
-        <footer className="body-font">
-          <div className="bg-gray-100 border-t border-gray-300">
-            <div className="container mx-auto py-4 px-5">
-              <p className="text-gray-500 text-sm text-center">
-                © 2023 GitHub Trends
-              </p>
-            </div>
-          </div>
-        </footer>
+        <Footer />
       </Router>
     </div>
   );

frontend/src/pages/App/AppWrapped.js

@@ -0,0 +1,59 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+
+import Header from './Header';
+import { SignUpScreen } from '../Auth';
+import { SelectUserScreen, WrappedScreen } from '../Wrapped';
+import { NoMatchScreen } from '../Misc';
+
+import { setPrivateAccess as _setPrivateAccess } from '../../redux/actions/userActions';
+import { getUserMetadata } from '../../api';
+import Footer from './Footer';
+
+function App() {
+  const userId = useSelector((state) => state.user.userId);
+  const isAuthenticated = userId && userId.length > 0;
+
+  const dispatch = useDispatch();
+  const setPrivateAccess = (access) => dispatch(_setPrivateAccess(access));
+
+  useEffect(() => {
+    async function getPrivateAccess() {
+      if (userId && userId.length > 0) {
+        const result = await getUserMetadata(userId);
+        if (result !== null && result.private_access !== undefined) {
+          setPrivateAccess(result.private_access);
+        }
+      }
+    }
+    getPrivateAccess();
+  }, [userId]);
+
+  return (
+    <div className="h-screen flex flex-col">
+      <Router>
+        <Header />
+        <section className="bg-white text-gray-700 flex-grow">
+          <Routes>
+            {!isAuthenticated && (
+              <Route path="/signup" element={<SignUpScreen />} />
+            )}
+            <Route path="/" element={<SelectUserScreen />} />
+            <Route path="/public/" element={<SelectUserScreen />} />
+            <Route path="/private/" element={<SelectUserScreen />} />
+            <Route path="/:userId/:year" element={<WrappedScreen />} />
+            <Route path="/:userId" element={<WrappedScreen />} />
+            <Route path="*" element={<NoMatchScreen />} />
+          </Routes>
+        </section>
+        <Footer />
+      </Router>
+    </div>
+  );
+}
+
+export default App;

frontend/src/pages/App/Footer.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+function Footer() {
+  return (
+    <footer className="body-font">
+      <div className="bg-gray-100 border-t border-gray-300">
+        <div className="container mx-auto py-4 px-5">
+          <p className="text-gray-500 text-sm text-center">
+            © 2023 GitHub Trends
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

frontend/src/pages/App/index.js

@@ -1,3 +1,4 @@
-import App from './App';
+import AppTrends from './AppTrends';
+import AppWrapped from './AppWrapped';
 
-export default App;
+export { AppTrends, AppWrapped };

frontend/src/pages/Landing/Landing.js

@@ -137,15 +137,12 @@ function LandingScreen() {
           </p>
           <br />
           <div>
-            <Link to="/wrapped/avgupta456" className="w-auto">
+            <Link to="/avgupta456" className="w-auto">
               <Button className="my-4 mr-4 w-auto justify-center text-white text-xl 3xl:text-2xl bg-gray-700 hover:bg-gray-800">
                 Example
               </Button>
             </Link>
-            <Link
-              to={isAuthenticated ? `/wrapped/${userId}` : '/wrapped'}
-              className="w-auto"
-            >
+            <Link to={isAuthenticated ? `/${userId}` : '/'} className="w-auto">
               <Button className="my-4 mr-4 w-auto justify-center text-white text-xl 3xl:text-2xl bg-blue-500 hover:bg-blue-600">
                 Get your Wrapped
               </Button>

frontend/src/pages/Settings/Settings.js

@@ -164,7 +164,14 @@ const SettingsScreen = () => {
                 )}
               </div>
             )}
-            {selected === 'personalization' && <div>Personalization</div>}
+            {selected === 'personalization' && (
+              <div>
+                <p className="mb-1 text-2xl text-gray-700">Personalization</p>
+                <hr />
+                <br />
+                <p>Coming soon!</p>
+              </div>
+            )}
             {selected === 'deleteAccount' && (
               <div>
                 <p className="mb-1 text-2xl text-gray-700">Delete Account</p>