chore: add and remove buttons

cody-molisee · cody-molisee · commit 13d96cd35e34 · 2024-06-14T10:36:30.000-07:00
new checkbox component to select keys to remove
new buttons and handlers for add and remove
new
content script listeners for add and remove
cleaned some logs from theme and edit
udpated styles
in viewgrid
new popup for removing items
diff --git a/dist/assets/types-68586616.js b/dist/assets/types-68586616.js
diff --git a/dist/index.html b/dist/index.html
@@ -5,9 +5,9 @@
 	<meta charset="UTF-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<title>Session Storage Hub</title>
-  <script type="module" crossorigin src="/assets/index.html-896f7110.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/types-68586616.js">
-  <link rel="stylesheet" href="/assets/index-25f7160f.css">
+  <script type="module" crossorigin src="/assets/index.html-11f36aec.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/types-62e912eb.js">
+  <link rel="stylesheet" href="/assets/index-fa5528e0.css">
 </head>
 
 <body>
diff --git a/dist/manifest.json b/dist/manifest.json
@@ -19,7 +19,7 @@
   "content_scripts": [
     {
       "js": [
-        "assets/content.ts-loader-34a4c4a9.js"
+        "assets/content.ts-loader-45f7e850.js"
       ],
       "matches": [
         "<all_urls>"
@@ -41,8 +41,8 @@
         "<all_urls>"
       ],
       "resources": [
-        "assets/types-68586616.js",
-        "assets/content.ts-2447e755.js"
+        "assets/types-62e912eb.js",
+        "assets/content.ts-95edae96.js"
       ],
       "use_dynamic_url": true
     }
diff --git a/src/chromeServices/content.ts b/src/chromeServices/content.ts
@@ -228,6 +228,58 @@ export const copyStorageToClipboard = (
 	return false; // do not expect a response
 }
 
+const addMessageListener = (
+	message: IChromeMessage,
+	sender: chrome.runtime.MessageSender,
+	response: TResponse
+) => {
+	if (validateSender(Sender.Extension, Action.Add, message, sender)) {
+		try {
+			const itemKey = new Date().getTime().toString();
+			sessionStorage.setItem(itemKey, '{}');
+
+			const data = {
+				obj: Object.assign({}, sessionStorage),
+				itemKey: itemKey,
+			}
+
+			response({ error: null, data: data });
+		} catch {
+			response({
+				error: 'Error adding session storage item',
+				data: null,
+			});
+		}
+		return true; // we will eventually return a response
+	}
+	return false; // do not expect a response
+};
+
+const deleteMessageListener = (
+	message: IChromeMessage,
+	sender: chrome.runtime.MessageSender,
+	response: TResponse
+) => {
+	if (validateSender(Sender.Extension, Action.Delete, message, sender)) {
+		try {
+			console.log('deleteMessageListener', message);
+			message.message?.data.forEach((k: string) => {
+				sessionStorage.removeItem(k);
+			});
+
+			const data = Object.assign({}, sessionStorage);
+			response({ error: null, data: data });
+		} catch {
+			response({
+				error: 'Error adding session storage item',
+				data: null,
+			});
+		}
+		return true; // we will eventually return a response
+	}
+	return false; // do not expect a response
+};
+
 const main = () => {
 	// prevent duplicate listeners
 	chrome.runtime.onMessage.removeListener(requestMessageListener);
@@ -237,6 +289,8 @@ const main = () => {
 	chrome.runtime.onMessage.removeListener(fillStorageMessageListener);
 	chrome.runtime.onMessage.removeListener(checkReleaseListener);
 	chrome.runtime.onMessage.removeListener(copyStorageToClipboard);
+	chrome.runtime.onMessage.removeListener(addMessageListener);
+	chrome.runtime.onMessage.removeListener(deleteMessageListener);
 
 	// Fired when a message is sent from either an extension process or a content script.
 	chrome.runtime.onMessage.addListener(requestMessageListener);
@@ -246,6 +300,8 @@ const main = () => {
 	chrome.runtime.onMessage.addListener(fillStorageMessageListener);
 	chrome.runtime.onMessage.addListener(checkReleaseListener);
 	chrome.runtime.onMessage.addListener(copyStorageToClipboard);
+	chrome.runtime.onMessage.addListener(addMessageListener);
+	chrome.runtime.onMessage.addListener(deleteMessageListener);
 };
 
 main();
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -0,0 +1,17 @@
+import { HTMLProps, forwardRef } from "react";
+
+interface ICheckboxProps extends HTMLProps<HTMLInputElement> {
+    className?: string;
+    label?: string;
+}
+
+const Checkbox = forwardRef(function checkbox(props: ICheckboxProps, ref: any) {
+    return (
+        <label className={`flex items-center justify-around ${props.className}`} htmlFor={props.label}>
+            {props.label ?? 'checkbox'}
+            <input ref={ref} id={props.label} type={'checkbox'} />
+        </label>
+    );
+});
+
+export default Checkbox;
diff --git a/src/components/Editor/Editor.tsx b/src/components/Editor/Editor.tsx
@@ -67,8 +67,6 @@ const Editor = () => {
 	const { editorTheme } = useTheme();
 	const [code, setCode] = useState<string>('');
 
-
-	console.log('theme', editorTheme);
 	const customLinter = () => {
 		return (view: EditorView): Diagnostic[] => {
 			try {
diff --git a/src/components/ViewGrid/ViewGrid.css b/src/components/ViewGrid/ViewGrid.css
@@ -1,7 +1,4 @@
 .ViewGrid {
-	/* display: grid;
-	grid-template-columns: 3fr 9fr;
-	grid-template-areas: 'key value'; */
 	border: 0.0625rem solid var(--borderColor);
 	padding: 0.325rem;
 	max-height: 21rem;
@@ -19,14 +16,9 @@
 
 .ViewGrid__30 {
 	border-right: 0.0125rem solid var(--borderColor);
-	/* grid-area: key; */
 	flex-direction: column;
 	word-wrap: break-word;
 	word-break: break-all;
 	overflow-x: clip;
 	padding: 0 0.125rem;
-}
-
-.ViewGrid__70 {
-	/* grid-area: value; */
 }
diff --git a/src/providers/useStorageData.tsx b/src/providers/useStorageData.tsx
@@ -26,6 +26,7 @@ interface IExtendedDataProps extends IDataProps {
 
 function reducer(state: any, action: { type: string; data: any }) {
 	switch (action.type) {
+		// use for add and delete
 		case 'setSessionStorageData': {
 			const d = action.data.sessionStorageData;
 			const k = Object.keys(d);
diff --git a/src/providers/useTheme.tsx b/src/providers/useTheme.tsx
@@ -77,8 +77,6 @@ function getStylesFromTheme(name: Themes) {
 }
 
 function getEditorTheme(name: Themes) {
-	console.log('getting theme:', name);
-	console.log('theme val: ', githubLight);
 	switch (name) {
 		case 'light': return githubLight;
 		case 'dark': return githubDark;
diff --git a/src/types/types.ts b/src/types/types.ts
@@ -14,6 +14,8 @@ export enum Action {
 	Check,
 	FillStorage,
 	Copy,
+	Add,
+	Delete
 }
 
 export enum Themes {
diff --git a/src/utils/Utils.tsx b/src/utils/Utils.tsx
@@ -110,6 +110,26 @@ export function promptToast(
 	});
 }
 
+export function promptDeleteToast(
+	id: string | null,
+	msg: JSX.Element,
+	callback: () => void
+) {
+	createToast({
+		toastOps: {
+			toastId: id ?? undefined,
+			type: 'default',
+			autoClose: false,
+			closeOnClick: false,
+			pauseOnHover: true,
+		},
+		message: msg,
+		acceptText: 'Continue',
+		declineText: 'Cancel',
+		acceptCallback: callback,
+	});
+}
+
 export function getDataAsFormattedJson(object: any) {
 	try {
 		return JSON.parse(object);
diff --git a/src/views/popup.tsx b/src/views/popup.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { RefObject, createRef, useCallback, useEffect, useState } from 'react';
 import Header from '../components/Header/Header';
 import {
 	Action,
@@ -11,13 +11,27 @@ import { chromeApi } from '../utils/ChromeUtils';
 import { useTheme } from '../providers/useTheme';
 import Control from '../components/Control/Control';
 import ViewGrid from '../components/ViewGrid/ViewGrid';
-import { errorToast, infoToast, promptToast, sortObjectByKeys, successToast } from '../utils/Utils';
+import { errorToast, infoToast, promptDeleteToast, promptToast, sortObjectByKeys, successToast } from '../utils/Utils';
 import { useStorageData } from '../providers/useStorageData';
+import Checkbox from '../components/Checkbox/Checkbox';
 
 const Popup = () => {
 	const { styles } = useTheme();
 	const [versionData, setVersionData] = useState<TVersionData>();
 	const { sessionStorageData, setSessionStorageData, selectAllKeys, unselectAllKeys, selectedKeys, keys } = useStorageData();
+	const deleteCheckboxRefs: RefObject<HTMLInputElement>[] = keys.map(() => { return createRef<HTMLInputElement>(); });
+	// a list of checkboxes
+	// maintain an array of keys corresponding to only to a checked box (ignore not checked boxes)
+	// on continue pass the array of checked items to the callback...
+	const deleteList = () => {
+		return (
+			<div className={'grid grid-cols-2'}>
+				{keys && keys.map((k, i) => {
+					return <Checkbox key={i} label={k} ref={deleteCheckboxRefs[i]} />;
+				})}
+			</div>
+		);
+	}
 
 	const handleCopy = useCallback(() => {
 		chromeApi(
@@ -63,6 +77,60 @@ const Popup = () => {
 		return;
 	}
 
+	const handleAdd = () => {
+		chromeApi(
+			{
+				from: Sender.Extension,
+				action: Action.Add,
+				message: null,
+			} as IChromeMessage,
+			async (res: IMessageResponse) => {
+				if (!chrome?.storage) {
+					errorToast('503', 'Chrome Storage API is not available.');
+					return;
+				}
+
+				await chrome.storage.local.set({ data: res.data.obj });
+				successToast(null, 'Added new Session Storage item: ' + res.data.itemKey);
+			}
+		);
+
+		return;
+	};
+
+	const handleDelete = () => {
+		const keysToDelete = deleteCheckboxRefs.reduce((keys: string[], ele: RefObject<HTMLInputElement>) => {
+			if (ele.current?.checked) {
+				keys.push(ele.current.id);
+			}
+
+			return keys;
+		}, []);
+
+		console.log(keysToDelete);
+
+		chromeApi(
+			{
+				from: Sender.Extension,
+				action: Action.Delete,
+				message: { data: keysToDelete },
+			} as IChromeMessage,
+			async (res: IMessageResponse) => {
+				if (!chrome?.storage) {
+					errorToast('503', 'Chrome Storage API is not available.');
+					return;
+				}
+
+				await chrome.storage.local.set({ data: res.data });
+				successToast(null, 'Deleted Session Storage keys: ' + keysToDelete.join(', '));
+			}
+		);
+	};
+
+	// //////////////
+	// TODO: add right click and edit functionality to the keys...
+	// //////////////
+
 	const handleFillSessionStorageUtility = () => {
 		chromeApi(
 			{
@@ -236,6 +304,26 @@ const Popup = () => {
 							onClickCallback={handlePaste}>
 							Paste
 						</Control>
+						<Control
+							onClickCallback={() => {
+								promptToast(
+									'utility',
+									'Are you sure you want to add a new Item?',
+									handleAdd,
+								);
+							}}>
+							Add
+						</Control>
+						<Control
+							onClickCallback={() => {
+								promptDeleteToast(
+									'utility',
+									deleteList(),
+									handleDelete,
+								);
+							}}>
+							Delete
+						</Control>
 					</div>
 					<div className={'w-full'}>
 						<Control

Original file line number	Diff line number	Diff line change
`@@ -77,8 +77,6 @@ function getStylesFromTheme(name: Themes) {`
`77`	`77`	`}`
`78`	`78`
`79`	`79`	`function getEditorTheme(name: Themes) {`
`80`		`- console.log('getting theme:', name);`
`81`		`- console.log('theme val: ', githubLight);`
`82`	`80`	`switch (name) {`
`83`	`81`	`case 'light': return githubLight;`
`84`	`82`	`case 'dark': return githubDark;`
Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,8 @@ export enum Action {`
`14`	`14`	`Check,`
`15`	`15`	`FillStorage,`
`16`	`16`	`Copy,`
	`17`	`+ Add,`
	`18`	`+ Delete`
`17`	`19`	`}`
`18`	`20`
`19`	`21`	`export enum Themes {`