Merge pull request #142 from /issues/141-Save_a_user_s_code_when_they_log_in

loiswells97 · web-flow · commit 5fc494063f75 · 2022-08-01T11:39:29.000+01:00
Save a user's code when they log in
diff --git a/src/App.js b/src/App.js
@@ -3,6 +3,7 @@ import './App.scss';
 import Header from './components/Header/Header'
 import Routes from './components/Routes'
 import { useCookies } from 'react-cookie';
+import { BrowserRouter } from 'react-router-dom';
 
 function App() {
   const [cookies] = useCookies(['theme', 'fontSize'])
@@ -11,8 +12,10 @@ function App() {
     <div 
     id='app'
     className = {`--${cookies.theme || themeDefault } font-size-${cookies.fontSize || 'small' }`}>
-      <Header />
-      <Routes />
+      <BrowserRouter>
+        <Header />
+        <Routes />
+      </BrowserRouter>
     </div>
   );
 }
diff --git a/src/components/Callback.js b/src/components/Callback.js
@@ -7,12 +7,15 @@ import userManager from "../utils/userManager";
 const Callback = () => {
   let history = useHistory()
 
+  const previousRoute = localStorage.getItem('location')
+
   const onSuccess = () => {
-    history.push("/")
+    localStorage.removeItem('location')
+    history.push(previousRoute)
   }
 
   const onError = (error) => {
-    history.push("/");
+    history.push(previousRoute);
     console.error(error);
   }
 
diff --git a/src/components/Editor/Hooks/useProject.js b/src/components/Editor/Hooks/useProject.js
@@ -16,9 +16,7 @@ const pythonCode = {
   type: 'python',
   components: [
     { extension: 'py', name: 'main',
-      content: "from emoji import *\nprint('Hello ', world)" },
-    { extension: 'py', name: 'emoji',
-      content: "world = '🌍🌎🌏'\npython = '🐍⌨️'\nsums = '✖️➗➖➕'"},
+      content: "", index: 0, default: true },
   ]
 }
 
@@ -43,7 +41,24 @@ export const useProject = (projectType, projectIdentifier = '') => {
     })();
   }
 
+  const cachedProject = JSON.parse(localStorage.getItem('project'))
+  const loadCachedProject = () => {
+    dispatch(setProject(cachedProject))
+    dispatch(setProjectLoaded(true));
+    localStorage.removeItem('project')
+  }
+
   useEffect(() => {
+    var is_cached_saved_project = (projectIdentifier && cachedProject && cachedProject.identifier === projectIdentifier)
+    var is_cached_unsaved_project = (!projectIdentifier && cachedProject)
+    if (is_cached_saved_project || is_cached_unsaved_project) {
+      loadCachedProject()
+      return
+    }
+    else if (cachedProject) {
+      localStorage.removeItem('project')
+    }
+
     if (projectIdentifier) {
       loadProject();
       return;
diff --git a/src/components/Editor/Project/Project.js b/src/components/Editor/Project/Project.js
@@ -16,7 +16,7 @@ import { setProjectLoaded, setProject } from '../EditorSlice';
 import ImageUploadButton from '../ImageUploadButton/ImageUploadButton';
 import NewComponentButton from '../NewComponentButton/NewComponentButton';
 import RunnerControls from '../../RunButton/RunnerControls';
-import { remixProject, updateProject } from '../../../utils/apiCallHandler';
+import { saveProject, remixProject, updateProject } from '../../../utils/apiCallHandler';
 import ProjectImages from '../ProjectImages/ProjectImages';
 import ExternalFiles from '../../ExternalFiles/ExternalFiles';
 import ProjectName from './ProjectName.js';
@@ -33,6 +33,11 @@ const Project = () => {
 
   const onClickSave = async () => {
     if (!project.identifier) {
+      const response = await saveProject(project, user.access_token)
+      const identifier = response.data.identifier;
+      const project_type = response.data.project_type;
+      dispatch(setProjectLoaded(false));
+      history.push(`/${project_type}/${identifier}`)
       return;
     }
 
@@ -69,20 +74,20 @@ const Project = () => {
         <div className='proj-header'>
           <div>
             <div>
-              {user && (project.user_id === user.profile.user) ? (<ProjectName name={project.name} />) : (<h1>{project.name}</h1>)}
+              {user && (project.user_id === user.profile.user) ? (<ProjectName name={project.name} />) : (<h1>{project.name||"New Project"}</h1>)}
             </div>
             { project.parent ? (
             <p>Remixed from <a href={host+'/'+project.project_type+'/'+project.parent.identifier}>{project.parent.name}</a></p>
           ) : null }
           </div>
           <div className='proj-controls'>
-            { project.identifier && (
+            {
               user !== null ? (
               <>
-                {project.user_id === user.profile.user ? (<Button onClickHandler={onClickSave} buttonText="Save Project" />) : (<Button onClickHandler={onClickRemix} buttonText="Remix Project" />)}
+                {project.user_id === user.profile.user || !project.identifier ? (<Button onClickHandler={onClickSave} buttonText="Save Project" />) : (<Button onClickHandler={onClickRemix} buttonText="Remix Project" />)}
               </>
               ) : null
-            )}
+            }
           </div>
         </div>
       ) : null }
diff --git a/src/components/Header/Header.test.js b/src/components/Header/Header.test.js
@@ -2,6 +2,7 @@ import React from "react";
 import { render } from "@testing-library/react"
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
+import { MemoryRouter } from "react-router-dom";
 
 import Header from "./Header";
 
@@ -17,7 +18,7 @@ test("Login button shown when not embedded", () => {
     }
   }
   const store = mockStore(initialState);
-  const {queryByText} = render(<Provider store={store}><Header /></Provider>)
+  const {queryByText} = render(<Provider store={store}><MemoryRouter><Header /></MemoryRouter></Provider>)
 
   expect(queryByText(/Login/)).not.toBeNull()
 })
diff --git a/src/components/Login/Login.js b/src/components/Login/Login.js
@@ -1,12 +1,18 @@
 import React from 'react';
 import userManager from '../../utils/userManager'
 import Button from '../../components/Button/Button'
+import { useLocation } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 
 const Login = (props) => {
   const { user } = props;
+  const location = useLocation()
+  const project = useSelector((state) => state.editor.project)
 
   const onLoginButtonClick = (event) => {
     event.preventDefault();
+    localStorage.setItem('location', location.pathname)
+    localStorage.setItem('project', JSON.stringify(project))
     userManager.signinRedirect();
   }
 
diff --git a/src/components/Login/Login.test.js b/src/components/Login/Login.test.js
@@ -1,20 +1,21 @@
 import React from "react";
+import store from '../../app/store'
+import { MemoryRouter } from "react-router-dom";
 import { render } from "@testing-library/react"
 import { Provider } from 'react-redux';
-import configureStore from 'redux-mock-store';
 
 import Login from "./Login";
 
 test("Login button shown when not logged in", () => {
   const user = null
-  const { getByText} = render(<Login user={user} />);
+  const { getByText} = render(<MemoryRouter initialEntries={['/']}><Provider store={store}><Login user={user} /></Provider></MemoryRouter>);
 
   expect(getByText(/Log/).textContent).toBe("Login")
 })
 
 test("Logout button shown when user logged in", () => {
   const user = { profile: { email: 'test@example.com' }}
-  const {getByText} = render(<Login user={user} />)
+  const {getByText} = render(<MemoryRouter initialEntries={['/']}><Provider store={store}><Login user={user} /></Provider></MemoryRouter>)
 
   expect(getByText(/Log/).textContent).toBe("Logout")
 })
diff --git a/src/components/Routes.js b/src/components/Routes.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { BrowserRouter, Route, Switch } from 'react-router-dom'
+import { Route, Switch } from 'react-router-dom'
 
 import ProjectComponentLoader from './Editor/ProjectComponentLoader/ProjectComponentLoader'
 import NewProject from './NewProject/NewProject'
@@ -10,60 +10,58 @@ import Callback from './Callback'
 import SilentRenew from './SilentRenew'
 
 const Routes = () => (
-  <BrowserRouter>
-    <Switch>
-      <Route
-        exact
-        path="/auth/callback"
-        component={Callback}
-      />
-      <Route
-        exact
-        path="/auth/silent_renew"
-        component={SilentRenew}
-      />
-      <Route
-        exact
-        path="/"
-        component={ProjectComponentLoader}
-      />
-      <Route
-        exact
-        path="/new"
-        component={NewProject}
-      />
-      <Route
-        exact
-        path="/projects"
-        component={ProjectIndex}
-      />
-      <Route
-        exact
-        path="/:projectType"
-        component={ProjectComponentLoader}
-      />
-      <Route
-        exact
-        path="/:projectType/:identifier"
-        component={ProjectComponentLoader}
-      />
-      <Route
-        exact
-        path="/embedded/:projectType/:identifier"
-        render={(props) => <ProjectComponentLoader {...props} embedded={true} />}
-      />
-      <Route
-        exact
-        path="/python/share/:identifier"
-        component={ProjectViewer}
-      />
-      <Route
-        exact
-        path="/embed/viewer/:identifier"
-        component={EmbeddedViewer}
-      />
-    </Switch>
-  </BrowserRouter>
+  <Switch>
+    <Route
+      exact
+      path="/auth/callback"
+      component={Callback}
+    />
+    <Route
+      exact
+      path="/auth/silent_renew"
+      component={SilentRenew}
+    />
+    <Route
+      exact
+      path="/"
+      component={ProjectComponentLoader}
+    />
+    <Route
+      exact
+      path="/new"
+      component={NewProject}
+    />
+    <Route
+      exact
+      path="/projects"
+      component={ProjectIndex}
+    />
+    <Route
+      exact
+      path="/:projectType"
+      component={ProjectComponentLoader}
+    />
+    <Route
+      exact
+      path="/:projectType/:identifier"
+      component={ProjectComponentLoader}
+    />
+    <Route
+      exact
+      path="/embedded/:projectType/:identifier"
+      render={(props) => <ProjectComponentLoader {...props} embedded={true} />}
+    />
+    <Route
+      exact
+      path="/python/share/:identifier"
+      component={ProjectViewer}
+    />
+    <Route
+      exact
+      path="/embed/viewer/:identifier"
+      component={EmbeddedViewer}
+    />
+  </Switch>
 )
 
 export default Routes
diff --git a/src/utils/apiCallHandler.js b/src/utils/apiCallHandler.js
@@ -52,6 +52,10 @@ export const readProjectList = async (accessToken) => {
   return await get(`${host}/api/projects`, headers(accessToken));
 }
 
+export const saveProject = async (project, accessToken) => {
+  return await post(`${host}/api/projects`, {project: project}, headers(accessToken));
+}
+
 export const updateProject = async (project, accessToken) => {
   return await put(
     `${host}/api/projects/${project.identifier}`,

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ import React from "react";`
`2`	`2`	`import { render } from "@testing-library/react"`
`3`	`3`	`import { Provider } from 'react-redux';`
`4`	`4`	`import configureStore from 'redux-mock-store';`
	`5`	`+import { MemoryRouter } from "react-router-dom";`
`5`	`6`
`6`	`7`	`import Header from "./Header";`
`7`	`8`
`@@ -17,7 +18,7 @@ test("Login button shown when not embedded", () => {`
`17`	`18`	`}`
`18`	`19`	`}`
`19`	`20`	`const store = mockStore(initialState);`
`20`		`- const {queryByText} = render(<Provider store={store}><Header /></Provider>)`
	`21`	`+ const {queryByText} = render(<Provider store={store}><MemoryRouter><Header /></MemoryRouter></Provider>)`
`21`	`22`
`22`	`23`	`expect(queryByText(/Login/)).not.toBeNull()`
`23`	`24`	`})`