Merge pull request #39 from oslabs-beta/RachCleanup2

Helper & Redux folder cleanup

Author: rachelk585

app/src/helperFunctions/auth.ts

@@ -1,10 +1,14 @@
 const fetch = require('node-fetch');
 const isDev = process.env.NODE_ENV === 'development';
 const { DEV_PORT, API_BASE_URL } = require('../../../config');
+
 let serverURL = API_BASE_URL;
+
+//checks if we're in dev mode or not to reset the serverURL to localhost:8080
 if (isDev) {
   serverURL = `http://localhost:${DEV_PORT}`;
 }
+
 export const sessionIsCreated = (
   username: string,
   password: string,
@@ -37,6 +41,7 @@ export const sessionIsCreated = (
     .catch((err) => 'Error');
   return result;
 };
+
 export const newUserIsCreated = (
   username: string,
   email: string,

app/src/helperFunctions/cssRefresh.tsx

@@ -1,4 +1,5 @@
 // Removes old link to css and creates a new stylesheet link on demo render
+// this is not currently being used for the website version
 const cssRefresher = () => {
   const oldStylesheet = document.getElementById('Render Stylesheet')
   console.log(oldStylesheet);

app/src/helperFunctions/generateCode.ts

@@ -468,33 +468,8 @@ const generateUnformattedCode = (
   );`
     generatedCode += `\n}`;
     return generatedCode;
-    // return `${`import React, { useState, useEffect, useContext} from 'react';`}
-    // ${currComponent.name === 'App' ? contextImports : ''}
-    // ${
-    //   importReactRouter
-    //     ? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';`
-    //     : ``
-    // }
-    // ${createContextImport()}
-    // ${importsMapped}
-    // ${`const ${currComponent.name} = (props) => {`}
-    // ${createUseContextHook()}
-    // ${`${writeStateProps(currComponent.useStateCodes)}`}
-    // //  ------------------------------------------- added code below  -------------------------------------------
-    // ${createEventHandler()}
-    // //  ------------------------------------------- added code above  -------------------------------------------
-
-    //   return(
-    //     <>
-    // ${createRender()}
-    //     </>
-    //   );
-    // ${`}\n`}
-    // export default ${currComponent.name}
-    // `;
   }
-  //
-  // next.js component code
+  
   else if (projectType === 'Next.js') {
     return `
     import React, { useState } from 'react';
@@ -549,8 +524,6 @@ const generateUnformattedCode = (
 };
 // formats code with prettier linter
 const formatCode = (code: string) => {
-  // in test environment, window.api is not defined,
-  // so we reference original prettier format function instead
   if (process.env.NODE_ENV === 'test') {
     const { format } = require('prettier');
     return format(code, {
@@ -560,8 +533,6 @@ const formatCode = (code: string) => {
       jsxBracketSameLine: true,
       parser: 'babel'
     });
-    // } else if (process.env.NODE_ENV === 'production') {
-    // return window.api.formatCode(code);
   } else {
     return code;
   }

app/src/helperFunctions/projectGetSaveDel.ts

@@ -1,12 +1,12 @@
-import { letterSpacing } from '@mui/system';
-
 const isDev = process.env.NODE_ENV === 'development';
 const { DEV_PORT, API_BASE_URL } = require('../../../config.js');
 let serverURL = API_BASE_URL;
 
+//check if we're in dev mode
 if (isDev) {
   serverURL = `http://localhost:${DEV_PORT}`;
 }
+
 export const getProjects = (): Promise<any> => {
   let userId = window.localStorage.getItem('ssid');
   const body = JSON.stringify({ userId });

app/src/helperFunctions/renderChildren.tsx

@@ -1,19 +1,19 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { ChildElement } from '../interfaces/Interfaces';
 import DirectChildComponent from '../components/main/DirectChildComponent';
 import DirectChildHTML from '../components/main/DirectChildHTML';
 import DirectChildHTMLNestable from '../components/main/DirectChildHTMLNestable';
 import SeparatorChild from '../components/main/SeparatorChild';
 import RouteLink from '../components/main/RouteLink';
-import StateContext from '../context/context';
 import { useSelector } from 'react-redux';
+import { RootState } from '../redux/store';
 
 // helper method to render all direct children of a component
 // direct children are clickable and draggable
 // direct children may also have their own indirect children (grandchildren, great-grandchildren, etc) which are not draggable and clickable
 // there are four types of direct children that can be rendered on the screen
 const renderChildren = (children: ChildElement[]) => {
-  const state = useSelector(store => store.appState)
+  const state = useSelector((store: RootState) => store.appState)
 
   return children.map((child: ChildElement, i: number) => {
     const { type, style, childId, children, attributes, name } = child;

app/src/helperFunctions/zipFiles.ts

@@ -1,17 +1,24 @@
 import { saveAs } from 'file-saver';
 const JSZip = require("jszip");
 
+//function to create a zip file for export in web app
 const zipFiles = (state) => {
+  //initializes zip
   var zip = new JSZip();
   let reacTypeApp = zip.folder('ReacTypeApp');
+  //creates component folder inside of zip folder
   let componentFolder = reacTypeApp.folder('componentfolder');
+  //writes a file with default index.html code
   reacTypeApp.file('index.html', '<!DOCTYPE html> <html>   <head>     <meta charset="UTF-8" />     <link rel="stylesheet" href="styles.css">     <title>ReacType App</title>   </head>   <body>     <div id="root"></div>   </body> </html>');
+  //writes each component as its own file in the component folder
   for (let i in state.components){
     componentFolder.file(`${state.components[i].name}.jsx`, state.components[i].code);
   }
+  //writes our css file if we have a css file stored in local storage
   if(localStorage.getItem('css')){
     reacTypeApp.file('style.css', localStorage.getItem('css'));
   }
+  //zips the file and saves to local machine
   zip.generateAsync({type:"blob"})
   .then(function(content) {
     // see FileSaver.js

app/src/redux/HTMLTypes.ts

@@ -9,6 +9,8 @@ import {
   HTMLType
 } from '../interfaces/Interfaces';
 
+//properties for all HTML components
+
 const HTMLTypes: HTMLType[] = [
   {
     id: 11,

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

@@ -5,6 +5,8 @@ const initialState = {
   input: ``
 };
 
+//realtime updates for the code preview
+
 const codePreviewSlice = createSlice({
   name: 'codePreview',
   initialState,

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

@@ -1,5 +1,4 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-// import type { RootState } from '../redux/store';
 
 // -------------------------//
 // interfaces for all methods // calling actions payloads type referencss assigning type // typesccript

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

@@ -7,6 +7,8 @@ const initialState = {
     isThemeLight: null,
   }
 
+//allows us to set style for themes
+
   const styleSlice = createSlice({
     name: 'style',
     initialState,

app/src/redux/store.ts

@@ -23,12 +23,7 @@ const store = configureStore({
 
     return getDefaultMiddleware({
       serializableCheck: {
-        // Ignore the `configToggle` action type
-        // ignoredActions: ['configToggle'],
-        // Ignore these field paths in all actions
-        // ignoredActionPaths: ['meta.arg', 'payload.timestamp'],
         // Ignore these paths in the state
-        // ignoredPaths: ignoredPaths,
         ignoredPaths
       }
     });