Refactor visualization, search and info with redux

Refactor types, clean up + reorganize files

Author: mrkvon

package.json

@@ -21,6 +21,7 @@
     "@types/react-dom": "^17.0.0",
     "@types/react-modal": "^3.12.1",
     "@types/react-redux": "^7.1.18",
+    "@types/redux-watch": "^1.1.0",
     "@types/styled-components": "^5.1.11",
     "bulma": "^0.9.3",
     "classnames": "^2.3.1",
@@ -39,6 +40,7 @@
     "react-modal": "^3.14.3",
     "react-redux": "^7.2.5",
     "react-scripts": "4.0.3",
+    "redux-watch": "^1.2.0",
     "rehype-katex": "^5.0.0",
     "remark-math": "^4.0.0",
     "source-map-explorer": "^2.5.2",

src/App.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react'
 import Layout from './components/Layout'
-import DataContainer from './components/DataContainer'
 import { init as initLogin } from './features/login/loginSlice'
 import { useAppDispatch } from './app/hooks'
 
@@ -10,11 +9,7 @@ const App: React.FC = () => {
     dispatch(initLogin())
   }, [dispatch])
 
-  return (
-    <DataContainer>
-      <Layout />
-    </DataContainer>
-  )
+  return <Layout />
 }
 
 export default App

src/app/store.ts

@@ -1,12 +1,34 @@
 import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit'
 import loginReducer from '../features/login/loginSlice'
+import mathReducer, { addGraph } from '../features/math/mathSlice'
+import watch from 'redux-watch'
+import { addDocuments } from '../features/math/mathSlice'
 
 export const store = configureStore({
   reducer: {
     login: loginReducer,
+    math: mathReducer,
   },
 })
 
+// when userId changes, we want to fetch math documents of that new user
+const watchLogin = watch(store.getState, 'login.webId')
+store.subscribe(
+  watchLogin((webId: string) => {
+    store.dispatch(addDocuments(webId))
+  }),
+)
+
+// when documents change, we want to fetch the new document
+// TODO also remove the old documents
+const watchDocuments = watch(store.getState, 'math.entities.document.allIds')
+store.subscribe(
+  watchDocuments((newDocs: string[], oldDocs: string[]) => {
+    const diff = newDocs.filter((d: string) => !oldDocs.includes(d))
+    diff.forEach(uri => store.dispatch(addGraph(uri)))
+  }),
+)
+
 export type AppDispatch = typeof store.dispatch
 export type RootState = ReturnType<typeof store.getState>
 export type AppThunk<ReturnType = void> = ThunkAction<

src/app/types.ts

@@ -0,0 +1,3 @@
+export interface Dictionary<T> {
+  [key: string]: T
+}

src/components/DataContainer.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import Login from '../features/login/Login'
-import VisualizationContainer from './VisualizationContainer'
+import VisualizationContainer from '../features/math/visualization/VisualizationContainer'
 import styled from 'styled-components'
-import { PeopleListContainer } from './PeopleList'
 import About from './About'
 
 const PositionedLogin = styled(Login)`
@@ -18,15 +17,6 @@ const PositionedAbout = styled(About)`
   right: 1rem;
 `
 
-const PositionedPeopleList = styled(PeopleListContainer)`
-  position: fixed;
-  top: 1rem;
-  left: 1rem;
-  display: block;
-  background-color: white;
-  padding: 0.25rem;
-`
-
 const FullSizeVisualization = styled(VisualizationContainer)`
   height: 100vh;
   width: 100vw;
@@ -36,8 +26,6 @@ const FullSizeVisualization = styled(VisualizationContainer)`
 const Layout: React.FC = () => {
   return (
     <>
-      <PositionedPeopleList />
-
       <PositionedLogin />
 
       <PositionedAbout />