ts conversion wip

Author: Rachel Kucharski

__tests__/componentReducer.test.ts

@@ -174,7 +174,7 @@ describe('componentReducer Test', () => {
       expect(state.canvasFocus.childId).toEqual(null);
     });
   });
-  
+
   // TEST 'UPDATE CSS'
   xdescribe('updateCss', () => {
     it('should add style to focused component', () => {
@@ -193,7 +193,7 @@ describe('componentReducer Test', () => {
       const styledComp = state.components.find(
         (comp) => comp.id === state.canvasFocus.componentId
       );
-      console.log('styledcomp',styledComp.style)
+      console.log('styledcomp',styledComp)
       // expect the style property on targeted comp to equal style property in payload
       if (styledComp) {
       expect(styledComp.style.backgroundColor).toEqual(

app/src/components/StateManagement/DisplayTab/useResizeObserver.js renamed to app/src/components/StateManagement/DisplayTab/useResizeObserver.ts

@@ -1,33 +1,33 @@
 import React from 'react';
-import store from '../../redux/store.ts';
+import store from '../../redux/store';
 import { Link } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
-import { resetAllState } from '../../redux/reducers/slice/appStateSlice.ts';
-import createModal from '../right/createModal.tsx';
-import ExportButton from '../right/ExportButton.tsx';
-import { setStyle } from '../../redux/reducers/slice/styleSlice.ts';
-import LoginButton from '../right/LoginButton.tsx';
+import { resetAllState } from '../../redux/reducers/slice/appStateSlice';
+import createModal from '../right/createModal';
+import ExportButton from '../right/ExportButton';
+import { setStyle } from '../../redux/reducers/slice/styleSlice';
+import LoginButton from '../right/LoginButton';
 import withStyles from '@mui/styles/withStyles';
 import MenuItem from '@mui/material/MenuItem';
 import makeStyles from '@mui/styles/makeStyles';
 import createStyles from '@mui/styles/createStyles';
-import SaveProjectButton from '../right/SaveProjectButton.tsx';
-import ProjectsFolder from '../right/OpenProjects.tsx';
-import DeleteProjects from '../right/DeleteProjects.tsx';
+import SaveProjectButton from '../right/SaveProjectButton';
+import ProjectsFolder from '../right/OpenProjects';
+import DeleteProjects from '../right/DeleteProjects';
 import Menu from '@mui/material/Menu';
-import { changeRoom } from '../../redux/reducers/slice/roomCodeSlice.ts';
+import { changeRoom } from '../../redux/reducers/slice/roomCodeSlice';
 // for websockets
 import debounce from 'lodash/debounce';
 // websocket front end starts here
 import { io } from 'socket.io-client';
-import { toggleDarkMode } from '../../redux/reducers/slice/darkModeSlice.ts';
-import { allCooperativeState } from '../../redux/reducers/slice/appStateSlice.ts';
-import { codePreviewCooperative } from '../../redux/reducers/slice/codePreviewSlice.ts';
-import { cooperativeStyle } from '../../redux/reducers/slice/styleSlice.ts';
-import config from '../../../../config.js';
+import { toggleDarkMode } from '../../redux/reducers/slice/darkModeSlice';
+import { allCooperativeState } from '../../redux/reducers/slice/appStateSlice';
+import { codePreviewCooperative } from '../../redux/reducers/slice/codePreviewSlice';
+import { cooperativeStyle } from '../../redux/reducers/slice/styleSlice';
+import config from '../../../../config';
 const { API_BASE_URL } = config;
 
 let socket;

app/src/components/top/NavBarButtons.js renamed to app/src/components/top/NavBarButtons.tsx

@@ -34,7 +34,7 @@ export interface ChildElement {
 export interface Component {
   id: number;
   name: string;
-  style: object;
+  style: {backgroundColor: string};
   attributes?: object;
   events: object;
   code: string;
@@ -73,7 +73,7 @@ export interface HTMLType {
   id: number;
   tag: string;
   name: string;
-  style: object;
+  style: any;
   placeHolderShort: string | JSX.Element;
   placeHolderLong: string;
   // ? == optional type part of icon, cant comment out icon and it works

app/src/interfaces/Interfaces.ts

@@ -5,8 +5,11 @@ import HeaderIcon from '@mui/icons-material/TextFormat';
 import ButtonIcon from '@mui/icons-material/EditAttributes';
 import LinkIcon from '@mui/icons-material/Link';
 import ListIcon from '@mui/icons-material/List';
+import {
+  HTMLType
+} from '../interfaces/Interfaces';
 
-const HTMLTypes = [
+const HTMLTypes: HTMLType[] = [
   {
     id: 11,
     tag: 'div',