Merge branch 'master' of https://github.com/open-source-labs/Swell

Author: nattiechan

README.md

@@ -50,8 +50,6 @@ Swell is a one-stop shop for sending and monitoring your API requests:
        style="display: block; margin: 10px auto 30px; border: 1px solid black;" />
 
 - _Send Requests Directly to an Endpoint_: You are able to immediately send a request to an endpoint OR stage a request in your workspace for multi-level testing.
-  <img src="./ReadMeGifs/Gifs/DirectSendRequest.gif"
-       style="display: block; margin: 10px auto 30px; border: 1px solid black;" />
 
 - _Scripting in Swell_: If you favor test-driven development, Swell allows you to write assertion tests to aid defining and testing backend API services.
   <img src="./ReadMeGifs/Gifs/Assertion-Testing.gif"
@@ -60,11 +58,8 @@ Swell is a one-stop shop for sending and monitoring your API requests:
 - _Workspaces_: Swell allows you to save workspaces for easier testing of multiple requests.
 
 - _Preview_: You can now view a rendered preview of certain API responses (HTML)
-  <img src="./ReadMeGifs/Gifs/AdditionalFeatures.gif"
-       style="display: block; margin: 10px auto 30px; border: 1px solid black;" />
+
 - _Collection Runner_: You can also stage requests in the workspace and automate the process of sending off each one. No need to manually press send on each one; instead each request will fire off in the order of staging.
-  <img src="./ReadMeGifs/Gifs/CollectionTest.gif"
-       style="display: block; margin: 10px auto 30px; border: 1px solid black;" />
 
 ## Experimental Features
 

src/client/components/main/MainContainer.tsx

@@ -100,14 +100,7 @@ const mapDispatchToProps = (dispatch: AppDispatch) => ({
 
 function MainContainer(props: $TSFixMeObject) {
   return (
-    <Box
-      sx={{
-        width: '75%',
-        // overflowY: 'scroll',
-        // display: 'flex',
-        // flexDirection: 'column'
-      }}
-    >
+    <Box sx={{ width: '75%' }}>
       <Split direction="vertical" gutterSize={5} style={{ height: '100%' }}>
         <Box sx={{ display: 'flex' }}>
           <Routes>
@@ -122,7 +115,10 @@ function MainContainer(props: $TSFixMeObject) {
             <Route path="/openapi" element={<OpenAPIComposer {...props} />} />
             <Route path="/webhook" element={<WebhookComposer {...props} />} />
             <Route path="/trpc" element={<TRPCComposer {...props} />} />
-            <Route path="/mockserver" element={<MockServerComposer {...props} />} />
+            <Route
+              path="/mockserver"
+              element={<MockServerComposer {...props} />}
+            />
           </Routes>
         </Box>
         <ResponsePaneContainer />

src/client/components/main/tRPC/TRPCMethodAndEndpointEntryForm.tsx

@@ -16,7 +16,7 @@ const TRPCMethodAndEndpointEntryForm = () => {
   const dispatch = useDispatch();
 
   useEffect(() => {
-    const closeDropdown = (event) => {
+    const closeDropdown = (event: MouseEvent) => {
       if (!dropdownEl.current.contains(event.target)) {
         setDropdownIsActive(false);
       }
@@ -48,7 +48,7 @@ const TRPCMethodAndEndpointEntryForm = () => {
     }
   };
 
-  const urlChangeHandler = (e) => {
+  const urlChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
     const url: string = e.target.value;
 
     dispatch(

src/client/controllers/reqResController.ts

@@ -146,7 +146,7 @@ const connectionController = {
   //   return this.openConnectionArray.find((obj) => (obj.id = id));
   // },
 
-  setReqResConnectionToClosed(id: number): void {
+  setReqResConnectionToClosed(id: string): void {
     const reqResArr = Store.getState().reqRes.reqResArray;
 
     const foundReqRes: ReqRes = JSON.parse(

src/client/toolkit-refactor/reqRes/reqResSlice.ts

@@ -5,6 +5,12 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { ReqRes } from '../../../types';
 
+/** 
+ * @todo based on current useage type def is innaccurate or incomplete
+ * currentReponse stores the last returned ReqRes type
+ * in theory currentResponse property is unnessecary as the last element in the
+ * reqResArray is the current response but it is used throughout the app
+ */
 type ReqResStore = {
   reqResArray: ReqRes[];
   currentResponse: ReqRes;