Skip to content

Commit

Permalink
feat(frontend): display 3 point review in other places
Browse files Browse the repository at this point in the history
  • Loading branch information
@IgnisDa
IgnisDa committed Sep 14, 2024
1 parent 357ae1b commit a0c6660
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 91 deletions.
108 changes: 73 additions & 35 deletions apps/frontend/app/components/common.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ import {
IconEdit,
IconExternalLink,
IconFilterOff,
IconMoodEmpty,
IconMoodHappy,
IconMoodSad,
IconSearch,
IconStarFilled,
IconTrash,
Expand All @@ -51,7 +54,13 @@ import { $path } from "remix-routes";
import type { DeepPartial } from "ts-essentials";
import { match } from "ts-pattern";
import { withQuery } from "ufo";
import { dayjsLib, getSurroundingElements, reviewYellow } from "~/lib/generals";
import {
ThreePointSmileyRating,
convertDecimalToThreePointSmiley,
dayjsLib,
getSurroundingElements,
reviewYellow,
} from "~/lib/generals";
import {
useAppSearchParam,
useConfirmSubmit,
Expand Down Expand Up @@ -275,6 +284,22 @@ export const CollectionsFilter = (props: {
);
};

export const DisplayThreePointReview = (props: {
rating?: string | null;
size?: number;
}) =>
match(convertDecimalToThreePointSmiley(Number(props.rating || "")))
.with(ThreePointSmileyRating.Happy, () => (
<IconMoodHappy size={props.size || 20} color={reviewYellow} />
))
.with(ThreePointSmileyRating.Neutral, () => (
<IconMoodEmpty size={props.size || 20} color={reviewYellow} />
))
.with(ThreePointSmileyRating.Sad, () => (
<IconMoodSad size={props.size || 20} color={reviewYellow} />
))
.exhaustive();

export const ReviewItemDisplay = (props: {
review: DeepPartial<ReviewItem>;
entityLot: EntityLot;
Expand Down Expand Up @@ -346,41 +371,54 @@ export const ReviewItemDisplay = (props: {
) : null}
</Flex>
<Box ml="sm" mt="xs">
{isNumber(props.review.showExtraInformation?.season) ? (
<Text c="dimmed">
S{props.review.showExtraInformation.season}-E
{props.review.showExtraInformation.episode}
</Text>
) : null}
{isNumber(props.review.podcastExtraInformation?.episode) ? (
<Text c="dimmed">
EP-{props.review.podcastExtraInformation.episode}
</Text>
) : null}
{isNumber(props.review.animeExtraInformation?.episode) ? (
<Text c="dimmed">
EP-{props.review.animeExtraInformation.episode}
</Text>
) : null}
{isNumber(props.review.mangaExtraInformation?.chapter) ? (
<Text c="dimmed">
Ch-{props.review.mangaExtraInformation.chapter}
</Text>
) : null}
{isNumber(props.review.mangaExtraInformation?.volume) ? (
<Text c="dimmed">
VOL-{props.review.mangaExtraInformation.volume}
</Text>
) : null}
{(Number(props.review.rating) || 0) > 0 ? (
<Flex align="center" gap={4}>
<IconStarFilled size={16} style={{ color: reviewYellow }} />
<Text className={classes.text} fw="bold">
{props.review.rating}
{reviewScale === UserReviewScale.OutOfFive ? undefined : "%"}
<Group>
{(Number(props.review.rating) || 0) > 0
? match(userPreferences.general.reviewScale)
.with(UserReviewScale.ThreePointSmiley, () => (
<DisplayThreePointReview rating={props.review.rating} />
))
.otherwise(() => (
<Flex align="center" gap={4}>
<IconStarFilled
size={16}
style={{ color: reviewYellow }}
/>
<Text className={classes.text} fw="bold">
{props.review.rating}
{reviewScale === UserReviewScale.OutOfFive
? undefined
: "%"}
</Text>
</Flex>
))
: null}
{isNumber(props.review.showExtraInformation?.season) ? (
<Text c="dimmed">
S{props.review.showExtraInformation.season}-E
{props.review.showExtraInformation.episode}
</Text>
</Flex>
) : null}
) : null}
{isNumber(props.review.podcastExtraInformation?.episode) ? (
<Text c="dimmed">
EP-{props.review.podcastExtraInformation.episode}
</Text>
) : null}
{isNumber(props.review.animeExtraInformation?.episode) ? (
<Text c="dimmed">
EP-{props.review.animeExtraInformation.episode}
</Text>
) : null}
{isNumber(props.review.mangaExtraInformation?.chapter) ? (
<Text c="dimmed">
Ch-{props.review.mangaExtraInformation.chapter}
</Text>
) : null}
{isNumber(props.review.mangaExtraInformation?.volume) ? (
<Text c="dimmed">
VOL-{props.review.mangaExtraInformation.volume}
</Text>
) : null}
</Group>
{props.review.textRendered ? (
!props.review.isSpoiler ? (
<>
Expand Down
40 changes: 8 additions & 32 deletions apps/frontend/app/components/media.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,20 +28,11 @@ import {
UserReviewScale,
UserToMediaReason,
} from "@ryot/generated/graphql/backend/graphql";
import {
changeCase,
getInitials,
inRange,
isString,
snakeCase,
} from "@ryot/ts-utils";
import { changeCase, getInitials, isString, snakeCase } from "@ryot/ts-utils";
import {
IconBackpack,
IconBookmarks,
IconCloudDownload,
IconMoodEmpty,
IconMoodHappy,
IconMoodSad,
IconPlayerPlay,
IconRosetteDiscountCheck,
IconStarFilled,
Expand All @@ -50,10 +41,12 @@ import { useQuery } from "@tanstack/react-query";
import type { ReactNode, Ref } from "react";
import { match } from "ts-pattern";
import { withQuery } from "ufo";
import { MEDIA_DETAILS_HEIGHT } from "~/components/common";
import {
DisplayThreePointReview,
MEDIA_DETAILS_HEIGHT,
} from "~/components/common";
import { confirmWrapper } from "~/components/confirmation";
import {
ThreePointSmileyRating,
clientGqlService,
getPartialMetadataDetailsQuery,
queryFactory,
Expand Down Expand Up @@ -228,13 +221,6 @@ export const BaseMediaDisplayItem = (props: {
);
};

const convertDecimalToThreePointSmiley = (rating: number) =>
inRange(rating, 0, 33.4)
? ThreePointSmileyRating.Sad
: inRange(rating, 33.4, 66.8)
? ThreePointSmileyRating.Neutral
: ThreePointSmileyRating.Happy;

export const MetadataDisplayItem = (props: {
metadataId: string;
name?: string;
Expand Down Expand Up @@ -319,19 +305,9 @@ export const MetadataDisplayItem = (props: {
props.topRight
) : averageRating ? (
match(userPreferences.general.reviewScale)
.with(UserReviewScale.ThreePointSmiley, () =>
match(convertDecimalToThreePointSmiley(Number(averageRating)))
.with(ThreePointSmileyRating.Happy, () => (
<IconMoodHappy size={20} color={reviewYellow} />
))
.with(ThreePointSmileyRating.Neutral, () => (
<IconMoodEmpty size={20} color={reviewYellow} />
))
.with(ThreePointSmileyRating.Sad, () => (
<IconMoodSad size={20} color={reviewYellow} />
))
.exhaustive(),
)
.with(UserReviewScale.ThreePointSmiley, () => (
<DisplayThreePointReview rating={averageRating} />
))
.otherwise(() => (
<Group gap={4}>
<IconStarFilled size={12} style={{ color: reviewYellow }} />
Expand Down
9 changes: 8 additions & 1 deletion apps/frontend/app/lib/generals.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
SetLot,
UserMetadataDetailsDocument,
} from "@ryot/generated/graphql/backend/graphql";
import { isString } from "@ryot/ts-utils";
import { inRange, isString } from "@ryot/ts-utils";
import {
IconBook,
IconBook2,
Expand Down Expand Up @@ -92,6 +92,13 @@ export enum ThreePointSmileyRating {
Sad = "Sad",
}

export const convertDecimalToThreePointSmiley = (rating: number) =>
inRange(rating, 0, 33.4)
? ThreePointSmileyRating.Sad
: inRange(rating, 33.4, 66.8)
? ThreePointSmileyRating.Neutral
: ThreePointSmileyRating.Happy;

export const reviewYellow = "#EBE600FF";

export const getSetColor = (l: SetLot) =>
Expand Down
57 changes: 35 additions & 22 deletions apps/frontend/app/routes/_dashboard.media.item.$id._index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ import { z } from "zod";
import { zx } from "zodix";
import {
DisplayCollection,
DisplayThreePointReview,
MEDIA_DETAILS_HEIGHT,
MediaDetailsLayout,
ReviewItemDisplay,
Expand Down Expand Up @@ -466,28 +467,40 @@ export default function Page() {
</Text>
</Paper>
) : null}
{loaderData.userMetadataDetails.averageRating ? (
<Paper
p={4}
display="flex"
style={{
flexDirection: "column",
alignItems: "center",
gap: 6,
}}
>
<IconStarFilled size={22} style={{ color: reviewYellow }} />
<Text fz="sm">
{Number(loaderData.userMetadataDetails.averageRating).toFixed(
1,
)}
{userPreferences.general.reviewScale ===
UserReviewScale.OutOfFive
? undefined
: "%"}
</Text>
</Paper>
) : null}
{loaderData.userMetadataDetails.averageRating
? match(userPreferences.general.reviewScale)
.with(UserReviewScale.ThreePointSmiley, () => (
<DisplayThreePointReview
rating={loaderData.userMetadataDetails.averageRating}
size={40}
/>
))
.otherwise(() => (
<Paper
p={4}
display="flex"
style={{
flexDirection: "column",
alignItems: "center",
gap: 6,
}}
>
<IconStarFilled
size={22}
style={{ color: reviewYellow }}
/>
<Text fz="sm">
{Number(
loaderData.userMetadataDetails.averageRating,
).toFixed(1)}
{userPreferences.general.reviewScale ===
UserReviewScale.OutOfFive
? undefined
: "%"}
</Text>
</Paper>
))
: null}
</Group>
) : null}
{loaderData.userMetadataDetails?.inProgress ? (
Expand Down
9 changes: 8 additions & 1 deletion apps/frontend/app/routes/_dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ import {
LOGO_IMAGE_URL,
ThreePointSmileyRating,
Verb,
convertDecimalToThreePointSmiley,
getLot,
getVerb,
queryClient,
Expand Down Expand Up @@ -1186,7 +1187,13 @@ const ReviewEntityForm = ({
const [entityToReview] = useReviewEntity();
const [ratingInThreePointSmiley, setRatingInThreePointSmiley] = useState<
ThreePointSmileyRating | undefined
>();
>(
entityToReview?.existingReview?.rating
? convertDecimalToThreePointSmiley(
Number(entityToReview.existingReview.rating),
)
: undefined,
);

const SmileySurround = (props: {
children: React.ReactNode;
Expand Down

0 comments on commit a0c6660

Please sign in to comment.