1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
import {useEffect, useRef, useState} from 'react';
import { useLocation, useParams } from "react-router";
import './app.css';
import Sidebar from './components/sidebar/sidebar';
import Content from './components/content/content';
const files = [
{
id: '1',
title: 'kaas',
items: [
{ type: 'plain', text: 'kaas 1' },
{ type: 'plain', text: 'kaas 2' },
{ type: 'plain', text: 'kaas 3' },
{ type: 'plain', text: 'kaas 4' },
{ type: 'plain', text: 'kaas 5' },
],
},
{
id: '2',
title: 'ham',
items: [
{ type: 'plain', text: 'ham 1' },
{ type: 'plain', text: 'ham 2' },
{ type: 'plain', text: 'ham 3' },
{ type: 'plain', text: 'ham 4' },
{ type: 'plain', text: 'ham 5' },
],
},
{
id: '3',
title: 'vis',
items: [
{ type: 'plain', text: 'vis 1' },
{ type: 'plain', text: 'vis 2' },
{ type: 'plain', text: 'vis 3' },
{ type: 'plain', text: 'vis 4' },
{ type: 'plain', text: 'vis 5' },
],
},
{
id: '4',
title: 'empty',
items: [
{ type: 'plain', text: '' },
],
children: [{
id: '4/5',
title: 'empty 2',
items: [
{ type: 'plain', text: '' },
],
}],
},
]
function splitOnce(str, sep) {
const idx = str.indexOf(sep);
if (idx === -1) return [str, ''];
return [ str.slice(0, idx), str.slice(idx+1) ];
}
export default function App() {
const e = useLocation();
const fullPath = e.pathname.replace('/file/', '');
let path = fullPath;
let cur = { children: files };
let builtKey = '';
while (path != '') {
let key;
[key, path] = splitOnce(path, '/');
builtKey += `/${key}`;
console.log(key, path, cur);
cur = (cur.children ?? []).find(p => p.id === builtKey.slice(1));
}
const file = cur;
const [title, setTitle] = useState(() => file.title);
const [items, setItems] = useState(() => file.items);
useEffect(() => {
setTitle(() => file.title);
setItems(() => file.items);
document.title = '🧀🥜 ' + file.title;
}, [fullPath]);
return <div className='app'>
<Sidebar files={files} />
<Content title={title} items={items} setTitle={setTitle} setItems={setItems} />
</div>
}
|
