Fixes #289 save history on demand. Added setting to enable or disable it

Author: kevincobain2000

ui/src/components/ApiAction.tsx

@@ -319,6 +319,8 @@ export default function ApiAction(props: Props) {
 
                 {activeTab == 'response' && (
                     <ApiActionResponse
+                        requestUri={requestUri}
+                        method={method}
                         responseHeaders={responseHeaders}
                         responseData={responseData}
                         timeTaken={timeTaken}

ui/src/components/App.tsx

@@ -30,6 +30,7 @@ export default function App() {
     const [showPut] = useLocalStorage('showPut', 'true');
     const [showPatch] = useLocalStorage('showPatch', 'true');
     const [showHead] = useLocalStorage('showHead', 'false');
+    const [savePreviousResponse] = useLocalStorage('savePreviousResponse', 'false');
 
     const searchOptions = {
         keys: ['uri', 'doc_block'],

ui/src/components/TopNav.tsx

@@ -39,6 +39,7 @@ export default function TopNav(props: Props) {
     const [showPut, setShowPut] = useLocalStorage('showPut', 'true');
     const [showPatch, setShowPatch] = useLocalStorage('showPatch', 'true');
     const [showHead, setShowHead] = useLocalStorage('showHead', 'false');
+    const [savePreviousResponse, setSavePreviousResponse] = useLocalStorage('savePreviousResponse', 'false');
 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const handleChangeGroupby = (e: any) => {
@@ -73,6 +74,9 @@ export default function TopNav(props: Props) {
         setShowHead(e.target.checked)
         handleChangeSettings(showGet, showPost, showDelete, showPut, showPatch, e.target.checked, sort, groupby)
     }
+    const handleSavePreviousResponse = (e: any) => {
+        setSavePreviousResponse(e.target.checked)
+    }
 
     const handleClearLocalStorage = () => {
         localStorage.clear()
@@ -147,7 +151,7 @@ export default function TopNav(props: Props) {
                             <div className="modal-box">
                                 <div className="modal-action float-right">
                                     <a href="#" className="btn btn-sm btn-ghost">
-                                        <XMarkIcon className="h-6 w-6" /> Close
+                                        <span className='text-error'> <XMarkIcon className="h-6 w-6 inline" /> Close</span>
                                     </a>
                                 </div>
                                 <h3 className="font-bold text-lg mt-7">
@@ -222,6 +226,18 @@ export default function TopNav(props: Props) {
                                         <input type="checkbox" onChange={handleChangeHead} className="toggle toggle-success" checked={showHead == 'true'} />
                                     </label>
                                 </div>
+                                <h4 className="font-bold mt-10">
+                                    <CircleStackIcon className="inline-block h-6 w-6 mr-1" />
+                                    Save Responses
+                                </h4>
+                                <div className='divider'></div>
+                                <div className="form-control">
+                                    <label className="label">
+                                        <span className="label-text">Save</span>
+                                        <input type="checkbox" onChange={handleSavePreviousResponse} className="toggle toggle-success" checked={savePreviousResponse == 'true'} />
+                                    </label>
+                                    <small className='pl-1'>Should you want to save previous response on local storage</small>
+                                </div>
                                 <h4 className="font-bold mt-10">
                                     <CircleStackIcon className="inline-block h-6 w-6 mr-1" />
                                     Storage
@@ -236,11 +252,6 @@ export default function TopNav(props: Props) {
                                         <button className="btn btn-sm btn-error" onClick={handleClearLocalStorage}>Clear</button>
                                     </label>
                                 </div>
-                                {/* <div className="modal-action">
-                                    <a href="#" className="btn btn-sm">
-                                        <XMarkIcon className="h-6 w-6" /> Close
-                                    </a>
-                                </div> */}
                             </div>
                         </div>
                     </div>

ui/src/components/elements/ApiActionRequest.tsx

@@ -76,8 +76,8 @@ export default function ApiActionRequest(props: Props) {
         <>
             <div className="form-control">
                 <label className="input-group input-group-sm">
-                    <span className={`method-${method} pr-2`}>{method}</span>
-                    <input type="text" defaultValue={requestUri} onChange={(e) => setRequestUri(e.target.value)} placeholder="Type here" className="focus:outline-none input w-4/5 input-bordered input-sm mr-2" />
+                    <span className={`method-${method} pr-1`}>{method}</span>
+                    <input type="text" defaultValue={requestUri} onChange={(e) => setRequestUri(e.target.value)} placeholder="Type here" className="focus:outline-none input w-4/6 input-bordered input-sm mr-2" />
                     <button className="btn btn-sm btn-success" onClick={handleSendRequest}>
                         GO <PaperAirplaneIcon className='inline-block w-4 h-4 ml-1' />
                     </button>

ui/src/components/elements/ApiActionResponse.tsx

@@ -1,12 +1,14 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import "ace-builds";
 import jsonWorkerUrl from 'ace-builds/src-min-noconflict/worker-json?url';
+
 ace.config.setModuleUrl('ace/mode/json_worker', jsonWorkerUrl);
 
 import AceEditor from 'react-ace';
 import "ace-builds/src-noconflict/mode-json";
 import "ace-builds/src-noconflict/theme-one_dark";
 import "ace-builds/src-noconflict/ext-language_tools";
+import useLocalStorage from 'react-use-localstorage';
 
 
 interface Props {
@@ -15,10 +17,19 @@ interface Props {
     timeTaken: number,
     responseStatus: number,
     serverMemory: string,
+    requestUri: string,
+    method: string,
 }
 
 export default function ApiActionResponse(props: Props) {
-    const { responseHeaders, responseData, timeTaken, responseStatus, serverMemory } = props
+    const { responseHeaders, responseData, timeTaken, responseStatus, serverMemory, requestUri, method } = props
+    const [savePreviousResponse] = useLocalStorage('savePreviousResponse', 'false');
+    const [previousResponse, setPreviousResponse] = useLocalStorage('previousResponse' + requestUri + method, '');
+    useEffect(() => {
+        if (responseData && savePreviousResponse === 'true') {
+            setPreviousResponse(responseData)
+        }
+    }, [])
 
     return (
         <>
@@ -48,11 +59,29 @@ export default function ApiActionResponse(props: Props) {
                     <br />
                 </>
             )}
-            {!responseData && (
+            {(!responseData && !previousResponse) && (
                 <div className='text-center text-sm text-slate-500'>
                     No Response Data
                 </div>
             )}
+            {(!responseData && previousResponse) && (
+                <div className="mockup-code mb-5">
+                    <span className='pl-5 text-sm text-warning'>Previous Response</span>
+                    <AceEditor
+                        maxLines={50}
+                        width='100%'
+                        mode="json"
+                        wrapEnabled={true}
+                        readOnly={true}
+                        value={previousResponse}
+                        theme="one_dark"
+                        onLoad={function (editor) { editor.renderer.setPadding(0); editor.renderer.setScrollMargin(5, 5, 5, 5); editor.renderer.setShowPrintMargin(false); }}
+                        editorProps={{
+                            $blockScrolling: true
+                        }}
+                    />
+                </div>
+            )}
             {responseData && (
                 <div className="mockup-code">
                     <span className='pl-5 text-sm text-slate-500'>RESPONSE</span>