Merge pull request #20 from oslabs-beta/ts-conversion

ts conversion completed and optimization up to 70% of front end components

Author: MatteoDiter

app/src/components/StateManagement/DisplayTab/Tree.tsx

@@ -6,7 +6,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import useResizeObserver from './useResizeObserver';
 import { useSelector } from 'react-redux';
 import { ChildElement } from '../../../interfaces/Interfaces';
-import { RootState } from '../../../redux/store'
+import { RootState } from '../../../redux/store';
 
 function usePrevious(value) {
   const ref = useRef();
@@ -18,8 +18,11 @@ function Tree({
   data,  setCurrComponentState, setParentProps, setClickedComp,
 }) {
   const state = useSelector((store:RootState) => store.appState)
-  const svgRef = useRef();
-  const wrapperRef = useRef();
+  // Provide types for the refs.
+  // In this case HTMLDivElement for the wrapperRef and SVGSVGElement for the svgRef.
+  // create mutable ref objects with initial values of null
+  const svgRef = useRef<SVGSVGElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
   const xPosition = 50;
   const textAndBorderColor = '#bdbdbd';
   const dimensions = useResizeObserver(wrapperRef);
@@ -70,10 +73,8 @@ function Tree({
     // but use getBoundingClientRect on initial render
     // (dimensions are null for the first render)
 
-    // if (wrapperRef.current) {
     const { width, height } = dimensions || wrapperRef.current.getBoundingClientRect();
     // transform hierarchical data
-    // }
 
     let root;
     let rootName;

app/src/components/StateManagement/StateManagement.tsx

@@ -8,6 +8,7 @@ import TabPanel from '@mui/lab/TabPanel';
 import { useSelector } from 'react-redux';
 import CreateContainer from './CreateTab/CreateContainer';
 import DisplayContainer from './DisplayTab/DisplayContainer';
+import { RootState } from '../../redux/store';
 
 const useStyles = makeStyles({
   contextContainer: {
@@ -20,8 +21,8 @@ const useStyles = makeStyles({
 
 const StateManager = (props): JSX.Element => {
 
-  const state = useSelector(store => store.appState)
-  const isDarkMode = useSelector(state => state.darkMode.isDarkMode);
+  const state = useSelector((store:RootState) => store.appState)
+  const isDarkMode = useSelector((state:RootState) => state.darkMode.isDarkMode);
 
   const { components } = state;
   const classes = useStyles();

app/src/components/top/NavBar.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import Avatar from '@mui/material/Avatar';
+//commenting out the line below breaks the app
 import logo from '../../public/icons/win/logo.png';
 import NavbarDropDown from './NavBarButtons';
-import { useSelector } from 'react-redux'
+import { useSelector } from 'react-redux';
+import { RootState } from '../../redux/store';
+
 
 const NavBar = (props) => {
 
   // for dropdown navbar
   const [dropMenu, setDropMenu] = React.useState(false);
-  const isDarkMode = useSelector(state=>state.darkMode.isDarkMode)
+  const isDarkMode = useSelector((state:RootState)=>state.darkMode.isDarkMode)
 
   return (
   <nav className="main-navbar" style={isDarkMode ? {backgroundColor: '#013365'} : {backgroundColor: 'white'}}>

app/src/components/top/NavBarButtons.tsx

@@ -29,6 +29,7 @@ import { codePreviewCooperative } from '../../redux/reducers/slice/codePreviewSl
 import { cooperativeStyle } from '../../redux/reducers/slice/styleSlice';
 import config from '../../../../config';
 const { API_BASE_URL } = config;
+import { RootState } from '../../redux/store';
 
 let socket;
 
@@ -58,7 +59,7 @@ function initSocketConnection(roomCode) {
   // receiving the message from the back end
   socket.on('receive message', (event) => {
     // console.log('message from server: ', event);
-    let currentStore = JSON.stringify(store.getState());
+    let currentStore: any = JSON.stringify(store.getState());
     if (currentStore !== event) {
       currentStore = JSON.parse(currentStore);
       event = JSON.parse(event);
@@ -153,6 +154,7 @@ const StyledMenu = withStyles({
       vertical: 'top',
       horizontal: 'center'
     }}
+    open={true}
     {...props}
   />
 ));
@@ -176,7 +178,7 @@ function navbarDropDown(props) {
   const [confirmRoom, setConfirmRoom] = React.useState('');
   const classes = useStyles();
 
-  const { isDarkMode, state, joinedRoom } = useSelector((store) => ({
+  const { isDarkMode, state, joinedRoom } = useSelector((store: RootState) => ({
     isDarkMode: store.darkMode.isDarkMode,
     state: store.appState,
     joinedRoom: store.roomCodeSlice.roomCode
@@ -340,7 +342,7 @@ function navbarDropDown(props) {
       ></input>
       <button onClick={() => joinRoom()}>Join Room</button>
       <p>In Room: {joinedRoom}</p>
-      <LoginButton style={{ marginLeft: '10%' }} />
+      <LoginButton/>
       <StyledMenu // Dropdown menu connected to Manage Project Button
         id="customized-menu"
         anchorEl={anchorEl}

app/src/redux/reducers/slice/codePreviewSlice.ts

@@ -1,10 +1,32 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice , PayloadAction } from '@reduxjs/toolkit';
+
+// interface InititalState {
+//   code: string;
+//   input: string
+// }
 
 const initialState = {
   code: ``,
   input: ``
 };
 
+// interface Action {
+//   payload: any,
+//   type: string
+// }
+
+// interface Reducers {
+//   codePreviewSave: (state:InititalState, action:Action) => void;
+//   codePreviewInput: (state:InititalState , action:Action) => void;
+//   codePreviewCooperative: (state:InititalState , action:Action) => ObjectConstructor;
+// }
+
+// interface CodePreviewSlice {
+//   name: string;
+//   initialState: InititalState;
+//   reducers: Reducers;
+// }
+
 const codePreviewSlice = createSlice({
   name: 'codePreview',
   initialState,