[WIP] State management updates

.github/workflows/_implement-me-check-formatting.md

@@ -0,0 +1,48 @@
+# Check formatting workflow
+
+This is a fully-ready GitHub Actions worflow for verifying whether a
+new PR has been formatted with Prettier before the PR can go through.
+
+There are just some complications, explaining why it's an MD file right now:
+
+1. The moment the file gets added as a `.yml` file, it's going to make GitHub reject every single existing file in the codebase that has not been formatted yet. Unfortunately, not every iteration group has followed best practices, so there's a lot to clean up still.
+2. This can't be added as a commented-out `.yml` file because GitHub will try to run every single `.yml` file in the `workflows` directory, even if the file has no code to run. If GitHub can't run anything, it's going to spam your emails until you change something.
+
+The `package.json` file has a `format:check`command and`format:fix`command, both of which use Prettier. I would recommend these steps for rolling this feature:
+
+1. Create a separate branch
+2. Run `prettier:format`, which will run Prettier repo-wide and update any stray files.
+3. Copy the below code into a file named something like `check-formatting.yml`
+4. Commit the changes and create a new pull request. Make sure nothing has
+   been done other than running the formatting, so that in the off chance that something goes wrong, it'll be easy to roll things back.
+5. Merge the PR
+6. Start working on new features!
+
+With the file in place, you will need to make sure your code is formatted before being able to merge into main. Everybody has different preferences for how their code is set up, but with the large number of developers who've been involved with Swell, there need to be some ground rules.
+
+```yml
+name: Validate Code Formatting
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check Out Repo
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+      - name: Install NPM Modules
+        run: npm ci
+      - name: Check Prettier Formatting
+        run: npm run format:check
+```
+

.prettierrc

@@ -1,6 +1,12 @@
 {
-	"printWidth": 80,
-	"tabWidth": 2,
-	"singleQuote": true,
-	"arrowParens": "always"
-}
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "bracketSameLine": false
+}
+

TRPCBodyEntryForm.tsx

@@ -1,35 +1,28 @@
-import React, { useState } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { RootState } from './src/client/toolkit-refactor/store';
-import TextCodeArea from './src/client/components/main/sharedComponents/TextCodeArea';
-
 /**
- * renders entry form for TRPC request
+ * @file Renders entry form for an incoming tRPC request
  */
+import React from 'react';
+import { useAppSelector, useAppDispatch } from './src/client/rtk/store';
+import { newRequestBodySet } from './src/client/rtk/slices/newRequestSlice';
+import TextCodeArea from './src/client/components/main/sharedComponents/TextCodeArea';
 
-const TRPCBodyEntryForm = (props: any) => {
-  const { newRequestBodySet } = props;
-  const dispatch = useDispatch();
-  const newRequestBody = useSelector(
-    (store: RootState) => store.newRequest.newRequestBody
-  );
-  const { bodyContent } = newRequestBody;
-
-  const isDark = useSelector((store: RootState) => store.ui.isDark);
-  const [cmValue, setValue] = useState(bodyContent);
+const TRPCBodyEntryForm = () => {
+  const isDark = useAppSelector((store) => store.ui.isDark);
+  const newBody = useAppSelector((store) => store.newRequest.newRequestBody);
+  const dispatch = useAppDispatch();
 
   return (
     <div className="mt-3">
       <div className="composer-section-title">Body</div>
       <div id="gql-body-entry" className={`${isDark ? 'is-dark-400' : ''}`}>
         <TextCodeArea
           mode="application/json"
-          value={cmValue}
-          onChange={(value: string) => {
+          value={newBody.bodyContent}
+          onChange={(bodyContent) => {
             dispatch(
               newRequestBodySet({
-                ...newRequestBody,
-                bodyContent: value,
+                ...newBody,
+                bodyContent,
                 bodyIsNew: true,
               })
             );

main.js

@@ -1,3 +1,12 @@
+/**
+ * @file Defines the main entry point for the whole Electron app.
+ *
+ * @todo 2023-09-01 - Even if you don't convert this to a TS file, and just opt
+ * into the @ts-check comment, this file lights up with a lot of type errors.
+ * The code all seems to be working, but this will be one of the more involved
+ * conversions in the project.
+ */
+
 // https://github.com/electron/electron/issues/10257
 // Code fix to support NODE_EXTRA_CA_CERTS env. There is currently no other fixes to the NODE_TLS_REJECT_UNAUTHORIZED at the moment.
 
@@ -45,7 +54,6 @@ const url = require('url');
 const fs = require('fs');
 const log = require('electron-log');
 
-
 // proto-parser func for parsing .proto files
 const protoParserFunc = require('./main_process/protoParser.js');
 
@@ -65,10 +73,8 @@ require('./main_process/main_trpcController.js')();
 // require mac touchbar
 const { touchBar } = require('./main_process/main_touchbar.js');
 
-
-
-const contextMenu = require('electron-context-menu')
-contextMenu()
+const contextMenu = require('electron-context-menu');
+contextMenu();
 
 // configure logging
 // autoUpdater.logger = log;
@@ -216,6 +222,11 @@ app.on('ready', () => {
      * this is crucial code, and while VS Code will flag it as not being used, it
      * should not be removed. The servers must be required upon app startup (especially in
      * packaged versions) or else the packaged app would not recognize the servers at all.
+     *
+     * 2023-09-01 - Decided not to update these paths to use custom aliases,
+     * because require isn't able to recognize them. You can't Ctrl+Click to
+     * jump to the source file definition. If this file ever gets converted to a
+     * .ts file, though, you should be able to update these import pathss
      */
     const express = require('./src/server/server');
     const mockServer = require('./src/server/mockServer.js');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "swell",
-  "version": "1.16.0",
+  "version": "1.16.1",
   "description": "Swell",
   "main": "main.js",
   "repository": "https://github.com/open-source-labs/Swell",
@@ -18,7 +18,8 @@
     "test-jest": "jest",
     "test-mocha": "webpack --mode=production --config ./webpack.production.js && cross-env process.env.NODE_ENV=test mocha --timeout 3000 --exit",
     "test-mocha-zero": "webpack --mode=production --config ./webpack.production.js && cross-env process.env.NODE_ENV=test mocha --timeout 0 --exit",
-    "format": "prettier --write \"**/*.+(js|jsx| tsx| json|css|md)\"",
+    "format:check": "prettier . --check --ignore-path .gitignore",
+    "format:fix": "prettier . --write --ignore-path .gitignore",
     "lint": "eslint .",
     "lint:fix": "eslint --fix . ",
     "dev": "concurrently --success first \"webpack-dev-server --mode=development --config ./webpack.development.js\" \"nodemon --legacy-watch ./src/server/server.js\"",
@@ -232,7 +233,7 @@
     "ts-node": "^10.9.1",
     "typescript": "^4.6.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.72.0",
+    "webpack": "^5.88.2",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.8.1",
@@ -541,3 +542,4 @@
     }
   ]
 }
+

src/client/components/App.tsx

@@ -4,23 +4,22 @@ import Split from 'react-split';
 import { HashRouter } from 'react-router-dom';
 
 // Controllers
-import historyController from '../controllers/historyController';
-import collectionsController from '../controllers/collectionsController';
+import historyController from '~/controllers/historyController';
+import collectionsController from '~/controllers/collectionsController';
 
 // Local components
-// import UpdatePopUpContainer from './legacy-components/UpdatePopUpContainer';
-import HistoryOrWorkspaceContainer from './workspace/HistoryOrWorkspaceContainer';
-import NavBarContainer from './navbar/NavBarContainer';
-import MainContainer from './main/MainContainer';
+import HistoryOrWorkspaceContainer from '~/components/workspace/HistoryOrWorkspaceContainer';
+import NavBarContainer from '~/components/navbar/NavBarContainer';
+import MainContainer from '~/components/main/MainContainer';
 
 // Types
-import { WindowExt } from '../../types';
+import { WindowExt } from '~/types';
 
 // Error handling
-import ErrorBoundary from './utilities/ErrorBoundary/ErrorBoundary';
+import ErrorBoundary from '~/components/utilities/ErrorBoundary/ErrorBoundary';
 
 // Import styling
-import '../../assets/style/App.scss';
+import '~/assets/style/App.scss';
 
 const { api } = window as unknown as WindowExt;
 

src/client/components/main/GRPC-composer/GRPCAutoInputForm.tsx

@@ -3,7 +3,7 @@
 import React, { useState, useEffect } from 'react';
 import GRPCBodyEntryForm from './GRPCBodyEntryForm';
 import GRPCServiceOrRequestSelect from './GRPCServiceOrRequestSelect';
-import { $TSFixMe, NewRequestStreams } from '../../../../types';
+import { type $TSFixMe, type NewRequestStreams } from '~/types';
 
 interface Props {
   newRequestStreams: {
@@ -22,7 +22,6 @@ interface Props {
 }
 
 const GRPCAutoInputForm: React.FC<Props> = (props) => {
-
   //component state for service and request dropdown
   const [serviceOption, setServiceOption] = useState('Select Service');
   const [requestOption, setRequestOption] = useState('Select Request');
@@ -52,7 +51,7 @@ const GRPCAutoInputForm: React.FC<Props> = (props) => {
     let streamsArr = [props.newRequestStreams.streamsArr[0]];
     let streamContent = [''];
     setRequestOption('Select Request');
-    
+
     // the selected service name is saved in state of the store, mostly everything else is reset
     props.newRequestStreamsSet({
       ...props.newRequestStreams,
@@ -134,12 +133,12 @@ const GRPCAutoInputForm: React.FC<Props> = (props) => {
       }
     }
     //Deep copy streamsArr and streamCopy to reassign in store
-    const streamsArrCopy = structuredClone(streamsArr); 
-    const streamContentCopy = structuredClone(streamContent); 
+    const streamsArrCopy = structuredClone(streamsArr);
+    const streamContentCopy = structuredClone(streamContent);
 
     // push JSON formatted query in streamContent arr
     const queryJSON = JSON.stringify(results, null, 4);
-  
+
     if (streamsArrCopy[0] !== '') {
       streamsArrCopy[0].query = queryJSON;
     }

src/client/components/main/GRPC-composer/GRPCBodyEntryForm.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
+import { type $TSFixMe, type NewRequestStreams } from '~/types';
 import GRPCBodyStream from './GRPCBodyStream';
-import { $TSFixMe, NewRequestStreams } from '../../../../types';
 
 interface Props {
   newRequestStreams: NewRequestStreams;
@@ -16,12 +16,14 @@ const GRPCBodyEntryForm: React.FC<Props> = (props) => {
 
   // add additional streams only for CLIENT or BIDIRECTIONAL streaming
   const addStream = (): void => {
-    const streamsArr = structuredClone(props.newRequestStreams.streamsArr); 
-    const streamContent = structuredClone(props.newRequestStreams.streamContent); 
+    const streamsArr = structuredClone(props.newRequestStreams.streamsArr);
+    const streamContent = structuredClone(
+      props.newRequestStreams.streamContent
+    );
     // save query of initial stream body
     const firstBodyQuery: $TSFixMe = props.newRequestStreams.initialQuery;
     // construct new stream body obj & push into the streamsArr
-    const newStream: $TSFixMe  = {};
+    const newStream: $TSFixMe = {};
     newStream.id = props.newRequestStreams.count;
     newStream.query = firstBodyQuery;
     streamsArr.push(newStream);
@@ -37,7 +39,7 @@ const GRPCBodyEntryForm: React.FC<Props> = (props) => {
   };
 
   // event handler that updates state in the store when typing into the stream query body
-  const onChangeUpdateStream = (streamID: $TSFixMe , value: $TSFixMe ) => {
+  const onChangeUpdateStream = (streamID: $TSFixMe, value: $TSFixMe) => {
     // props.saveChanges(false);
     const streamsArr = [...props.newRequestStreams.streamsArr];
     const streamContent = [...props.newRequestStreams.streamContent];
@@ -55,21 +57,23 @@ const GRPCBodyEntryForm: React.FC<Props> = (props) => {
   };
 
   // for each stream body in the streamArr, render the GRPCBodyStream component
-  const streamArr = props.newRequestStreams.streamsArr.map((stream: $TSFixMe , index: $TSFixMe ) => (
-    <GRPCBodyStream
-      newRequestStreams={props.newRequestStreams}
-      newRequestStreamsSet={props.newRequestStreamsSet}
-      selectedPackage={props.newRequestStreams.selectedPackage}
-      selectedService={props.selectedService}
-      selectedRequest={props.selectedRequest}
-      selectedStreamingType={props.selectedStreamingType}
-      changeHandler={onChangeUpdateStream}
-      stream={stream}
-      key={index}
-      streamNum={index}
-      history={props.history}
-    />
-  ));
+  const streamArr = props.newRequestStreams.streamsArr.map(
+    (stream: $TSFixMe, index: $TSFixMe) => (
+      <GRPCBodyStream
+        newRequestStreams={props.newRequestStreams}
+        newRequestStreamsSet={props.newRequestStreamsSet}
+        selectedPackage={props.newRequestStreams.selectedPackage}
+        selectedService={props.selectedService}
+        selectedRequest={props.selectedRequest}
+        selectedStreamingType={props.selectedStreamingType}
+        changeHandler={onChangeUpdateStream}
+        stream={stream}
+        key={index}
+        streamNum={index}
+        history={props.history}
+      />
+    )
+  );
 
   //if client stream or bidirectional, the add stream btn will be rendered below the stream bodies
   let addStreamBtn;