55 lines
1.1 KiB
JavaScript
55 lines
1.1 KiB
JavaScript
|
import React from "react";
|
||
|
|
import { Box, Center } from "@chakra-ui/react";
|
||
|
|
import gql from "graphql-tag";
|
||
|
|
import { useQuery } from "@apollo/client";
|
||
|
|
|
||
|
|
import { ErrorMessage, Heading1 } from "./util";
|
||
|
|
import HangerSpinner from "./components/HangerSpinner";
|
||
|
|
import useRequireLogin from "./components/useRequireLogin";
|
||
|
|
|
||
|
|
function UserOutfitsPage() {
|
||
|
|
return (
|
||
|
|
<Box>
|
||
|
|
<Heading1>Your outfits</Heading1>
|
||
|
|
<UserOutfitsPageContent />
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function UserOutfitsPageContent() {
|
||
|
|
const { isLoading: userLoading } = useRequireLogin();
|
||
|
|
|
||
|
|
const { loading: queryLoading, error, data } = useQuery(
|
||
|
|
gql`
|
||
|
|
query UserOutfitsPageContent {
|
||
|
|
currentUser {
|
||
|
|
outfits {
|
||
|
|
id
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
{ skip: userLoading }
|
||
|
|
);
|
||
|
|
|
||
|
|
if (userLoading || queryLoading) {
|
||
|
|
return (
|
||
|
|
<Center>
|
||
|
|
<HangerSpinner />
|
||
|
|
</Center>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (error) {
|
||
|
|
return <ErrorMessage>Error loading outfits: {error.message}</ErrorMessage>;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<code>
|
||
|
|
<pre>Data: {JSON.stringify(data)}</pre>
|
||
|
|
</code>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default UserOutfitsPage;
|