Skip to content

Commit bbd1b8a

Browse files
cody-moliseecody-molisee
committed
new: added Add and Delete buttons. Added double-click to edit key. refactored some styles.
refactored styles for all buttons and utilities updated viewGrid styles to compliment other changes created an add button created a delete button created new popup interaction for the delete button incorporated new buttons into existing functionality for other buttons cleaned out unused code and comments ISSUES CLOSED: #86
1 parent 13d96cd commit bbd1b8a

File tree

11 files changed

+135
-46
lines changed

11 files changed

+135
-46
lines changed

‎dist/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Session Storage Hub</title>
8-
<script type="module" crossorigin src="/assets/index.html-11f36aec.js"></script>
9-
<link rel="modulepreload" crossorigin href="/assets/types-62e912eb.js">
10-
<link rel="stylesheet" href="/assets/index-fa5528e0.css">
8+
<script type="module" crossorigin src="/assets/index.html-c74d6bec.js"></script>
9+
<link rel="modulepreload" crossorigin href="/assets/types-6c8bde6f.js">
10+
<link rel="stylesheet" href="/assets/index-8cde6963.css">
1111
</head>
1212

1313
<body>

‎dist/manifest.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"content_scripts": [
2020
{
2121
"js": [
22-
"assets/content.ts-loader-45f7e850.js"
22+
"assets/content.ts-loader-f2f3d1d2.js"
2323
],
2424
"matches": [
2525
"<all_urls>"
@@ -41,8 +41,8 @@
4141
"<all_urls>"
4242
],
4343
"resources": [
44-
"assets/types-62e912eb.js",
45-
"assets/content.ts-95edae96.js"
44+
"assets/types-6c8bde6f.js",
45+
"assets/content.ts-3d49c860.js"
4646
],
4747
"use_dynamic_url": true
4848
}

‎src/chromeServices/content.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,30 @@ const deleteMessageListener = (
280280
return false; // do not expect a response
281281
};
282282

283+
const updateKeyMessageListener = (
284+
message: IChromeMessage,
285+
sender: chrome.runtime.MessageSender,
286+
response: TResponse
287+
) => {
288+
if (validateSender(Sender.Extension, Action.UpdateKey, message, sender)) {
289+
try {
290+
const { newKey, oldKey } = message.message;
291+
292+
sessionStorage.setItem(newKey, sessionStorage.getItem(oldKey) as string);
293+
sessionStorage.removeItem(oldKey);
294+
295+
response({ error: null, data: Object.assign({}, sessionStorage) });
296+
} catch {
297+
response({
298+
error: 'Error updating session storage data',
299+
data: null,
300+
});
301+
}
302+
return true; // we will eventually return a response
303+
}
304+
return false; // do not expect a response
305+
};
306+
283307
const main = () => {
284308
// prevent duplicate listeners
285309
chrome.runtime.onMessage.removeListener(requestMessageListener);
@@ -291,6 +315,7 @@ const main = () => {
291315
chrome.runtime.onMessage.removeListener(copyStorageToClipboard);
292316
chrome.runtime.onMessage.removeListener(addMessageListener);
293317
chrome.runtime.onMessage.removeListener(deleteMessageListener);
318+
chrome.runtime.onMessage.removeListener(updateKeyMessageListener);
294319

295320
// Fired when a message is sent from either an extension process or a content script.
296321
chrome.runtime.onMessage.addListener(requestMessageListener);
@@ -302,6 +327,7 @@ const main = () => {
302327
chrome.runtime.onMessage.addListener(copyStorageToClipboard);
303328
chrome.runtime.onMessage.addListener(addMessageListener);
304329
chrome.runtime.onMessage.addListener(deleteMessageListener);
330+
chrome.runtime.onMessage.addListener(updateKeyMessageListener);
305331
};
306332

307333
main();

‎src/components/ViewGrid/ViewGrid.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.ViewGrid {
22
border: 0.0625rem solid var(--borderColor);
3-
padding: 0.325rem;
43
max-height: 21rem;
54
height: 100%;
65
overflow: hidden;

‎src/components/ViewGrid/ViewGrid.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,14 @@ const ViewGrid = ({ className }: IViewGridProps) => {
2929
<>
3030
<div className={`ViewGrid ${className ?? ''} grid grid-cols-12`}>
3131
<div className={'ViewGrid__30 col-span-3'}>
32-
{keys &&
33-
keys.map((key, i) => {
34-
return (
35-
<ViewGridKey
36-
key={i}
37-
keyName={key}
38-
/>
39-
);
40-
})}
32+
{keys && keys.map((key) => {
33+
return (
34+
<ViewGridKey
35+
key={key}
36+
keyName={key}
37+
/>
38+
);
39+
})}
4140
</div>
4241
<div className={'ViewGrid__70 col-span-9'}>
4342
<ViewGridValue />

‎src/components/ViewGridKey/ViewGridKey.css‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
border-radius: 0.25rem;
1313
}
1414

15-
.ViewGridKey input {
15+
.ViewGridKey input[type="checkbox"] {
1616
appearance: none;
1717
margin: 0;
1818
color: var(--selectedIconColor);
@@ -25,7 +25,7 @@
2525
cursor: pointer;
2626
}
2727

28-
.ViewGridKey input::before {
28+
.ViewGridKey input[type="checkbox"]::before {
2929
content: '';
3030
width: 1.15em;
3131
height: 1.15em;
@@ -35,11 +35,11 @@
3535
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
3636
}
3737

38-
.ViewGridKey input:checked::before {
38+
.ViewGridKey input[type="checkbox"]:checked::before {
3939
transform: scale(1);
4040
}
4141

42-
.ViewGridKey input:not(:checked) {
42+
.ViewGridKey input[type="checkbox"]:not(:checked) {
4343
box-shadow: inset 1em 1em var(--unselectedIconColor);
4444
clip-path: polygon(
4545
20% 0%,
@@ -58,7 +58,6 @@
5858
}
5959

6060
.ViewGridKey p {
61-
margin: 0 0.25rem;
6261
font-size: 1rem;
6362
cursor: pointer;
6463
width: 100%;

‎src/components/ViewGridKey/ViewGridKey.tsx‎

Lines changed: 88 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,118 @@
11
import './ViewGridKey.css';
22
import { useStorageData } from '../../providers/useStorageData';
3+
import { useState, FocusEvent, KeyboardEvent, ChangeEvent, useEffect } from 'react';
4+
import { chromeApi } from '../../utils/ChromeUtils';
5+
import { Action, IChromeMessage, IMessageResponse, Sender } from '../../types/types';
6+
import { errorToast, infoToast } from '../../utils/Utils';
37

48
interface IViewGridKeyProps {
59
keyName: string;
610
}
711

812
const ViewGridKey = ({ keyName }: IViewGridKeyProps) => {
913
const { activeKey, setActiveKey, selectedKeys, setSelectedKeys } = useStorageData();
14+
const [isEditing, setIsEditing] = useState<boolean>(false);
15+
const [value, setValue] = useState<string>();
1016

11-
const handleOnChange = () => {
17+
const handleSelectedChange = () => {
1218
if (!selectedKeys.includes(keyName)) {
1319
setSelectedKeys([...selectedKeys, keyName]);
1420
} else {
1521
setSelectedKeys(selectedKeys.filter((k) => { return k !== keyName }));
1622
}
17-
}
23+
};
1824

1925
const handleSetActiveKey = () => {
2026
setActiveKey(keyName);
21-
}
27+
};
28+
29+
const onDoubleClickHandler = () => {
30+
setIsEditing(true);
31+
};
32+
33+
const handleUpdateKey = (newKey: string) => {
34+
// if empty, null, or no change
35+
if (!newKey || newKey === keyName) {
36+
setIsEditing(false);
37+
return;
38+
}
39+
40+
chromeApi(
41+
{
42+
from: Sender.Extension,
43+
action: Action.UpdateKey,
44+
message: { newKey: newKey, oldKey: keyName },
45+
} as IChromeMessage,
46+
async (res: IMessageResponse) => {
47+
if (!chrome?.storage) {
48+
errorToast('503', 'Chrome Storage API is not available.');
49+
return;
50+
}
51+
52+
await chrome.storage.local.set({ 'data': res.data });
53+
infoToast(null, 'Session Storage key updated from ' + keyName + ' to ' + newKey);
54+
}
55+
);
56+
57+
setIsEditing(false);
58+
};
59+
60+
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
61+
console.log('handleChange', e.target.value)
62+
setValue(e.target.value);
63+
};
64+
65+
const handleOnblur = (e: FocusEvent<HTMLInputElement>) => {
66+
if (e.target.value) {
67+
setValue(e.target.value);
68+
handleUpdateKey(e.target.value);
69+
} else {
70+
setValue(e.target.value);
71+
}
72+
};
73+
74+
const handleEnterKey = (e: KeyboardEvent<HTMLInputElement>) => {
75+
if (e.key === 'Enter') {
76+
if (e.currentTarget.value) {
77+
setIsEditing(false);
78+
handleUpdateKey(e.currentTarget.value);
79+
} else {
80+
setValue(keyName);
81+
}
82+
}
83+
};
84+
85+
useEffect(() => {
86+
console.log('useEffect', value);
87+
if (!value) {
88+
setValue(keyName);
89+
}
90+
}, []);
2291

2392
return (
2493
<div
2594
className={'ViewGridKey'}
95+
// use keyName to maintain styles
2696
aria-selected={activeKey === keyName}>
2797
<input
2898
type={'checkbox'}
99+
// use keyName to maintain functionality
29100
checked={selectedKeys.includes(keyName)}
30-
onChange={handleOnChange}
101+
onChange={handleSelectedChange}
31102
/>
32-
<p onClick={handleSetActiveKey}>{keyName}</p>
103+
<div className={'mx-[0.25rem]'} onDoubleClick={onDoubleClickHandler}>
104+
{!isEditing ? (
105+
<p onClick={handleSetActiveKey}>{value}</p>
106+
) : (
107+
<input type={'text'}
108+
autoFocus
109+
className={'focus-visible:outline-none bg-transparent'}
110+
value={value}
111+
onChange={handleChange}
112+
onBlur={handleOnblur}
113+
onKeyUp={handleEnterKey} />
114+
)}
115+
</div>
33116
</div>
34117
);
35118
};

‎src/providers/useStorageData.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@ interface IExtendedDataProps extends IDataProps {
2626

2727
function reducer(state: any, action: { type: string; data: any }) {
2828
switch (action.type) {
29-
// use for add and delete
3029
case 'setSessionStorageData': {
3130
const d = action.data.sessionStorageData;
3231
const k = Object.keys(d);

‎src/types/types.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ export enum Action {
1515
FillStorage,
1616
Copy,
1717
Add,
18-
Delete
18+
Delete,
19+
UpdateKey
1920
}
2021

2122
export enum Themes {

‎src/views/options.tsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,3 @@ const Options = () => {
5656
};
5757

5858
export default Options;
59-
60-
// TODO:
61-
// consider configuring tailwind/vite nested styles
62-
// once dev server is displaying things as expected move onto the build configs
63-
// build the appropriate files and sources to the correct directory
64-
// adjust manifest to point to the right files
65-
// translate and modify the workflow files, pipelines, scripts, and other path dependent devops stuff
66-
// now modify to use with docker
67-
//

0 commit comments

Comments
 (0)