Merge pull request #9 from oslabs-beta/subscription

Added comment and cleaned up code

Author: nqnguyen1

main.js

@@ -519,8 +519,3 @@ ipcMain.on('stop-mock-server', () => {
     console.log('No mock server to kill');
   }
 });
-
-ipcMain.on('error', (event, errorMessage) => {
-  console.log(errorMessage);
-  dialog.showErrorBox('Title', errorMessage);
-});

main_process/main_trpcController.js

@@ -5,16 +5,19 @@ const { ipcMain } = require('electron');
 const trpcController = {
   makeFetch: async function (event, reqRes, get, post) {
     try {
+      // wrap it in a try catch block so if anything goes wrong we can just send the error  to the front end instead of having no response
       reqRes.timeSent = Date.now();
+      //these will contain data about the response that we will get back from our get/post request
       const cookies = [];
       const getHeaders = {};
       const postHeaders = {};
       const events = [];
 
-      const reqArr = [get, post];
+      const reqArr = [get, post]; // our array of request, put into an array in order to use promise.all easier
       const resArr = await Promise.all(
         reqArr.map((req) => {
           if (req) {
+            // only make a request if it exists
             return fetch(req.url, {
               // credentials: req.credentials,
               // mode: req.mode,
@@ -26,12 +29,14 @@ const trpcController = {
               ...(req.body && { body: JSON.stringify(req.body) }),
             });
           } else {
-            return Promise.resolve(false);
+            return Promise.resolve(false); //if it doesnt exist we can simply return false
           }
         })
       );
       reqRes.timeReceived = Date.now();
       resArr.forEach((res, index) => {
+        // here we will combine cookies recieved from both request into one array, however we will seperate out the header by post/get request
+        // was sleep-deprived should have also seperate cookie into get/post cookie
         if (res) {
           const headersResponse = res.headers.raw();
           if (headersResponse['set-cookie']) {
@@ -54,27 +59,31 @@ const trpcController = {
       });
 
       const resData = await Promise.all(
+        //if there was a response we will parse it if not we will just return it (which is just the value of false)
         resArr.map((res) => {
           return res ? res.json() : res;
         })
       );
-      console.dir(resData, { depth: null });
+      //attach meta data about the response onto the reqRes object to send back to front end
       resData.forEach((res) => events.push(res));
       reqRes.response.cookies = cookies;
       reqRes.response.events = events;
       reqRes.response.headers = [getHeaders, postHeaders];
       reqRes.connection = 'closed';
       reqRes.connectionType = 'plain';
-      event.sender.send('reqResUpdate', reqRes);
+      event.sender.send('reqResUpdate', reqRes); //send object back to front end
     } catch (error) {
+      //if error we will push the error into event to be display
       reqRes.connection = 'error';
       reqRes.error = error;
       reqRes.response.events.push(error);
-      event.sender.send('reqResUpdate', reqRes);
+      event.sender.send('reqResUpdate', reqRes); // send updated object back to front end
     }
   },
   parseOptionForFetch(reqResObject, method, procedures) {
+    // this method using the data attach to the response property to construct an object that we could use to easily make the neccessary request
     function parseString(str) {
+      //this function is use to parse user inputted argument from json into javascript
       if (str === 'true') {
         return true;
       }
@@ -99,34 +108,27 @@ const trpcController = {
         return JSON.parse(str);
       }
     }
-    const { headers, cookie } = reqResObject.request;
+    const { headers, cookie } = reqResObject.request; //grab the headers and cookie inputted by user
 
-    const formattedHeaders = {};
+    const formattedHeaders = {}; //header object
     headers.forEach((head) => {
       if (head.active) {
         formattedHeaders[head.key] = head.value;
       }
     });
     if (cookie) {
+      //parses cookie data to attach to option object
       cookie.forEach((cookie) => {
         const cookieString = `${cookie.key}=${cookie.value}`;
         // attach to formattedHeaders so options object includes this
-
         formattedHeaders.cookie = formattedHeaders.cookie
           ? formattedHeaders.cookie + ';' + cookieString
           : cookieString;
       });
     }
 
-    const outputObj = {
-      method,
-      mode: 'cors', // no-cors, cors, *same-origin
-      cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
-      credentials: 'include', // include, *same-origin, omit
-      headers: formattedHeaders,
-      redirect: 'follow', // manual, *follow, error
-      referrer: 'no-referrer', // no-referrer, *client
-    };
+    // here we will construct the url and the body using data inside the reqRes obj
+    // because a user could batch procedures together/ we need to account for the request object to contain data for both a get request and a post request
     let url = '';
     const body = {};
     procedures.forEach((procedure, index) => {
@@ -148,34 +150,43 @@ const trpcController = {
         '?batch=1' +
         `&input=${encodeURIComponent(JSON.stringify(body))}`;
     }
-    outputObj.url = url;
+
+    const outputObj = {
+      // the main object that will get returned
+      url,
+      method,
+      mode: 'cors', // no-cors, cors, *same-origin
+      cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+      credentials: 'include', // include, *same-origin, omit
+      headers: formattedHeaders,
+      redirect: 'follow', // manual, *follow, error
+      referrer: 'no-referrer', // no-referrer, *client
+    };
     return outputObj;
   },
 
   openRequest: async function (event, reqRes) {
-    // const reqRes = Object.assign({}, reqResOriginal);
-    // reqRes.response = Object.assign({}, reqRes.response);
-    const procedures = reqRes.request.procedures;
+    const procedures = reqRes.request.procedures; // grabbing all of the procedures out of the reqRes object
+
+    //filter the procedures into either query or mutate in order to make the appropriate http request for each procedure
+    // all query procedure will be made with a get request
+    // all mutation procedure will be made with a post request
     const getReq = procedures.filter(
       (procedure) => procedure.method === 'QUERY'
     );
     const postReq = procedures.filter(
       (procedure) => procedure.method === 'MUTATE'
     );
 
+    // parsing data from the reqRes object to construct either a get/post option object that contains everything we need to make our get/post http request
     const getOption = getReq.length
       ? this.parseOptionForFetch(reqRes, 'GET', getReq)
       : false;
     const postOption = postReq.length
       ? this.parseOptionForFetch(reqRes, 'POST', postReq)
       : false;
 
-    const updatedReqRes = await this.makeFetch(
-      event,
-      reqRes,
-      getOption,
-      postOption
-    );
+    this.makeFetch(event, reqRes, getOption, postOption); // where we will finally make the request inside of makeFetch
   },
   cookieFormatter(cookieArray) {
     return cookieArray.map((eachCookie) => {
@@ -201,3 +212,4 @@ module.exports = () => {
     trpcController.openRequest(event, reqResObj);
   });
 };
+

src/client/components/main/TRPC-composer/TRPCComposer.tsx

@@ -6,8 +6,8 @@ import SendRequestButton from '../sharedComponents/requestButtons/SendRequestBut
 import TRPCMethodAndEndpointEntryForm from './TRPCMethodAndEndpointEntryForm';
 // Import Redux hooks
 import { useSelector, useDispatch } from 'react-redux';
-// Import Actions from RTK slice
 
+// Import Actions from RTK slice
 import historyController from '../../../controllers/historyController';
 import connectionController from '../../../controllers/reqResController';
 
@@ -26,15 +26,23 @@ import { responseDataSaved } from '../../../toolkit-refactor/slices/reqResSlice'
  */
 
 const PROCEDURE_DEFAULT = {
-  method: 'QUERY',
-  endpoint: '',
-  variable: '',
+  //the default format for whenever a new prcedure get add
+  method: 'QUERY', // the type of method either query or mutate
+  endpoint: '', // endpoint for this specific procedure
+  variable: '', // argument that is to be attach to this procedure
 };
 
-// {type:"",payload:{index,value}}
+//************** reducer function******************** */
+//  this function is used to manage the main state of this component which is an array of procedures [{method,endpoint,variable}]
+//  it will take in the old state (array of procedures) as well as an action object where the type will dictate which action will get trigger
+// The action object wil also contain the index as well as the new value for the procedure that is being manipulated (all inside of action.payload)
+// after its done manipulating the state it will return the updated array that will be use as the new procedures state
+
+//********************************** */
 
 function reducer(procedures, action) {
   if (action.type === 'METHOD') {
+    //
     const proceduresCopy = [...procedures];
     const procedure = proceduresCopy[action.payload.index];
     const newState = {
@@ -74,17 +82,20 @@ function reducer(procedures, action) {
 }
 
 export default function TRPCComposer(props) {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch(); // dispatch for main redux store
 
-  const [showSubscription, setShowSubscription] = useState(false);
+  const [showSubscription, setShowSubscription] = useState(false); // manage subscription component
   const subscriptionHandler = (bool) => {
     setShowSubscription(bool);
   };
+
   const [procedures, proceduresDipatch] = useReducer(reducer, [
+    //userReducer hook to manage the main state (the array of procedures)
     PROCEDURE_DEFAULT,
   ]);
 
   const {
+    //grabbing all neccessary information to build a new reqRes object from the main redux store through props drilling
     newRequestFields,
     newRequestFields: {
       gRPC,
@@ -121,38 +132,12 @@ export default function TRPCComposer(props) {
   const newRequest = useSelector((state: RootState) => state.newRequest);
 
   const addProcedures = () => {
+    // reducer dispatch for adding a new procedure to the procedures array
     proceduresDipatch({ type: 'ADD' });
   };
 
-  const dispatchTRPCResponse = (tRPCResponse) => {
-    const newCurrentResponse: any = {
-      checkSelected: false,
-      checked: false,
-      connection: 'closed',
-      connectionType: 'plain',
-      createdAt: new Date(),
-      gRPC: false,
-      graphQL: false,
-      host: requestFields.url,
-      id: uuid(),
-      minimized: false,
-      path: '/',
-      protoPath: undefined,
-      protocol: 'http://',
-      request: { ...newRequest },
-      tab: undefined,
-      timeReceived: null,
-      timeSent: null,
-      url: requestFields.url,
-      webrtc: false,
-      response: {
-        events: [tRPCResponse],
-      },
-    };
-    dispatch(responseDataSaved(newCurrentResponse));
-  };
-
   const sendRequest = async () => {
+    // THE MAIN FUNCTION to both compose the main reqRes object as well as sending it to the back end
     const id = uuid();
     const headers = newRequest.newRequestHeaders.headersArr.filter(
       (x) => x.active
@@ -199,11 +184,9 @@ export default function TRPCComposer(props) {
     historyController.addHistoryToIndexedDb(reqRes);
     reqResItemAdded(reqRes);
 
-    //reset for next request
-    // composerFieldsReset();
-    // connectionController.openReqRes(reqRes.id);
+    // saving the reqRes object to the array of reqRes managed by the redux store
     dispatch(responseDataSaved(reqRes));
-    connectionController.openReqRes(reqRes.id);
+    connectionController.openReqRes(reqRes.id); // passing the reqRes object to the connectionController inside of reqRes controller
   };
 
   return (

src/client/components/main/TRPC-composer/TRPCMethodAndEndpointEntryForm.tsx

@@ -14,6 +14,7 @@ const TRPCMethodAndEndpointEntryForm = () => {
   const dispatch = useDispatch();
 
   const urlChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    //update global redux store everytime user make changes to url
     const url: string = e.target.value;
 
     dispatch(

src/client/components/main/TRPC-composer/TRPCPrceduresEndPoint.tsx

@@ -22,6 +22,7 @@ const TRPCPrceduresEndPoint = (props) => {
     return () => document.removeEventListener('click', closeDropdown);
   }, []);
 
+  /// these functions exists to dispatch function to the reducer function inside of main trpc composer file.
   const methodHandler = (method) => {
     props.proceduresDipatch({
       type: 'METHOD',
@@ -116,3 +117,4 @@ const TRPCPrceduresEndPoint = (props) => {
 };
 
 export default TRPCPrceduresEndPoint;
+

src/client/components/main/TRPC-composer/TRPCProcedure.tsx

@@ -3,6 +3,7 @@ import TRPCVariableForm from './TRPCVariableForm';
 import TRPCPrceduresEndPoint from './TRPCPrceduresEndPoint';
 
 export default function TRPCProcedure(props) {
+  //renders each procedure
   return (
     <div style={container}>
       <TRPCPrceduresEndPoint
@@ -24,3 +25,4 @@ const container = {
   border: '1px solid black',
   padding: '10px 0px',
 };
+

src/client/components/main/TRPC-composer/TRPCProceduresContainer.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import TRPCProcedure from './TRPCProcedure';
 
 export default function TRPCProceduresContainer(props) {
+  //renders all of the procedures inside the procedures array
   const proceduresJSX = props.procedures.map((procedure, index) => {
     return (
       <TRPCProcedure
@@ -25,3 +26,4 @@ const h3Styles = {
   fontSize: '1.17em',
   fontWeight: 'bold',
 };
+

src/client/components/main/TRPC-composer/TRPCSubscriptionContainer.tsx

@@ -25,6 +25,7 @@ export default function TRPCSubscriptionContainer(props) {
   };
   let sub;
   const startSubscription = async () => {
+    setsubscriptionStarted(true);
     try {
       const wsClient = createWSClient({
         url: link,
@@ -58,11 +59,10 @@ export default function TRPCSubscriptionContainer(props) {
           });
         },
       });
-      setsubscriptionStarted(true);
+
       setResponseBody(`Subscription at ${endpoint} started`);
     } catch (e) {
-      console.log(e);
-      api.send('error', JSON.stringify(e));
+      setResponseBody(JSON.stringify(e));
     }
   };
   const endSubscription = () => {
@@ -138,3 +138,4 @@ const h3Styles = {
   fontSize: '1.17em',
   fontWeight: 'bold',
 };
+

src/client/components/main/TRPC-composer/TRPCVariableForm.tsx

@@ -4,8 +4,10 @@ import { useSelector } from 'react-redux';
 import { vscodeDark } from '@uiw/codemirror-theme-vscode';
 
 export default function TRPCVariableForm(props) {
+  // input for for user to attach argument with their procedures
   const isDark = useSelector((store: any) => store.ui.isDark);
   const onChangeHandler = (string) => {
+    // this function dispatch action to the main reducer function inside of trpc composer
     props.proceduresDipatch({
       type: 'VARIABLE',
       payload: { index: props.index, value: string },
@@ -25,3 +27,4 @@ export default function TRPCVariableForm(props) {
     </div>
   );
 }
+

src/client/components/main/response-composer/EventsContainer.tsx

@@ -34,6 +34,7 @@ function EventsContainer({ currentResponse }: EventsContainerProps) {
   }
   const { events, headers } = response;
   let responseBody = '';
+  //check if its a trpc response
   if (currentResponse.trpc) {
     events.forEach((event: any, idx: number) => {
       if (event) {