Skip to content

Commit a967708

Browse files
milomgmilomg
committed
saving title, visibility
1 parent a6458d4 commit a967708

File tree

11 files changed

+706
-715
lines changed

11 files changed

+706
-715
lines changed

‎package.json

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,18 @@
1919
"build": "vite build && workbox generateSW workbox-config.js",
2020
"build:lib": "jiti rollup.config.js",
2121
"format": "prettier -w \"{src,playground}/**/*.{js,json,ts,tsx,html,css}\" \"*.{js,ts}\"",
22-
"prepublishOnly": "pnpm build:lib"
22+
"prepublishOnly": "pnpm build:lib",
23+
"tsc": "tsc"
2324
},
2425
"devDependencies": {
25-
"@babel/core": "^7.18.0",
26+
"@babel/core": "^7.18.2",
2627
"@babel/plugin-syntax-jsx": "^7.17.12",
27-
"@babel/types": "^7.18.0",
28+
"@babel/types": "^7.18.4",
2829
"@rollup/plugin-babel": "^5.3.1",
2930
"@rollup/plugin-commonjs": "^22.0.0",
3031
"@rollup/plugin-json": "^4.1.0",
3132
"@rollup/plugin-node-resolve": "^13.3.0",
3233
"@rollup/plugin-replace": "^4.0.0",
33-
"@solid-primitives/debounce": "^1.3.0",
3434
"@types/babel__standalone": "^7.1.4",
3535
"@types/dedent": "^0.7.0",
3636
"@types/fs-extra": "^9.0.13",
@@ -47,8 +47,8 @@
4747
"rollup-plugin-import-css": "^3.0.3",
4848
"rollup-plugin-windicss": "^1.8.4",
4949
"solid-app-router": "^0.3.3",
50-
"typescript": "^4.6.4",
51-
"vite": "^2.9.9",
50+
"typescript": "^4.7.3",
51+
"vite": "^2.9.10",
5252
"vite-plugin-solid": "^2.2.6",
5353
"vite-plugin-windicss": "^1.8.4",
5454
"windicss": "^3.5.4",
@@ -57,18 +57,18 @@
5757
"dependencies": {
5858
"@amoutonbrady/lz-string": "^0.0.1",
5959
"@babel/preset-typescript": "^7.17.12",
60-
"@babel/standalone": "^7.18.1",
61-
"@solid-primitives/throttle": "^1.2.0",
60+
"@babel/standalone": "^7.18.4",
61+
"@solid-primitives/scheduled": "^1.0.0",
6262
"babel-preset-solid": "1.4.2",
6363
"dedent": "^0.7.0",
6464
"jszip": "^3.10.0",
6565
"monaco-editor-textmate": "^3.0.0",
6666
"monaco-textmate": "^3.0.1",
6767
"onigasm": "^2.2.5",
6868
"prettier": "^2.6.2",
69-
"rollup": "^2.74.1",
69+
"rollup": "^2.75.6",
7070
"solid-dismiss": "^1.2.1",
7171
"solid-heroicons": "^2.0.3",
72-
"solid-js": "1.4.2"
72+
"solid-js": "1.4.3"
7373
}
7474
}

‎playground/components/header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export const Header: Component<{
3030
return (
3131
<header class="p-1 flex text-sm justify-between items-center border-slate-200 dark:border-neutral-800 border-b-2px">
3232
<h1 class="flex items-center space-x-4 uppercase leading-0 tracking-widest pl-1">
33-
<a href="https://github.com/solidjs/solid">
33+
<a href="/">
3434
<img src={logo} alt="solid-js logo" class="w-8" />
3535
</a>
3636
<div id="project-name">

‎playground/components/zoomDropdown.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ export const ZoomDropdown: Component<{ showMenu: boolean }> = (props) => {
101101
</button>
102102
<Dismiss menuButton={btnEl} open={open} setOpen={setOpen}>
103103
<div
104-
class="fixed right-0 top-[48px] bg-white dark:bg-solid-darkbg rounded shadow p-6 w-min z-10"
104+
class="absolute transform -translate-x-1/2 bg-white dark:bg-solid-darkbg rounded shadow-md border-2 border-slate-200 dark:border-neutral-800 p-6 w-min z-10"
105105
classList={{
106106
'left-1/4': props.showMenu,
107107
}}

‎playground/context.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ interface AppContextType {
77

88
const AppContext = createContext<AppContextType>();
99

10-
// const API = "http://localhost:8787";
11-
export const API = 'https://api.solidjs.com'; // '/api';
10+
// export const API = 'http://localhost:8787';
11+
// export const API = '/api';
12+
export const API = 'https://api.solidjs.com';
1213

1314
export const AppContextProvider: ParentComponent = (props) => {
1415
const [token, setToken] = createSignal(localStorage.getItem('token') || '');

‎playground/pages/edit.tsx

Lines changed: 46 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import {
1515
} from 'solid-js';
1616
import { useParams } from 'solid-app-router';
1717
import { API, useAppContext } from '../context';
18-
import createDebounce from '@solid-primitives/debounce';
19-
import type { Tab } from '../../src';
18+
import { debounce } from '@solid-primitives/scheduled';
19+
import { createTabList, Tab } from '../../src';
2020
import type { APIRepl } from './home';
2121

2222
const Repl = lazy(() => import('../../src/components/repl'));
@@ -35,35 +35,6 @@ const Repl = lazy(() => import('../../src/components/repl'));
3535
},
3636
};
3737

38-
// Custom version of createTabList that allows us to use a resource as the backing signal
39-
const createTabList = () => {
40-
let sourceSignals: Record<string, [get: () => string, set: (value: string) => string]> = {};
41-
42-
const mapTabs = (tabs: Tab[]): Tab[] => {
43-
const oldSignals = sourceSignals;
44-
sourceSignals = {};
45-
46-
return tabs.map((tab) => {
47-
const id = `${tab.name}.${tab.type}`;
48-
sourceSignals[id] = oldSignals[id] || createSignal(tab.source);
49-
if (oldSignals[id]) oldSignals[id][1](tab.source);
50-
51-
return {
52-
name: tab.name,
53-
type: tab.type,
54-
get source() {
55-
return sourceSignals[id][0]();
56-
},
57-
set source(source: string) {
58-
sourceSignals[id][1](source);
59-
},
60-
};
61-
});
62-
};
63-
64-
return mapTabs;
65-
};
66-
6738
const RenderHeader: ParentComponent = (props) => {
6839
onMount(() => {
6940
const projectName = document.getElementById('project-name')!;
@@ -86,52 +57,40 @@ export const Edit = (props: { dark: boolean; horizontal: boolean }) => {
8657
const params = useParams();
8758
const context = useAppContext()!;
8859

89-
const tabMapper = (tabs: Tab[]) => tabs.map((x) => ({ name: `${x.name}.${x.type}`, content: x.source.split('\n') }));
90-
const mapTabs = createTabList();
91-
const [resource, { mutate }] = createResource<{ tabs: Tab[]; repl: APIRepl }, string>(params.repl, async (repl) => {
92-
let x: APIRepl = await fetch(`${API}/repl/${repl}`, {
60+
const [tabs, setTabs] = createTabList([]);
61+
const [current, setCurrent] = createSignal<string>();
62+
const [resource, { mutate }] = createResource<APIRepl, string>(params.repl, async (repl) => {
63+
let output: APIRepl = await fetch(`${API}/repl/${repl}`, {
9364
headers: { authorization: `Bearer ${context.token}` },
9465
}).then((r) => r.json());
9566

96-
return {
97-
repl: x,
98-
tabs: mapTabs(
99-
x.files.map((x) => {
100-
let dot = x.name.lastIndexOf('.');
101-
return { name: x.name.slice(0, dot), type: x.name.slice(dot + 1), source: x.content.join('\n') };
102-
}),
103-
),
104-
};
105-
});
106-
107-
const [current, setCurrent] = createSignal<string>();
108-
createEffect(() => {
109-
const myRepl = resource();
110-
if (!myRepl) return;
111-
setCurrent(`${myRepl.tabs[0].name}.${myRepl.tabs[0].type}`);
67+
setCurrent(output.files[0].name);
68+
setTabs(
69+
output.files.map((x) => {
70+
let dot = x.name.lastIndexOf('.');
71+
return { name: x.name.slice(0, dot), type: x.name.slice(dot + 1), source: x.content.join('\n') };
72+
}),
73+
);
74+
return output;
11275
});
11376

114-
const tabs = () => resource()?.tabs || [];
115-
const setTabs = (tabs: Tab[]) => {
116-
if (resource.latest) mutate({ repl: resource.latest.repl, tabs: mapTabs(tabs) });
117-
};
118-
119-
const updateRepl = createDebounce(() => {
120-
const repl = resource();
77+
const tabMapper = (tabs: Tab[]) => tabs.map((x) => ({ name: `${x.name}.${x.type}`, content: x.source.split('\n') }));
78+
const updateRepl = debounce(() => {
79+
const repl = resource.latest;
12180
if (!repl) return;
122-
const tabs = tabMapper(repl.tabs);
81+
const files = tabMapper(tabs());
12382
fetch(`${API}/repl/${params.repl}`, {
12483
method: 'PUT',
12584
headers: {
12685
authorization: `Bearer ${context.token}`,
12786
'Content-Type': 'application/json',
12887
},
12988
body: JSON.stringify({
130-
title: repl.repl.title,
131-
version: repl.repl.version,
132-
public: repl.repl.public,
133-
labels: repl.repl.labels,
134-
files: tabs,
89+
title: repl.title,
90+
version: repl.version,
91+
public: repl.public,
92+
labels: repl.labels,
93+
files,
13594
}),
13695
});
13796
}, 1000);
@@ -173,7 +132,29 @@ export const Edit = (props: { dark: boolean; horizontal: boolean }) => {
173132
id="repl"
174133
/>
175134
<RenderHeader>
176-
<input class="bg-transparent" value={resource()?.repl?.title || ''} />
135+
<input
136+
class="bg-transparent"
137+
value={resource()?.title || ''}
138+
onChange={(e) => {
139+
mutate((x) => x && { ...x, title: e.currentTarget.value });
140+
const repl = resource.latest!;
141+
const files = tabMapper(tabs());
142+
fetch(`${API}/repl/${params.repl}`, {
143+
method: 'PUT',
144+
headers: {
145+
authorization: `Bearer ${context.token}`,
146+
'Content-Type': 'application/json',
147+
},
148+
body: JSON.stringify({
149+
title: e.currentTarget.value,
150+
version: repl.version,
151+
public: repl.public,
152+
labels: repl.labels,
153+
files: files,
154+
}),
155+
});
156+
}}
157+
/>
177158
</RenderHeader>
178159
</Suspense>
179160
);

‎playground/pages/home.tsx

Lines changed: 47 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useNavigate, useParams } from 'solid-app-router';
22
import { Icon } from 'solid-heroicons';
33
import { eye, eyeOff, plus, x } from 'solid-heroicons/outline';
44
import { createResource, For, Suspense } from 'solid-js';
5+
import { createStore, produce } from 'solid-js/store';
56
import { defaultTabs } from '../../src';
67
import { API, useAppContext } from '../context';
78

@@ -29,12 +30,25 @@ export const Home = () => {
2930
const params = useParams();
3031
const context = useAppContext()!;
3132
const navigate = useNavigate();
32-
const user = () => params.user || context.user()?.display;
3333

34-
const [repls, { mutate }] = createResource<Repls, string>(user, async (user) => {
35-
if (!user) return { total: 0, list: [] };
36-
return await fetch(`${API}/repl/${user}/list`).then((r) => r.json());
37-
});
34+
const [repls, setRepls] = createStore<Repls>({ total: 0, list: [] });
35+
const [resourceRepls] = createResource<Repls, string>(
36+
() => params.user || '',
37+
async (user) => {
38+
if (!user && !context.token) return { total: 0, list: [] };
39+
let output = await fetch(`${API}/repl${user ? `/${user}/list` : '?'}`, {
40+
headers: {
41+
Authorization: `Bearer ${context.token}`,
42+
},
43+
}).then((r) => r.json());
44+
setRepls(output);
45+
return output;
46+
},
47+
);
48+
const get = <T,>(x: T) => {
49+
resourceRepls();
50+
return x;
51+
};
3852

3953
return (
4054
<div class="bg-brand-other h-full m-8">
@@ -92,15 +106,36 @@ export const Home = () => {
92106
</tr>
93107
}
94108
>
95-
<For each={repls()?.list}>
96-
{(repl) => (
109+
<For each={get(repls.list)}>
110+
{(repl, i) => (
97111
<tr>
98112
<td>
99-
<a href={`${user()}/${repl.id}`}>{repl.title}</a>
113+
<a href={`${params.user || context.user()?.display}/${repl.id}`}>{repl.title}</a>
100114
</td>
101115
<td>{new Date(repl.created_at).toLocaleString()}</td>
102116
<td>
103-
<Icon path={repl.public ? eye : eyeOff} class="w-6 inline m-2 ml-0" />
117+
<Icon
118+
path={repl.public ? eye : eyeOff}
119+
class="w-6 inline m-2 ml-0"
120+
onClick={async () => {
121+
fetch(`${API}/repl/${repl.id}`, {
122+
method: 'PUT',
123+
headers: {
124+
authorization: `Bearer ${context.token}`,
125+
'Content-Type': 'application/json',
126+
},
127+
body: JSON.stringify({
128+
...repl,
129+
public: !repl.public,
130+
}),
131+
});
132+
setRepls(
133+
produce((x) => {
134+
x!.list[i()].public = !repl.public;
135+
}),
136+
);
137+
}}
138+
/>
104139
<Icon
105140
path={x}
106141
class="w-6 inline m-2 mr-0 text-red-700 cursor-pointer"
@@ -111,10 +146,9 @@ export const Home = () => {
111146
authorization: `Bearer ${context.token}`,
112147
},
113148
});
114-
const current = repls.latest!;
115-
mutate({
116-
total: current.total - 1,
117-
list: current.list.filter((x) => x.id !== repl.id),
149+
setRepls({
150+
total: repls.total - 1,
151+
list: repls.list.filter((x) => x.id !== repl.id),
118152
});
119153
}}
120154
/>

0 commit comments

Comments
 (0)