From 9c8e0a20ed7fd62ec64ad43176168142750f09fc Mon Sep 17 00:00:00 2001
From: Kartik Gupta <84975264+kartik-gupta-ij@users.noreply.github.com>
Date: Sun, 2 Apr 2023 21:16:38 +0530
Subject: [PATCH 1/4] Saved Code Feature added

---
 .../CodeEditorWindow/Menu/history.js          |  46 ++--
 src/components/CodeEditorWindow/Menu/index.js |  27 ++-
 .../CodeEditorWindow/Menu/savedCode.js        | 226 ++++++++++++++++++
 .../CodeEditorWindow/config/RequesFromCode.js |   6 +-
 4 files changed, 271 insertions(+), 34 deletions(-)
 create mode 100644 src/components/CodeEditorWindow/Menu/savedCode.js

diff --git a/src/components/CodeEditorWindow/Menu/history.js b/src/components/CodeEditorWindow/Menu/history.js
index aa063263..d4712ceb 100644
--- a/src/components/CodeEditorWindow/Menu/history.js
+++ b/src/components/CodeEditorWindow/Menu/history.js
@@ -10,11 +10,11 @@ import PropTypes from "prop-types";
 function History({ state, code, handleEditorChange, toggleDrawer }) {
 
   const [viewCode, setViewCode] = React.useState("//Selected Code");
-  const [currentSavedCodes, setCurrentSavedCodes] = useState(localStorage.getItem("currentSavedCodes") ? JSON.parse(localStorage.getItem("currentSavedCodes")) : []);
+  const [history, setHistory] = useState(localStorage.getItem("history") ? JSON.parse(localStorage.getItem("history")) : []);
 
 
   useEffect(() => {
-    setCurrentSavedCodes(localStorage.getItem("currentSavedCodes") ? JSON.parse(localStorage.getItem("currentSavedCodes")) : []);
+    setHistory(localStorage.getItem("history") ? JSON.parse(localStorage.getItem("history")) : []);
   }, [state])
 
   function formatJSON(val = {}) {
@@ -77,11 +77,11 @@ function History({ state, code, handleEditorChange, toggleDrawer }) {
         color="error"
         onClick={
           () => {
-            const index = currentSavedCodes.indexOf(data)
-            const updateCode = [...currentSavedCodes]
+            const index = history.indexOf(data)
+            const updateCode = [...history]
             updateCode.splice(index, 1);
-            localStorage.setItem("currentSavedCodes", JSON.stringify(updateCode));
-            setCurrentSavedCodes(JSON.parse(localStorage.getItem("currentSavedCodes")))
+            localStorage.setItem("history", JSON.stringify(updateCode));
+            setHistory(JSON.parse(localStorage.getItem("history")))
             return;
           }}
       >
@@ -94,8 +94,8 @@ function History({ state, code, handleEditorChange, toggleDrawer }) {
       <SwipeableDrawer
         anchor="top"
         open={state}
-        onClose={toggleDrawer(false)}
-        onOpen={toggleDrawer(true)}
+        onClose={toggleDrawer("history", false)}
+        onOpen={toggleDrawer("history", true)}
       >
         <Box
           sx={{
@@ -116,7 +116,7 @@ function History({ state, code, handleEditorChange, toggleDrawer }) {
                 History Mode
               </Typography>
             </Stack>
-            {currentSavedCodes.length === 0 &&
+            {history.length === 0 &&
               (
                 <Stack direction="row" spacing={2} >
                   <Typography variant="h6" m={2} gutterBottom>
@@ -132,19 +132,19 @@ function History({ state, code, handleEditorChange, toggleDrawer }) {
               spacing={2}
               m={2}
             >
-              {currentSavedCodes.length > 0 &&
-                <div style={{ height: "375px" , width: '100%' }}>
+              {history.length > 0 &&
+                <div style={{ height: "375px", width: '100%' }}>
                   <DataGrid
-                       sx={{
-                        "&.MuiDataGrid-root .MuiDataGrid-cell:focus-within": {
-                           outline: "none !important",
-                        },
-                        "& .MuiDataGrid-columnHeader:focus-within, & .MuiDataGrid-columnHeader:focus":
-                        {
-                          outline: "none !important",
-                        },
-                     }}
-                    rows={currentSavedCodes}
+                    sx={{
+                      "&.MuiDataGrid-root .MuiDataGrid-cell:focus-within": {
+                        outline: "none !important",
+                      },
+                      "& .MuiDataGrid-columnHeader:focus-within, & .MuiDataGrid-columnHeader:focus":
+                      {
+                        outline: "none !important",
+                      },
+                    }}
+                    rows={history}
                     columns={columns}
                     initialState={{
                       pagination: {
@@ -193,7 +193,7 @@ function History({ state, code, handleEditorChange, toggleDrawer }) {
                 onClick={
                   () => {
                     handleEditorChange("code", `${viewCode} \n${code}`)
-                    toggleDrawer(false)();
+                    toggleDrawer("history", false)();
                   }}>
                 Apply Code
               </Button>
@@ -201,7 +201,7 @@ function History({ state, code, handleEditorChange, toggleDrawer }) {
                 key={"close"}
                 variant="outlined"
                 color="error"
-                onClick={toggleDrawer(false)}
+                onClick={toggleDrawer("history", false)}
               >
                 Close
               </Button>
diff --git a/src/components/CodeEditorWindow/Menu/index.js b/src/components/CodeEditorWindow/Menu/index.js
index 3cf1af74..3238750a 100644
--- a/src/components/CodeEditorWindow/Menu/index.js
+++ b/src/components/CodeEditorWindow/Menu/index.js
@@ -1,14 +1,18 @@
 import React from 'react';
-import {  Button, Stack } from '@mui/material'
-import  History  from './history';
+import { Button, Stack } from '@mui/material'
+import History from './history';
 import PropTypes from "prop-types";
+import SavedCode from './savedCode';
 
 
 function Menu({ code, handleEditorChange }) {
-  const [state, setState] = React.useState(false);
-  
-  const toggleDrawer = (open) => () => {
-    setState(open);
+  const [state, setState] = React.useState({
+    history: false,
+    savedCode: false,
+  });
+
+  const toggleDrawer = (name, open) => () => {
+    setState({ ...state, [name]: open });
   };
 
   return (
@@ -21,10 +25,17 @@ function Menu({ code, handleEditorChange }) {
           mb: 1,
           borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
         }}>
-        <Button onClick={toggleDrawer(true)}>History</Button>
+        <Button onClick={toggleDrawer("history", true)}>History</Button>
+        <Button onClick={toggleDrawer("savedCode", true)}>Saved Code</Button>
       </Stack>
       <History
-        state={state}
+        state={state.history}
+        code={code}
+        handleEditorChange={handleEditorChange}
+        toggleDrawer={toggleDrawer}
+      />
+      <SavedCode
+        state={state.savedCode}
         code={code}
         handleEditorChange={handleEditorChange}
         toggleDrawer={toggleDrawer}
diff --git a/src/components/CodeEditorWindow/Menu/savedCode.js b/src/components/CodeEditorWindow/Menu/savedCode.js
new file mode 100644
index 00000000..26608746
--- /dev/null
+++ b/src/components/CodeEditorWindow/Menu/savedCode.js
@@ -0,0 +1,226 @@
+import React, { useEffect, useState } from 'react';
+import { SwipeableDrawer, Button, Box, Stack, TextField, Typography } from '@mui/material'
+import { DataGrid } from '@mui/x-data-grid';
+import DeleteIcon from '@mui/icons-material/Delete';
+import Editor from "@monaco-editor/react";
+import PropTypes from "prop-types";
+
+
+
+function SavedCode({ state, code, handleEditorChange, toggleDrawer }) {
+
+    const [viewCode, setViewCode] = React.useState(`//Current Editor Code: \n${code}`);
+    console.log(code);
+    const [saveNameText, setSaveNameText] = useState("");
+    const [currentSavedCodes, setCurrentSavedCodes] = useState(localStorage.getItem("currentSavedCodes") ? JSON.parse(localStorage.getItem("currentSavedCodes")) : []);
+
+
+    useEffect(() => {
+        setCurrentSavedCodes(localStorage.getItem("currentSavedCodes") ? JSON.parse(localStorage.getItem("currentSavedCodes")) : []);
+        setViewCode(`//Current Editor Code: \n${code}`);
+    }, [state])
+
+    function saveCode() {
+        if (saveNameText !== "") {
+            const data = [...currentSavedCodes, { name: saveNameText, code: code, time: new Date().toLocaleTimeString(), date: new Date().toLocaleDateString() }]
+            localStorage.setItem("currentSavedCodes", JSON.stringify(data));
+            setCurrentSavedCodes(JSON.parse(localStorage.getItem("currentSavedCodes")))
+            setSaveNameText("");
+            return;
+        }
+    }
+
+    const columns = [
+        {
+            field: "name",
+            headerName: 'Name',
+            minWidth: 100,
+            valueGetter: (params) => params.row.name,
+            flex: 1,
+        },
+        {
+            field: "time",
+            headerName: 'Time',
+            width: 100,
+            valueGetter: (params) => params.row.time,
+        },
+        {
+            field: "date",
+            headerName: 'Date',
+            width: 100,
+            valueGetter: (params) => params.row.date,
+        },
+        {
+            field: "delete",
+            headerName: "Delete",
+            width: 100,
+            align: "center",
+            headerAlign: "center",
+            renderCell: (params) => deleteIcon(params.row)
+        },
+
+
+    ];
+    function deleteIcon(data) {
+        return (
+            <Button
+                color="error"
+                onClick={
+                    () => {
+                        const index = currentSavedCodes.indexOf(data)
+                        const updateCode = [...currentSavedCodes]
+                        updateCode.splice(index, 1);
+                        localStorage.setItem("currentSavedCodes", JSON.stringify(updateCode));
+                        setCurrentSavedCodes(JSON.parse(localStorage.getItem("currentSavedCodes")))
+                        return;
+                    }}
+            >
+                <DeleteIcon />
+            </Button>
+        );
+    }
+    return (
+        <React.Fragment key={"SavedCode"}>
+            <SwipeableDrawer
+                anchor="top"
+                open={state}
+                onClose={toggleDrawer("savedCode", false)}
+                onOpen={toggleDrawer("savedCode", true)}
+            >
+                <Box
+                    sx={{
+                        width: "100%",
+                        height: "100%",
+                        display: "flex",
+                    }}
+                >
+                    <Box
+                        sx={{
+                            width: "60%",
+                            height: "100%",
+                            overflow: "hidden",
+                            overflowY: "scroll",
+                        }}>
+                        <Typography variant="h5" m={2} gutterBottom>
+                            Saved Code
+                        </Typography>
+                        <Stack direction="row" spacing={2}>
+
+                            <Typography variant="h6" m={2} gutterBottom>
+                                Name Code :
+                                <TextField
+                                    placeholder=" Required"
+                                    variant="standard"
+                                    value={saveNameText}
+                                    onChange={(e) => {
+                                        setSaveNameText(e.target.value);
+                                    }}
+                                />
+                                <Button onClick={saveCode}>Save</Button>
+                            </Typography>
+                        </Stack>
+                        {currentSavedCodes.length === 0 &&
+                            (
+                                <Stack direction="row" spacing={2} >
+                                    <Typography variant="h6" m={2} gutterBottom>
+                                        No save code found
+                                    </Typography>
+                                </Stack>
+                            )
+                        }
+                        <Stack
+                            direction="column"
+                            justifyContent="center"
+                            alignItems="stretch"
+                            spacing={2}
+                            m={2}
+                        >
+                            {currentSavedCodes.length > 0 &&
+                                <div style={{ height: "375px", width: '100%' }}>
+                                    <DataGrid
+                                        sx={{
+                                            "&.MuiDataGrid-root .MuiDataGrid-cell:focus-within": {
+                                                outline: "none !important",
+                                            },
+                                            "& .MuiDataGrid-columnHeader:focus-within, & .MuiDataGrid-columnHeader:focus":
+                                            {
+                                                outline: "none !important",
+                                            },
+                                        }}
+                                        rows={currentSavedCodes}
+                                        columns={columns}
+                                        initialState={{
+                                            pagination: {
+                                                paginationModel: {
+                                                    pageSize: 5,
+                                                },
+                                            },
+                                        }}
+                                        pageSizeOptions={[5, 10, 15]}
+                                        rowsPerPageOptions={[5, 10]}
+                                        getRowId={(row) => `${row.time} ${row.date}`}
+                                        onRowClick={(params) => {
+                                            setViewCode(params.row.code)
+                                        }}
+                                    />
+                                </div>
+                            }
+                        </Stack>
+
+                    </Box>
+                    <Box
+                        sx={{
+                            width: "40%",
+                            height: "100%",
+                        }}
+                        m={2}>
+                        <Editor
+                            height="400px"
+                            value={(viewCode)}
+                            options={{
+                                scrollBeyondLastLine: false,
+                                fontSize: 12,
+                                wordWrap: "on",
+                                minimap: { enabled: false },
+                                automaticLayout: true,
+                                readOnly: true,
+                                mouseWheelZoom: true,
+                            }}
+                        />
+
+                        <Stack direction="row" spacing={2}>
+                            <Button
+                                key={"apply"}
+                                variant="outlined"
+                                color="success"
+                                onClick={
+                                    () => {
+                                        handleEditorChange("code", `${viewCode} \n${code}`)
+                                        toggleDrawer("savedCode", false)();
+                                    }}>
+                                Apply Code
+                            </Button>
+                            <Button
+                                key={"close"}
+                                variant="outlined"
+                                color="error"
+                                onClick={toggleDrawer("savedCode", false)}
+                            >
+                                Close
+                            </Button>
+                        </Stack>
+                    </Box>
+                </Box>
+            </SwipeableDrawer>
+
+        </React.Fragment>
+    );
+}
+SavedCode.propTypes = {
+    state: PropTypes.bool,
+    toggleDrawer: PropTypes.func,
+    handleEditorChange: PropTypes.func,
+    code: PropTypes.string,
+}
+
+export default SavedCode;
\ No newline at end of file
diff --git a/src/components/CodeEditorWindow/config/RequesFromCode.js b/src/components/CodeEditorWindow/config/RequesFromCode.js
index c32a8358..1f92f7a8 100644
--- a/src/components/CodeEditorWindow/config/RequesFromCode.js
+++ b/src/components/CodeEditorWindow/config/RequesFromCode.js
@@ -13,9 +13,9 @@ export function RequestFromCode(text) {
       data: data.reqBody
     })
       .then((response) => {
-        const currentSavedCodes = localStorage.getItem("currentSavedCodes") ? JSON.parse(localStorage.getItem("currentSavedCodes")) : []
-        currentSavedCodes.push({ code: data, time: new Date().toLocaleTimeString(), date: new Date().toLocaleDateString() })
-        localStorage.setItem("currentSavedCodes", JSON.stringify(currentSavedCodes));
+        const history = localStorage.getItem("history") ? JSON.parse(localStorage.getItem("history")) : []
+        history.push({ code: data, time: new Date().toLocaleTimeString(), date: new Date().toLocaleDateString() })
+        localStorage.setItem("history", JSON.stringify(history));
         return response.data;
       })
       .catch((err) => {

From 3413639225a99111111269d173a03f40a912fb68 Mon Sep 17 00:00:00 2001
From: Kartik Gupta <84975264+kartik-gupta-ij@users.noreply.github.com>
Date: Sun, 2 Apr 2023 21:31:24 +0530
Subject: [PATCH 2/4] minor Hight fix

---
 src/components/CodeEditorWindow/Menu/savedCode.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CodeEditorWindow/Menu/savedCode.js b/src/components/CodeEditorWindow/Menu/savedCode.js
index 26608746..466cf447 100644
--- a/src/components/CodeEditorWindow/Menu/savedCode.js
+++ b/src/components/CodeEditorWindow/Menu/savedCode.js
@@ -175,7 +175,7 @@ function SavedCode({ state, code, handleEditorChange, toggleDrawer }) {
                         }}
                         m={2}>
                         <Editor
-                            height="400px"
+                            height="475px"
                             value={(viewCode)}
                             options={{
                                 scrollBeyondLastLine: false,

From 3339de3fa5a798650fc5562e44a2b6e181d667ec Mon Sep 17 00:00:00 2001
From: Kartik Gupta <84975264+kartik-gupta-ij@users.noreply.github.com>
Date: Mon, 3 Apr 2023 20:22:58 +0530
Subject: [PATCH 3/4] name fix

---
 src/components/CodeEditorWindow/Menu/savedCode.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/CodeEditorWindow/Menu/savedCode.js b/src/components/CodeEditorWindow/Menu/savedCode.js
index 466cf447..19aef2ec 100644
--- a/src/components/CodeEditorWindow/Menu/savedCode.js
+++ b/src/components/CodeEditorWindow/Menu/savedCode.js
@@ -10,7 +10,6 @@ import PropTypes from "prop-types";
 function SavedCode({ state, code, handleEditorChange, toggleDrawer }) {
 
     const [viewCode, setViewCode] = React.useState(`//Current Editor Code: \n${code}`);
-    console.log(code);
     const [saveNameText, setSaveNameText] = useState("");
     const [currentSavedCodes, setCurrentSavedCodes] = useState(localStorage.getItem("currentSavedCodes") ? JSON.parse(localStorage.getItem("currentSavedCodes")) : []);
 
@@ -106,10 +105,9 @@ function SavedCode({ state, code, handleEditorChange, toggleDrawer }) {
                         </Typography>
                         <Stack direction="row" spacing={2}>
 
-                            <Typography variant="h6" m={2} gutterBottom>
-                                Name Code :
+                            <Typography m={2} gutterBottom>
                                 <TextField
-                                    placeholder=" Required"
+                                    placeholder=" Name (Required)*"
                                     variant="standard"
                                     value={saveNameText}
                                     onChange={(e) => {

From 020f9900cf0dd00050ad7d01eae5c611e32d30b6 Mon Sep 17 00:00:00 2001
From: Kartik Gupta <84975264+kartik-gupta-ij@users.noreply.github.com>
Date: Mon, 3 Apr 2023 20:27:05 +0530
Subject: [PATCH 4/4] local storage varible name change

---
 .../CodeEditorWindow/Menu/savedCode.js        | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/CodeEditorWindow/Menu/savedCode.js b/src/components/CodeEditorWindow/Menu/savedCode.js
index 19aef2ec..b075fb98 100644
--- a/src/components/CodeEditorWindow/Menu/savedCode.js
+++ b/src/components/CodeEditorWindow/Menu/savedCode.js
@@ -11,19 +11,19 @@ function SavedCode({ state, code, handleEditorChange, toggleDrawer }) {
 
     const [viewCode, setViewCode] = React.useState(`//Current Editor Code: \n${code}`);
     const [saveNameText, setSaveNameText] = useState("");
-    const [currentSavedCodes, setCurrentSavedCodes] = useState(localStorage.getItem("currentSavedCodes") ? JSON.parse(localStorage.getItem("currentSavedCodes")) : []);
+    const [savedCodes, setSavedCodes] = useState(localStorage.getItem("savedCodes") ? JSON.parse(localStorage.getItem("savedCodes")) : []);
 
 
     useEffect(() => {
-        setCurrentSavedCodes(localStorage.getItem("currentSavedCodes") ? JSON.parse(localStorage.getItem("currentSavedCodes")) : []);
+        setSavedCodes(localStorage.getItem("savedCodes") ? JSON.parse(localStorage.getItem("savedCodes")) : []);
         setViewCode(`//Current Editor Code: \n${code}`);
     }, [state])
 
     function saveCode() {
         if (saveNameText !== "") {
-            const data = [...currentSavedCodes, { name: saveNameText, code: code, time: new Date().toLocaleTimeString(), date: new Date().toLocaleDateString() }]
-            localStorage.setItem("currentSavedCodes", JSON.stringify(data));
-            setCurrentSavedCodes(JSON.parse(localStorage.getItem("currentSavedCodes")))
+            const data = [...savedCodes, { name: saveNameText, code: code, time: new Date().toLocaleTimeString(), date: new Date().toLocaleDateString() }]
+            localStorage.setItem("savedCodes", JSON.stringify(data));
+            setSavedCodes(JSON.parse(localStorage.getItem("savedCodes")))
             setSaveNameText("");
             return;
         }
@@ -66,11 +66,11 @@ function SavedCode({ state, code, handleEditorChange, toggleDrawer }) {
                 color="error"
                 onClick={
                     () => {
-                        const index = currentSavedCodes.indexOf(data)
-                        const updateCode = [...currentSavedCodes]
+                        const index = savedCodes.indexOf(data)
+                        const updateCode = [...savedCodes]
                         updateCode.splice(index, 1);
-                        localStorage.setItem("currentSavedCodes", JSON.stringify(updateCode));
-                        setCurrentSavedCodes(JSON.parse(localStorage.getItem("currentSavedCodes")))
+                        localStorage.setItem("savedCodes", JSON.stringify(updateCode));
+                        setSavedCodes(JSON.parse(localStorage.getItem("savedCodes")))
                         return;
                     }}
             >
@@ -117,7 +117,7 @@ function SavedCode({ state, code, handleEditorChange, toggleDrawer }) {
                                 <Button onClick={saveCode}>Save</Button>
                             </Typography>
                         </Stack>
-                        {currentSavedCodes.length === 0 &&
+                        {savedCodes.length === 0 &&
                             (
                                 <Stack direction="row" spacing={2} >
                                     <Typography variant="h6" m={2} gutterBottom>
@@ -133,7 +133,7 @@ function SavedCode({ state, code, handleEditorChange, toggleDrawer }) {
                             spacing={2}
                             m={2}
                         >
-                            {currentSavedCodes.length > 0 &&
+                            {savedCodes.length > 0 &&
                                 <div style={{ height: "375px", width: '100%' }}>
                                     <DataGrid
                                         sx={{
@@ -145,7 +145,7 @@ function SavedCode({ state, code, handleEditorChange, toggleDrawer }) {
                                                 outline: "none !important",
                                             },
                                         }}
-                                        rows={currentSavedCodes}
+                                        rows={savedCodes}
                                         columns={columns}
                                         initialState={{
                                             pagination: {