all files converted to typescript

Rachel Kucharski · Rachel Kucharski · commit ca27ae57bfcc · 2023-05-01T14:00:58.000-07:00
diff --git a/app/src/components/main/DemoRender.tsx b/app/src/components/main/DemoRender.tsx
@@ -28,6 +28,10 @@ const DemoRender = (): JSX.Element => {
   const html = `
     <html>
       <head>
+      <link
+      rel="stylesheet"
+      href="./fake.css"
+    />
       </head>
       <body>
         <div id="app">
diff --git a/app/src/components/main/fake.css b/app/src/components/main/fake.css
@@ -0,0 +1,13 @@
+.test {
+  color: red !important
+}
+.MuiBox-root {
+  color: red
+}
+css-0 {
+  color: red
+}
+
+#rend1 {
+  color: red !important
+}
diff --git a/app/src/components/right/ExportButton.tsx b/app/src/components/right/ExportButton.tsx
@@ -15,10 +15,8 @@ export default function ExportButton() {
   const state = useSelector((store: RootState) => store.appState);
 
   const genOptions: string[] = [
-    'Export components',
-    'Export components with application files'
+    'Export components'
   ];
-  let genOption = 0;
 
   // Closes out the open modal
   const closeModal = () => setModal('');
@@ -29,7 +27,7 @@ export default function ExportButton() {
         {genOptions.map((option: string, i: number) => (
           <ListItem
             key={i}
-            onClick={() => chooseGenOptions(i)}
+            onClick={() => chooseGenOptions()}
             style={{
               border: '1px solid #3f51b5',
               marginBottom: '2%',
@@ -39,32 +37,19 @@ export default function ExportButton() {
             <ListItemText primary={option} style={{ textAlign: 'center' }} />
           </ListItem>
         ))}
-        <ListItem>
-          <input type="checkbox" id="tests" name="tests"></input>
-          <label for="tests">Include Tests</label>
-        </ListItem>
       </List>
     );
-    let testchecked = 0;
-    // helper function called by showGenerateAppModal
-    // this function will prompt the user to choose an app directory once they've chosen their export option
-    const chooseGenOptions = (genOpt: number) => {
-      // set export option: 0 --> export only components, 1 --> export full project
-      genOption = genOpt;
-
-      //This is exclusive to the electron app
-      // window.api.chooseAppDir();
-      // testchecked = document.getElementById('tests').checked;
+
+    const chooseGenOptions = () => {
       zipFiles(state);
-     
       closeModal();
     };
 
     setModal(
       createModal({
         closeModal,
         children,
-        message: 'Choose export preference:',
+        message: 'Click to download in zip file:',
         primBtnLabel: null,
         primBtnAction: null,
         secBtnAction: null,
@@ -100,17 +85,10 @@ export default function ExportButton() {
   );
 }
 
-//The below code is exclusive to the Electron App's export function
-
-// import React, { useState, useCallback, useEffect } from 'react';
-// import List from '@mui/material/List';
-// import ListItem from '@mui/material/ListItem';
-// import ListItemText from '@mui/material/ListItemText';
-// import GetAppIcon from '@mui/icons-material/GetApp';
-// import Button from '@mui/material/Button';
-// import exportProject from '../../utils/exportProject.util';
-// import createModal from './createModal';
-// import { useSelector } from 'react-redux';
+//The below code is exclusive to ReacType's Electron App
+//If you would like to deploy the app, please comment out the exportButton function above and uncomment the code below
+
+
 // export default function ExportButton() {
 //   const [modal, setModal] = useState(null);
 //   const state = useSelector(store => store.appState)
diff --git a/app/src/index.tsx b/app/src/index.tsx
@@ -7,17 +7,17 @@ import {
 } from 'react-router-dom';
 import 'babel-polyfill';
 import React from 'react';
-import store from './redux/store.ts';
+import store from './redux/store';
 import { Provider } from 'react-redux';
 import ReactDOM from 'react-dom';
 import Cookies from 'js-cookie';
-import App from './components/App.tsx';
-import SignIn from './components/login/SignIn.tsx';
-import SignUp from './components/login/SignUp.tsx';
-import FBPassWord from './components/login/FBPassWord.tsx';
-import Tutorial from './tutorial/Tutorial.tsx';
-import TutorialPage from './tutorial/TutorialPage.tsx';
-import ProjectDashboard from './Dashboard/ProjectContainer.tsx';
+import App from './components/App';
+import SignIn from './components/login/SignIn';
+import SignUp from './components/login/SignUp';
+import FBPassWord from './components/login/FBPassWord';
+import Tutorial from './tutorial/Tutorial';
+import TutorialPage from './tutorial/TutorialPage';
+import ProjectDashboard from './Dashboard/ProjectContainer';
 
 const client = new ApolloClient({
   uri: 'https://reactype-caret.herokuapp.com/graphql',
diff --git a/app/src/interfaces/Interfaces.ts b/app/src/interfaces/Interfaces.ts
@@ -34,7 +34,7 @@ export interface ChildElement {
 export interface Component {
   id: number;
   name: string;
-  style: {backgroundColor: string};
+  style: {};
   attributes?: object;
   events: object;
   code: string;
diff --git a/app/src/reducers.js b/app/src/reducers.js
diff --git a/app/src/redux/reducers/rootReducer.ts b/app/src/redux/reducers/rootReducer.ts
@@ -1,12 +1,12 @@
 import { combineReducers } from '@reduxjs/toolkit';
 
 // Need to import each slice which will be combined in the rootReducer
-import darkModeReducer from './slice/darkModeSlice.ts';
-import codePreviewReducer from './slice/codePreviewSlice.ts';
-import contextReducer from './slice/contextReducer.ts';
-import appStateReducer from './slice/appStateSlice.ts';
-import styleReducer from './slice/styleSlice.ts';
-import roomCodeReducer from './slice/roomCodeSlice.ts';
+import darkModeReducer from './slice/darkModeSlice';
+import codePreviewReducer from './slice/codePreviewSlice';
+import contextReducer from './slice/contextReducer';
+import appStateReducer from './slice/appStateSlice';
+import styleReducer from './slice/styleSlice';
+import roomCodeReducer from './slice/roomCodeSlice';
 
 const rootReducer = combineReducers({
   // Add desired slices here
diff --git a/app/src/tree/useResizeObserver.ts b/app/src/tree/useResizeObserver.ts
diff --git a/app/src/utils/createNonce.ts b/app/src/utils/createNonce.ts
@@ -1,7 +1,12 @@
 const { v4: uuidv4 } = require('uuid');
+// const Buffer  = require('buffer');
+
+
+// const buf = Buffer.from([0x62, 0x75, 0x66, 0x66, 0x65, 0x72]);
+// module.exports = buf;
 
 // Generate an arbitrary number
 // this arbitrary number will be used in CspHtmlWebpackPlugin and HtmlWebpackPlugin configuration in webpack
-module.exports = function() {
+module.exports = function () {
   return new Buffer.from(uuidv4()).toString('base64');
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -147,6 +147,7 @@
     "babel-polyfill": "^6.26.0",
     "bcryptjs": "^2.4.3",
     "body-parser": "^1.20.2",
+    "buffer": "^6.0.3",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "d3": "^7.6.1",
diff --git a/webpack.config.js b/webpack.config.js
@@ -15,7 +15,7 @@ module.exports = {
   // since JS can be written for both server / browser, the "target" specifies what environment webpack should write for
   target: 'web', // Our app can run without electron
   // The entry is where webpack begins assembling the dependency tree
-  entry: ['./app/src/index.js'], // The entry point of our app; these entry points can be named and we can also have multiple if we'd like to split the webpack bundle into smaller files to improve script loading speed between multiple pages of our app
+  entry: ['./app/src/index.tsx'], // The entry point of our app; these entry points can be named and we can also have multiple if we'd like to split the webpack bundle into smaller files to improve script loading speed between multiple pages of our app
   // the output is only created on npm run-prod-build
   output: {
     path: path.resolve(__dirname, 'app/dist'), // Where all the output files get dropped after webpack is done with them
diff --git a/webpack.development.js b/webpack.development.js
@@ -3,7 +3,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const merge = require('webpack-merge');
 const base = require('./webpack.config');
 const path = require('path');
-const nonce = require('./app/src/utils/createNonce')();
+const nonce = require('./app/src/utils/createNonce.ts')();
 const { DEV_PORT } = require('./config');
 
 // merges webpack.config.js with development specific configs
diff --git a/webpack.production.js b/webpack.production.js
@@ -3,7 +3,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const merge = require('webpack-merge');
 const base = require('./webpack.config');
 const path = require('path');
-const nonce = require('./app/src/utils/createNonce')();
+const nonce = require('./app/src/utils/createNonce.ts')();
 
 // merges webpack.config.js with production specific configs
 module.exports = merge(base, {
