useSelector getting called twice, idk why. Setting up the Cell Lists.

Author: SoumavaBanerjee

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

package-lock.json

@@ -59,6 +59,7 @@
     ]
   },
   "devDependencies": {
-    "gh-pages": "^3.1.0"
+    "gh-pages": "^3.1.0",
+    "redux-devtools-extension": "^2.13.9"
   }
 }

package.json

@@ -1,9 +1,9 @@
 import React, { useEffect } from "react";
 import * as esbuild from "esbuild-wasm";
-import Cell from "./components/CodeCell/Cell";
-import MarkdownEditor from "./components/MarkdownEditor/MarkdownEditor";
-
+import CellList from "./components/CellList/CellList";
 import makeStyles from "./styles";
+import { CssBaseline, ThemeProvider } from "@material-ui/core";
+import theme from "./theme";
 
 const App: React.FC = () => {
   const classes = makeStyles();
@@ -30,10 +30,12 @@ const App: React.FC = () => {
   }, []);
 
   return (
-    <div className={classes.wrapper}>
-      <MarkdownEditor />
-      <Cell />
-    </div>
+    <ThemeProvider theme={theme}>
+      <div className={classes.wrapper}>
+        <CssBaseline />
+        <CellList />
+      </div>
+    </ThemeProvider>
   );
 };
 

src/App.tsx

@@ -1,9 +1,31 @@
 import { createStore, applyMiddleware, compose } from "redux";
 import thunk from "redux-thunk";
 import rootReducer from "./reducers";
+import { composeWithDevTools } from "redux-devtools-extension";
+
+// Testing
+import { ActionType } from "./action-types";
 
 export const Store = createStore(
   rootReducer,
   {},
   compose(applyMiddleware(thunk))
 );
+
+console.log(Store.getState());
+
+Store.dispatch({
+  type: ActionType.INSERT_CELL_BEFORE,
+  payload: {
+    id: null,
+    type: "text",
+  },
+});
+
+Store.dispatch({
+  type: ActionType.INSERT_CELL_BEFORE,
+  payload: {
+    id: null,
+    type: "code",
+  },
+});

src/Redux/store.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { useTypedSelector } from "../../hooks/useTypedSelector";
+import CellItem from "./CellListItem/CellItem";
+
+const CellList: React.FC = () => {
+  // sort data according to order from state
+  const cells = useTypedSelector(({ cell: { data, order } }) =>
+    order.map((id) => data[id])
+  );
+
+  console.log(cells);
+
+  const renderedCells = cells.map((cell) => (
+    <CellItem key={cell.id} cell={cell} />
+  ));
+
+  return <div>{renderedCells}</div>;
+};
+
+export default CellList;

src/components/CellList/CellList.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { CellListItemInterface } from "../../../interfaces/index";
+
+import Cell from "../../CodeCell/Cell";
+import Editor from "../../MarkdownEditor/MarkdownEditor";
+
+const CellItem: React.FC<CellListItemInterface> = ({ cell }) => {
+  let child: JSX.Element;
+
+  if (cell.type === "code") {
+    child = <Cell />;
+  } else {
+    child = <Editor />;
+  }
+
+  return <div>{child}</div>;
+};
+
+export default CellItem;

src/components/CellList/CellListItem/CellItem.tsx

@@ -0,0 +1,4 @@
+import { TypedUseSelectorHook, useSelector } from "react-redux";
+import { RootState } from "../Redux/reducers";
+
+export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;

src/hooks/useTypedSelector.ts

@@ -1,18 +1,11 @@
 import reactDom from "react-dom";
 import App from "./App";
-import theme from "./theme";
-import { ThemeProvider } from "@material-ui/core/styles";
-import { CssBaseline } from "@material-ui/core";
-
 import { Provider } from "react-redux";
 import { Store } from "./Redux";
 
 reactDom.render(
   <Provider store={Store}>
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <App />
-    </ThemeProvider>
+    <App />
   </Provider>,
   document.getElementById("root")
 );

src/index.tsx

@@ -6,3 +6,7 @@ export interface CellInterface {
   content: string;
   type: CellType;
 }
+
+export interface CellListItemInterface {
+  cell: CellInterface;
+}