import { createGraphQLClient, gql } from "@solid-primitives/graphql";
import { createSignal, Show, For } from 'solid-js';
import { A, useNavigate } from '@solidjs/router';
import { useUserInfo } from '../user_info';
import { hasAccess, roles } from '../roles';
export interface CreatorEdge{
cursor: string;
node: {
id: string;
firstname: string;
lastname: string;
}
}
interface CreatorsSnippet {
creators: {
edges: CreatorEdge[]
pageInfo: {
hasNextPage: boolean;
endCursor: boolean;
}
}
}
export default function Creators() {
const newQuery = createGraphQLClient("http://localhost:8080/query");
const [search, setSearch] = createSignal('');
const [after, setAfter] = createSignal('0');
const [query, setQuery] = createSignal({
first: 10,
after: after(),
})
const navigate = useNavigate();
const userInfo = useUserInfo();
const [data] = newQuery<CreatorsSnippet>(
gql`
query creators($first: Int, $after: ID!) {
creators(first: $first, after: $after) {
edges {
cursor
node {
id
firstname
lastname
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
`,
query,
);
return (
<div class="wrapper">
<Show when={hasAccess(userInfo?.[0]?.()?.roles || [], roles.ADD_BOOKS)}>
<button onClick={() => {
navigate('/creator/new')
}}>Create new author</button>
</Show>
<form>
<input
placeholder="search"
value={search()}
onInput={(e) => {
setSearch(e.target.value);
setAfter('0');
}}
/>
</form>
<div>
<ul>
<Show when={data()?.creators.edges}>
<For each={data().creators.edges}>{(creator, i) => (
<li>
<div>{creator.node.firstname} {creator.node.lastname}</div>
<A href={`/creators/${creator.cursor}`}>More</A>
</li>
)}
</For>
</Show>
</ul>
<p>after: {after()}</p>
<Show when={data()?.creators.pageInfo.hasNextPage && data().creators.edges.length > 0}>
<button onClick={() => {
const lastCursor: string = data().creators.edges[data().creators.edges.length-1].cursor
setAfter(lastCursor)
setQuery({first: 10, after: lastCursor})
}}>
load next
</button>
</Show>
</div>
</div>
)
}