Skip to content

Commit

Permalink
chore(frontend): adapt to new gql schema
Browse files Browse the repository at this point in the history
  • Loading branch information
@IgnisDa
IgnisDa committed Dec 23, 2024
1 parent f0abd08 commit 7af5850
Showing 1 changed file with 33 additions and 53 deletions.
86 changes: 33 additions & 53 deletions apps/frontend/app/routes/_dashboard.media.$action.$lot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ import {
MetadataListDocument,
MetadataSearchDocument,
type MetadataSearchQuery,
type UserReviewScale,
} from "@ryot/generated/graphql/backend/graphql";
import { changeCase, snakeCase, startCase } from "@ryot/ts-utils";
import {
Expand Down Expand Up @@ -222,7 +221,6 @@ export const meta = ({ params }: MetaArgs<typeof loader>) => {

export default function Page() {
const loaderData = useLoaderData<typeof loader>();
const userPreferences = useUserPreferences();
const [_, { setP }] = useAppSearchParam(loaderData.cookieName);
const [
filtersModalOpened,
Expand All @@ -238,6 +236,7 @@ export default function Page() {
loaderData.mediaList?.url.sortOrder !== defaultFilters.mineSortOrder ||
loaderData.mediaList?.url.sortBy !== defaultFilters.mineSortBy ||
loaderData.mediaList?.url.collections !== defaultFilters.mineCollection;
const mediaSearch = loaderData.mediaSearch;

return (
<Container>
Expand Down Expand Up @@ -360,64 +359,55 @@ export default function Page() {
) : null}
</>
) : null}
{loaderData.mediaSearch ? (
{mediaSearch ? (
<>
<Flex gap="xs">
<DebouncedSearchInput
initialValue={loaderData.query.query}
enhancedQueryParams={loaderData.cookieName}
placeholder={`Sift through your ${changeCase(
loaderData.lot.toLowerCase(),
).toLowerCase()}s`}
initialValue={loaderData.query.query}
enhancedQueryParams={loaderData.cookieName}
/>
{loaderData.mediaSearch.mediaSources.length > 1 ? (
{mediaSearch.mediaSources.length > 1 ? (
<Select
value={loaderData.mediaSearch.url.source}
data={loaderData.mediaSearch.mediaSources.map((o) => ({
value: o.toString(),
label: startCase(o.toLowerCase()),
}))}
value={mediaSearch.url.source}
onChange={(v) => {
if (v) setP("source", v);
}}
data={mediaSearch.mediaSources.map((o) => ({
value: o.toString(),
label: startCase(o.toLowerCase()),
}))}
/>
) : null}
</Flex>
{loaderData.mediaSearch.search === false ? (
{mediaSearch.search === false ? (
<Text>
Something is wrong. Please try with an alternate provider.
</Text>
) : loaderData.mediaSearch.search.details.total > 0 ? (
) : mediaSearch.search.details.total > 0 ? (
<>
<Box>
<Text display="inline" fw="bold">
{loaderData.mediaSearch.search.details.total}
{mediaSearch.search.details.total}
</Text>{" "}
items found
</Box>
<ApplicationGrid>
{loaderData.mediaSearch.search.items.map((b, idx) => (
{mediaSearch.search.items.map((b) => (
<MediaSearchItem
idx={idx}
action={Action.Search}
key={b.item.identifier}
item={b}
maybeItemId={b.databaseId ?? undefined}
hasInteracted={b.hasInteracted}
lot={loaderData.lot}
source={
loaderData.mediaSearch?.url.source ||
MediaSource.Anilist
}
reviewScale={userPreferences.general.reviewScale}
key={b.identifier}
source={mediaSearch.url.source}
/>
))}
</ApplicationGrid>
</>
) : (
<Text>No media found matching your query</Text>
)}
{loaderData.mediaSearch.search ? (
{mediaSearch.search ? (
<Center>
<Pagination
size="sm"
Expand All @@ -435,16 +425,11 @@ export default function Page() {
}

const MediaSearchItem = (props: {
item: MetadataSearchQuery["metadataSearch"]["items"][number];
idx: number;
lot: MediaLot;
source: MediaSource;
action: "search" | "list";
hasInteracted: boolean;
reviewScale: UserReviewScale;
maybeItemId?: string;
item: MetadataSearchQuery["metadataSearch"]["items"][number];
}) => {
const navigate = useNavigate();
const loaderData = useLoaderData<typeof loader>();
const userDetails = useUserDetails();
const userPreferences = useUserPreferences();
const gridPacking = userPreferences.general.gridPacking;
Expand All @@ -454,12 +439,11 @@ const MediaSearchItem = (props: {
const [_, setMetadataToUpdate] = useMetadataProgressUpdate();
const [_a, setAddEntityToCollectionData] = useAddEntityToCollection();
const basicCommit = async () => {
if (props.maybeItemId) return props.maybeItemId;
setIsLoading(true);
const data = new FormData();
data.append("name", props.item.item.title);
data.append("identifier", props.item.item.identifier);
data.append("lot", props.lot);
data.append("name", props.item.title);
data.append("identifier", props.item.identifier);
data.append("lot", loaderData.lot);
data.append("source", props.source);
const resp = await fetch($path("/actions", { intent: "commitMedia" }), {
method: "POST",
Expand All @@ -477,27 +461,23 @@ const MediaSearchItem = (props: {
<Box>
<BaseMediaDisplayItem
isLoading={false}
name={props.item.item.title}
onImageClickBehavior={async () => {
setIsLoading(true);
const id = await basicCommit();
setIsLoading(false);
navigate($path("/media/item/:id", { id }));
}}
name={props.item.title}
imageUrl={props.item.image}
labels={{
left: props.item.item.publishYear,
right: (
<Text c={props.hasInteracted ? "yellow" : undefined}>
{changeCase(snakeCase(props.lot))}
</Text>
),
left: props.item.publishYear,
right: <Text>{changeCase(snakeCase(loaderData.lot))}</Text>,
}}
imageUrl={props.item.item.image}
imageOverlay={{
topLeft: isLoading ? (
<Loader color="red" variant="bars" size="sm" m={2} />
) : null,
}}
onImageClickBehavior={async () => {
setIsLoading(true);
const id = await basicCommit();
setIsLoading(false);
navigate($path("/media/item/:id", { id }));
}}
nameRight={
<Menu shadow="md">
<Menu.Target>
Expand Down Expand Up @@ -532,7 +512,7 @@ const MediaSearchItem = (props: {
setMetadataToUpdate({ metadataId });
}}
>
Mark as {getVerb(Verb.Read, props.lot)}
Mark as {getVerb(Verb.Read, loaderData.lot)}
</Button>
<Button
w="100%"
Expand Down

0 comments on commit 7af5850

Please sign in to comment.