feat: add default hints using cypher-codemirror (#59)

* feat: add default hints using cypher-codemirror * refactor: use redux to keep application state * chore: use readOnly on suggestions and no-shadow on login button * test: fix test using redux-mock-store Co-authored-by: Adrián Insua Yañez <[email protected]>
adrianiy · Apr 25, 2020 · 9f6b5b3 · 9f6b5b3
1 parent 2aa2d76
commit 9f6b5b3
Show file tree

Hide file tree

Showing 28 changed files with 3,027 additions and 130 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@adrianiy/react-autosuggest": "^10.0.1",
     "@babel/core": "^7.1.2",
-    "@babel/plugin-proposal-class-properties": "^7.1.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-transform-regenerator": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-react": "^7.0.0",
@@ -14,19 +14,22 @@
     "@testing-library/user-event": "^7.2.1",
     "@typescript-eslint/parser": "^2.28.0",
     "codemirror": "^5.52.2",
+    "cypher-codemirror": "^1.1.6",
     "d3": "3",
     "deepmerge": "^4.2.2",
     "husky": "^4.2.5",
     "install": "^0.13.0",
     "lint-staged": "^10.1.3",
     "neo4j-driver": "^4.0.2",
     "react": "^16.13.1",
-    "react-codemirror2": "^7.1.0",
     "react-cookie": "^4.0.3",
     "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
     "react-scripts": "3.4.1",
     "react-suber": "1.0.4",
     "react-svg-inline": "^2.1.1",
+    "redux": "^4.0.5",
+    "redux-mock-store": "^1.5.4",
     "styled-components": "^5.1.0",
     "typescript": "^3.8.3",
     "url-parse": "^1.4.7",

diff --git a/src/App.css b/src/App.css
@@ -2,6 +2,9 @@
   background-color: var(--bg-color);
   color: var(--text-color);
   min-height: 100vh;
+  position: fixed;
+  top: 0;
+  width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/src/App.js b/src/App.js
@@ -1,28 +1,28 @@
 import React, { useState, useEffect, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { useCookies } from 'react-cookie';
 
 import Login from './components/login/Login';
 import Comander from './components/comander/Comander';
 import Header from './components/header/Header';
 
 import { doLogout } from './service/neo.service';
-import { themes, manageAutoTheme, ThemeContext } from './global/utils/hooks/theme';
 import { cls } from './global/utils';
 
 import './App.css';
+import allActions from './global/utils/store/actions';
 
 function App() {
     const [cookies, setCookie] = useCookies(["neo4jDash.sess"]);
-    const [sessionId, setSessionId] = useState(null);
-    const [user, setUser] = useState('');
     const [loading, setLoading] = useState(true);
-    const [theme, setTheme] = useState(() => manageAutoTheme('auto'));
+    const [theme, user] = useSelector(state => [state.currentTheme, state.currentUser]);
+
+    const dispatch = useDispatch();
 
     const loginHandler = useCallback((response) => {
         setCookie("neo4jDash.sess", JSON.stringify(response));
-        setSessionId(response.sessionId);
-        setUser(response.user);
-    }, [setCookie]);
+        dispatch(allActions.userActions.setUser(response));
+    }, [dispatch, setCookie]);
 
     useEffect(() => {
         if (cookies["neo4jDash.sess"] && cookies["neo4jDash.sess"].sessionId && loading) {
@@ -31,42 +31,38 @@ function App() {
         setLoading(false);
     }, [cookies, loading, loginHandler, theme]);
 
-    const logoutHandler = () => {
-        logout();
-    }
-
-    const logout = async () => {
-        const logOutResult = await doLogout(sessionId);
-        if (logOutResult) {
-            setSessionId(null);
-            setCookie('neo4jDash.sess', null);
+    useEffect(() => {
+        if (!loading && !user.loggedIn) {
+            async function logout() {
+                await doLogout(user.sessionId);
+            }
+            logout();
+            setCookie("neo4jDash.sess", null);
         }
-    }
+    }, [loading, setCookie, user]);
 
     const render = () => {
         if (loading) {
             return <em className={cls('AppLoading', "material-icons")}>share</em>
         } else {
-            if (!sessionId) {
+            if (!user.loggedIn) {
                 return (
                     <Login callback={ loginHandler }></Login>
                 )
             } else {
                 return (
                     <div className="AppContainer">
-                        <Header user={user} callback={ logoutHandler } themeCallback={setTheme}></Header>
-                        <Comander sessionId={sessionId}></Comander>
+                        <Header></Header>
+                        <Comander></Comander>
                     </div>
                 )
             }
         }
     }
 
-    return <ThemeContext.Provider value={themes[theme]}>
-        <div className={cls('App', theme)}>
+    return <div className={cls('App', theme.id)}>
             { render() }
         </div>
-    </ThemeContext.Provider>
 }
 
 export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -1,9 +1,18 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import App from './App';
+import { setup } from './global/utils/tests/store.mock';
+
+describe('App test suite', () => {
+    beforeAll(() => {
+
+    })
+
+    test('renders login button if user is not logged in', () => {
+        const { MockProvider } = setup({ currentTheme: {}, currentUser: { loggedIn: false } });
+        const { getByText } = render(<MockProvider><App /></MockProvider>);
+        const linkElement = getByText("Login");
+        expect(linkElement).toBeDefined();
+    });
+})
 
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText("Login");
-  expect(linkElement).toBeDefined();
-});
diff --git a/src/components/card/Card.js b/src/components/card/Card.js
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useRef, useEffect, useContext } from 'react';
+import React, { useState, useCallback, useRef, useEffect } from 'react';
 import Summary from './Summary';
 
 import { getChart } from '../../service/neo.service';
@@ -8,7 +8,7 @@ import Chart from '../../global/components/chart/Chart';
 import { cls } from '../../global/utils';
 import styles from './Card.module.css';
 import neoGraphStyle from '../../global/components/chart/graphStyle';
-import { ThemeContext } from '../../global/utils/hooks/theme';
+import { useSelector } from 'react-redux';
 
 const graphStyle = new neoGraphStyle();
 
@@ -20,7 +20,7 @@ function Card(props) {
     const [stats, setStats] = useState(null);
     const [expanded, setExpanded] = useState(false);
     const [fullscreen, setFullscreen] = useState(false);
-    const theme = useContext(ThemeContext)
+    const [theme, user] = useSelector(state => [state.currentTheme, state.currentUser]);
     const [graphStyleData, setGraphStyle] = useState({
         relationship: {
             'text-color-external': theme.relColor
@@ -39,13 +39,13 @@ function Card(props) {
 
     const fecthData = useCallback(async () => {
         try {
-            const results = await getChart(props.sessionId, props.query);
+            const results = await getChart(user.sessionId, props.query);
             setResults(results);
             setError(null);
         } catch (err) {
             setError(`${ props.query }: ${err}`);
         }
-    }, [props])
+    }, [props.query, user.sessionId])
 
     useEffect(() => {
         if (query.current !== props.query) {
@@ -124,7 +124,6 @@ function Card(props) {
                         style={{ width: "100%" }}
                         result={results}
                         maxNeighbours={30}
-                        sessionId={props.sessionId}
                         itemHovered={itemHover}
                         itemSelected={itemSelected}
                         setSummary={setSummary}