eightball/PluralKit
1
0
Fork 0
mirror of https://github.com/PluralKit/PluralKit.git synced 2026-02-14 17:50:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(dashboard): use svelte context for lists

Browse source
This commit is contained in:
Jake Fulmine 2023-06-03 12:27:58 +02:00
parent f2e160c526
commit a48f2b40c4
23 changed files with 598 additions and 433 deletions
Download patch file Download diff file Expand all files Collapse all files

56
dashboard/src/routes/Dash/Dash.svelte
View file

@ -4,11 +4,14 @@
import { currentUser, loggedIn } from '../../stores';
import SystemMain from '../../components/system/Main.svelte';
import List from '../../components/list/List.svelte';
import MemberList from '../../components/list/MemberList.svelte';
import GroupList from '../../components/list/GroupList.svelte';
import type { System, Member, Group } from '../../api/types';
import api from '../../api';
import { defaultListOptions, defaultPageOptions, type List as Lists, type ListOptions, type PageOptions } from '../../components/list/types';
import { setContext } from 'svelte';
import { writable } from 'svelte/store';
// get the state from the navigator so that we know which tab to start on
let location = useLocation();
@ -70,22 +73,43 @@
}
}
let memberList: Lists<Member> = {
rawList: [],
processedList: [],
currentPage: [],
// context stores for each list
let memberStore = writable<Member[]>([]);
let groupStore = writable<Group[]>([]);
shortGroups: [],
shortMembers: [],
}
// state handling
let errs: Record<string, string> = {};
let loading: Record<string, boolean> = {};
setContext("members", memberStore);
setContext("groups", groupStore);
let groupList: Lists<Group> = {
rawList: [],
processedList: [],
currentPage: [],
fetchLists()
shortGroups: [],
shortMembers: [],
// fetch both lists, and store them inside a context store
async function fetchLists() {
loading.members = true;
loading.groups = true;
try {
const res = await api().systems("@me").members.get({ auth: true });
memberStore.set(res)
loading.members = false;
} catch (error) {
console.error(error);
errs.members = error.message;
}
try {
const res = await api().systems("@me").groups.get({ auth: true, query: { with_members: true } });
groupStore.set(res)
loading.groups = false;
} catch (error) {
console.error(error);
errs.groups = error.message;
}
}
let groupListOptions: ListOptions = JSON.parse(JSON.stringify(defaultListOptions));
@ -119,10 +143,10 @@
<SystemMain bind:user={user} isPublic={false} />
</TabPane>
<TabPane tabId="members" tab="Members" active={tabPane === "members"}>
<List on:viewChange={(e) => navigateTo("members", e.detail)} bind:otherList={groupList} bind:lists={memberList} bind:pageOptions={memberListPageOptions} bind:options={memberListOptions} />
<MemberList on:viewChange={(e) => navigateTo("members", e.detail)} bind:listLoading={loading.members} pageOptions={memberListPageOptions} options={memberListOptions} />
</TabPane>
<TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
<List on:viewChange={(e) => navigateTo("groups", e.detail)} bind:otherList={memberList} bind:lists={groupList} bind:pageOptions={groupListPageOptions} bind:options={groupListOptions} />
<GroupList on:viewChange={(e) => navigateTo("groups", e.detail)} bind:listLoading={loading.groups} pageOptions={groupListPageOptions} options={groupListOptions} />
</TabPane>
</TabContent>
</Col>