Use nanostores for saving instances
This commit is contained in:
parent
56db514d15
commit
a5314e5923
6 changed files with 57 additions and 27 deletions
|
@ -25,7 +25,9 @@
|
|||
"@astrojs/netlify": "^2.2.0",
|
||||
"@astrojs/node": "^5.1.0",
|
||||
"@astrojs/vercel": "^3.2.1",
|
||||
"astro": "^2.1.7"
|
||||
"@nanostores/persistent": "^0.7.0",
|
||||
"astro": "^2.1.7",
|
||||
"nanostores": "^0.7.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^18.15.10",
|
||||
|
|
|
@ -5,6 +5,7 @@ specifiers:
|
|||
'@astrojs/netlify': ^2.2.0
|
||||
'@astrojs/node': ^5.1.0
|
||||
'@astrojs/vercel': ^3.2.1
|
||||
'@nanostores/persistent': ^0.7.0
|
||||
'@types/node': ^18.15.10
|
||||
'@typescript-eslint/eslint-plugin': ^5.57.0
|
||||
'@typescript-eslint/parser': ^5.57.0
|
||||
|
@ -15,6 +16,7 @@ specifiers:
|
|||
eslint-config-prettier: ^8.8.0
|
||||
eslint-plugin-astro: ^0.26.1
|
||||
eslint-plugin-unicorn: ^46.0.0
|
||||
nanostores: ^0.7.4
|
||||
postcss: ^8.4.21
|
||||
postcss-csso: ^6.0.1
|
||||
prettier: ^2.8.7
|
||||
|
@ -31,7 +33,9 @@ dependencies:
|
|||
'@astrojs/netlify': 2.2.0_astro@2.1.7
|
||||
'@astrojs/node': 5.1.0_astro@2.1.7
|
||||
'@astrojs/vercel': 3.2.1_astro@2.1.7
|
||||
'@nanostores/persistent': 0.7.0_nanostores@0.7.4
|
||||
astro: 2.1.7_zfwagalafqqey6uoinf67yy4wu
|
||||
nanostores: 0.7.4
|
||||
|
||||
devDependencies:
|
||||
'@types/node': 18.15.10
|
||||
|
@ -803,6 +807,15 @@ packages:
|
|||
- supports-color
|
||||
dev: false
|
||||
|
||||
/@nanostores/persistent/0.7.0_nanostores@0.7.4:
|
||||
resolution: {integrity: sha512-4PAInL/T1hbftZUJ0cmgdFHBMalUoq7BUXFBy7QfyMv/8X3LPTYNh/yxspL7+J+XM3UNvVI7IFRMMs6FBasjhQ==}
|
||||
engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0}
|
||||
peerDependencies:
|
||||
nanostores: ^0.7.0
|
||||
dependencies:
|
||||
nanostores: 0.7.4
|
||||
dev: false
|
||||
|
||||
/@netlify/functions/1.4.0:
|
||||
resolution: {integrity: sha512-gy7ULTIRroc2/jyFVGx1djCmmBMVisIwrvkqggq5B6iDcInRSy2Tpkm+V5C63hKJVkNRskKWtLQKm9ecCaQTjA==}
|
||||
engines: {node: '>=8.3.0'}
|
||||
|
@ -3668,6 +3681,11 @@ packages:
|
|||
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
|
||||
hasBin: true
|
||||
|
||||
/nanostores/0.7.4:
|
||||
resolution: {integrity: sha512-MBeUVt7NBcXqh7AGT+KSr3O0X/995CZsvcP2QEMP+PXFwb07qv3Vjyq+EX0yS8f12Vv3Tn2g/BvK/OZoMhJlOQ==}
|
||||
engines: {node: ^14.0.0 || ^16.0.0 || >=18.0.0}
|
||||
dev: false
|
||||
|
||||
/napi-build-utils/1.0.2:
|
||||
resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
|
||||
|
||||
|
|
|
@ -66,9 +66,10 @@ const { prefilledInstance } = Astro.props;
|
|||
|
||||
<script>
|
||||
import { extractHost, normalizeURL } from "@scripts/util";
|
||||
|
||||
const LOCAL_STORAGE_KEY = "recentInstances";
|
||||
const RECENT_INSTANCES_SIZE = 5;
|
||||
import {
|
||||
savedInstances as instanceStore,
|
||||
saveInstance,
|
||||
} from "@stores/saved-instances.ts";
|
||||
|
||||
const $form = document.querySelector("#js-s2f-form") as HTMLFormElement;
|
||||
const $instanceContainer = document.querySelector(
|
||||
|
@ -76,22 +77,13 @@ const { prefilledInstance } = Astro.props;
|
|||
) as HTMLLabelElement;
|
||||
const $instance = document.querySelector("#instance") as HTMLInputElement;
|
||||
|
||||
const getSavedInstances = (): Array<string> => {
|
||||
const storageValue = window.localStorage.getItem(LOCAL_STORAGE_KEY);
|
||||
if (!storageValue) {
|
||||
return [];
|
||||
}
|
||||
const savedInstances: Set<string> = instanceStore.get();
|
||||
|
||||
return JSON.parse(storageValue);
|
||||
};
|
||||
|
||||
const savedInstances = getSavedInstances();
|
||||
|
||||
if (savedInstances.length > 0) {
|
||||
if (savedInstances.size > 0) {
|
||||
$instanceContainer.append(
|
||||
"Previously used: ",
|
||||
...savedInstances
|
||||
.flatMap((instance, index) => {
|
||||
...[...savedInstances]
|
||||
.flatMap((instance: string, index: number) => {
|
||||
if (!instance) {
|
||||
return [];
|
||||
}
|
||||
|
@ -117,17 +109,8 @@ const { prefilledInstance } = Astro.props;
|
|||
|
||||
if (formData.get("remember")) {
|
||||
const instance = normalizeURL(formData.get("instance") as string);
|
||||
const index = savedInstances.indexOf(instance);
|
||||
if (index >= 0) {
|
||||
savedInstances.splice(index, 1);
|
||||
}
|
||||
savedInstances.unshift(instance);
|
||||
savedInstances.length = RECENT_INSTANCES_SIZE;
|
||||
|
||||
window.localStorage.setItem(
|
||||
LOCAL_STORAGE_KEY,
|
||||
JSON.stringify(savedInstances),
|
||||
);
|
||||
saveInstance(instance);
|
||||
}
|
||||
|
||||
return true;
|
||||
|
|
21
src/stores/saved-instances.ts
Normal file
21
src/stores/saved-instances.ts
Normal file
|
@ -0,0 +1,21 @@
|
|||
import { persistentAtom } from "@nanostores/persistent";
|
||||
|
||||
const LOCAL_STORAGE_KEY = "recentInstances";
|
||||
const RECENT_INSTANCES_SIZE = 5;
|
||||
|
||||
export const savedInstances = persistentAtom<Set<string>>(
|
||||
LOCAL_STORAGE_KEY,
|
||||
new Set(),
|
||||
{
|
||||
encode: (set) => JSON.stringify([...set]),
|
||||
decode: (value) => new Set(JSON.parse(value)),
|
||||
},
|
||||
);
|
||||
|
||||
export const saveInstance = (instance: string) => {
|
||||
savedInstances.set(
|
||||
new Set(
|
||||
[instance, ...savedInstances.get()].slice(0, RECENT_INSTANCES_SIZE),
|
||||
),
|
||||
);
|
||||
};
|
5
svelte.config.js
Normal file
5
svelte.config.js
Normal file
|
@ -0,0 +1,5 @@
|
|||
import { vitePreprocess } from "@astrojs/svelte";
|
||||
|
||||
export default {
|
||||
preprocess: vitePreprocess(),
|
||||
};
|
|
@ -8,6 +8,7 @@
|
|||
"@layouts/*": ["src/layouts/*"],
|
||||
"@pages/*": ["src/pages/*"],
|
||||
"@scripts/*": ["src/scripts/*"],
|
||||
"@stores/*": ["src/stores/*"],
|
||||
"@styles/*": ["src/styles/*"]
|
||||
}
|
||||
}
|
||||
|
|
Reference in a new issue