Skip to content

Commit

Permalink
Format frontend with eslint
Browse files Browse the repository at this point in the history
  • Loading branch information
@haoyangw
haoyangw committed Oct 31, 2024
1 parent aaf8b20 commit cf30953
Show file tree
Hide file tree
Showing 7 changed files with 302 additions and 174 deletions.
49 changes: 32 additions & 17 deletions frontend/app/(authenticated)/ask/ask-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,20 +37,30 @@ interface AskPageProps {
isLoading: boolean;
}

const LimitAlert = ({ warningText, isRedAlert }: { warningText: string, isRedAlert: boolean }) => {
const LimitAlert = ({
warningText,
isRedAlert,
}: {
warningText: string;
isRedAlert: boolean;
}) => {
return (
<Alert
className="my-2 flex items-center space-x-2"
variant={`${isRedAlert ? "destructive" : "teal"}`}
>
<div className="flex items-center">
<CircleAlert className={`h-5 w-5 ${isRedAlert ? "" : "stroke-teal-700"}`} />
<CircleAlert
className={`h-5 w-5 ${isRedAlert ? "" : "stroke-teal-700"}`}
/>
</div>
<AlertDescription className={`${isRedAlert ? "" : "text-teal-700"} font-medium`}>
<AlertDescription
className={`${isRedAlert ? "" : "text-teal-700"} font-medium`}
>
{warningText}
</AlertDescription>
</Alert>
)
);
};

const AskPage = ({ setIsLoading, isLoading }: AskPageProps) => {
Expand All @@ -60,7 +70,8 @@ const AskPage = ({ setIsLoading, isLoading }: AskPageProps) => {
const [errorMsg, setErrorMsg] = useState<string | null>(null);
const user = useUserStore((store) => store.user);
const setLoggedIn = useUserStore((store) => store.setLoggedIn);
const isUserUnverified = user?.verified === false || user?.tier_id === UNVERIFIED_TIER_ID;
const isUserUnverified =
user?.verified === false || user?.tier_id === UNVERIFIED_TIER_ID;

if (!user) {
// This should be impossible.
Expand Down Expand Up @@ -143,18 +154,22 @@ const AskPage = ({ setIsLoading, isLoading }: AskPageProps) => {
</h1>
{isUserUnverified ? (
<LimitAlert
warningText="Verify your email to start asking essay questions."
isRedAlert={true} />
isRedAlert={true}
warningText="Verify your email to start asking essay questions." />
/>
) : hasTriesLeft ? (
<LimitAlert
warningText={
errorMsg ||
`You have ${triesLeft} ${triesLeft === 1 ? "question" : "questions"} left. It will reset on ${toQueryDateFriendly(getNextMonday())} 12:00AM.`
}
isRedAlert={errorMsg ? true : false}
/>
) : (
hasTriesLeft ? (
<LimitAlert
warningText={errorMsg || `You have ${triesLeft} ${triesLeft === 1 ? "question" : "questions"} left. It will reset on ${toQueryDateFriendly(getNextMonday())} 12:00AM.`}
isRedAlert={errorMsg ? true : false} />
) : (
<LimitAlert
warningText={`You've reached the question limit. It will reset on ${toQueryDateFriendly(getNextMonday())} 12:00AM.`}
isRedAlert={true} />
)
<LimitAlert
isRedAlert={true}
warningText={`You've reached the question limit. It will reset on ${toQueryDateFriendly(getNextMonday())} 12:00AM.`} />
/>
)}
<div className="w-full flex items-center gap-x-4 gap-y-6 flex-col md:flex-row">
<AutosizeTextarea
Expand All @@ -168,10 +183,10 @@ const AskPage = ({ setIsLoading, isLoading }: AskPageProps) => {
/>
<Button
className="w-full md:px-4 md:w-auto"
variant={isUserUnverified ? "destructive_outline" : "default"}
disabled={isUserUnverified || !hasTriesLeft}
onClick={handleAskQuestion}
size="lg"
variant={isUserUnverified ? "destructive_outline" : "default"}
>
<Wand2Icon className="mr-3" />
Ask
Expand Down
62 changes: 47 additions & 15 deletions frontend/app/(authenticated)/essay-feedback/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,18 @@ import { useState } from "react";
import { useForm } from "react-hook-form";
import { useRouter } from "next/navigation";
import { zodResolver } from "@hookform/resolvers/zod";
import { BookCheckIcon, BookOpenCheckIcon, CircleAlert, SparklesIcon } from "lucide-react";
import { HttpStatusCode } from "axios";
import {
BookCheckIcon,
BookOpenCheckIcon,
CircleAlert,
SparklesIcon,
} from "lucide-react";
import { z } from "zod";

import { createEssayEssaysPost, ParagraphType } from "@/client";
import Chip from "@/components/display/chip";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { AutosizeTextarea } from "@/components/ui/autosize-textarea";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
Expand All @@ -20,10 +27,12 @@ import {
FormMessage,
} from "@/components/ui/form";
import JippyIconSm from "@/public/jippy-icon/jippy-icon-sm";
import { HttpStatusCode } from "axios";
import { JippyTierID, tierIDToTierName, UNVERIFIED_TIER_ID } from "@/types/billing";
import { useUserStore } from "@/store/user/user-store-provider";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import {
JippyTierID,
tierIDToTierName,
UNVERIFIED_TIER_ID,
} from "@/types/billing";

interface Paragraph {
content: string;
Expand All @@ -43,7 +52,8 @@ const EssayFeedbackPage = () => {
const [isLoading, setIsLoading] = useState<boolean>(false);
const [errorMessage, setErrorMessage] = useState<string>("");

const isUserUnverified = user?.verified === false || user?.tier_id === UNVERIFIED_TIER_ID;
const isUserUnverified =
user?.verified === false || user?.tier_id === UNVERIFIED_TIER_ID;

// TODO: finalise limits
const formSchema = z.object({
Expand Down Expand Up @@ -102,19 +112,27 @@ const EssayFeedbackPage = () => {
if (response.error) {
if (response.status === HttpStatusCode.TooManyRequests) {
if (user?.tier_id == UNVERIFIED_TIER_ID) {
setErrorMessage("Verify your email now to gain access to essay feedback.");
setErrorMessage(
"Verify your email now to gain access to essay feedback.",
);
} else {
setErrorMessage(`You have reached your ${tierIDToTierName(user?.tier_id || JippyTierID.Free)} Tier limit for generating essay feedback. Consider upgrading your Tier for more.`);
setErrorMessage(
`You have reached your ${tierIDToTierName(user?.tier_id || JippyTierID.Free)} Tier limit for generating essay feedback. Consider upgrading your Tier for more.`,
);
}
} else {
setErrorMessage("Error while generating your essay feedback. Please try again.");
setErrorMessage(
"Error while generating your essay feedback. Please try again.",
);
}
} else {
const essayId = response.data.essay_id;
router.push(`/essay-feedback/${essayId}`);
}
} catch (error) {
setErrorMessage("Error while generating your essay feedback. Please try again.");
setErrorMessage(
"Error while generating your essay feedback. Please try again.",
);
console.log("Error fetching response", error);
} finally {
setIsLoading(false);
Expand Down Expand Up @@ -148,7 +166,10 @@ const EssayFeedbackPage = () => {
give you accurate and meaningful feedback!
</h2>
{errorMessage && (
<Alert className="flex flex-row items-center gap-x-2 mt-4" variant="destructive">
<Alert
className="flex flex-row items-center gap-x-2 mt-4"
variant="destructive"
>
<div className="flex items-center flex-shrink-0">
<CircleAlert className="h-5 w-5 stroke-red-500" />
</div>
Expand Down Expand Up @@ -208,7 +229,10 @@ const EssayFeedbackPage = () => {
</div>
{isUserUnverified && !errorMessage && (
<div className="pb-4">
<Alert className="flex flex-row items-center gap-x-2" variant="destructive">
<Alert
className="flex flex-row items-center gap-x-2"
variant="destructive"
>
<div className="flex items-center flex-shrink-0">
<CircleAlert className="h-5 w-5 stroke-red-500" />
</div>
Expand All @@ -221,16 +245,18 @@ const EssayFeedbackPage = () => {
<div className="grow flex flex-col">
<Form {...form}>
<form className="h-full" onSubmit={form.handleSubmit(onSubmit)}>
<div className={`flex flex-col py-6 lg:py-12 w-full bg-background rounded-lg border px-4 md:px-8 xl:px-24 justify-between ${isUserUnverified ? 'border-red-300' : ''}`}>
<div
className={`flex flex-col py-6 lg:py-12 w-full bg-background rounded-lg border px-4 md:px-8 xl:px-24 justify-between ${isUserUnverified ? "border-red-300" : ""}`}
>
<FormField
control={form.control}
name="gpQuestion"
render={({ field }) => (
<FormItem className="mb-2">
<FormControl>
<AutosizeTextarea
disabled={isUserUnverified}
className="bg-none border-none p-0 focus-visible:ring-0 focus-visible:ring-offset-0 resize-none text-3xl font-semibold text-primary-700"
disabled={isUserUnverified}
placeholder="Type your GP essay question"
{...field}
/>
Expand All @@ -246,8 +272,8 @@ const EssayFeedbackPage = () => {
<FormItem className="mb-2">
<FormControl>
<AutosizeTextarea
disabled={isUserUnverified}
className="bg-none border-none p-0 focus-visible:ring-0 focus-visible:ring-offset-0 resize-none text-lg overflow-x-hidden"
disabled={isUserUnverified}
placeholder="Type or paste your essay here"
{...field}
/>
Expand All @@ -257,7 +283,13 @@ const EssayFeedbackPage = () => {
)}
/>
</div>
<Button disabled={isUserUnverified} variant={isUserUnverified ? "destructive_outline" : "default"} className="mt-4" size="lg" type="submit">
<Button
className="mt-4"
disabled={isUserUnverified}
size="lg"
type="submit"
variant={isUserUnverified ? "destructive_outline" : "default"}
>
<SparklesIcon className="w-6 h-6 mr-3" />
Get Jippy&apos;s feedback
</Button>
Expand Down
16 changes: 9 additions & 7 deletions frontend/app/(authenticated)/user/billing/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { UNVERIFIED_TIER_ID } from "@/app/(authenticated)/verify-email/page";
import { UserPublic } from "@/client";
import PricingTable from "@/components/billing/pricing-table";
import SubscriptionCard from "@/components/billing/subscription-card";
import Chip from "@/components/display/chip";
import UnverifiedAlert from "@/components/navigation/unverified-alert";
import { Button } from "@/components/ui/button";
Expand All @@ -25,7 +26,6 @@ import {
tierIDToTierName,
TierPrice,
} from "@/types/billing";
import SubscriptionCard from "@/components/billing/subscription-card";

const FREE_TIER_ID = 1;
const TIER_STATUS_ACTIVE = "active";
Expand All @@ -35,7 +35,8 @@ const getPriceButtonText = (
user: UserPublic | undefined,
) => {
const userTierId = user?.tier_id || 1;
const isUserUnverified = user?.verified === false || userTierId === UNVERIFIED_TIER_ID;
const isUserUnverified =
user?.verified === false || userTierId === UNVERIFIED_TIER_ID;
if (isUserUnverified) {
return "Not allowed";
} else if (priceTierId == userTierId) {
Expand Down Expand Up @@ -63,8 +64,10 @@ const Page = () => {

const billingPath = usePathname();
const searchParams = useSearchParams();
const isUserUnverified = user?.verified === false || user?.tier_id === UNVERIFIED_TIER_ID;
const hasSubscription = user?.tier_id != JippyTierID.Free && user?.tier_id !== 4;
const isUserUnverified =
user?.verified === false || user?.tier_id === UNVERIFIED_TIER_ID;
const hasSubscription =
user?.tier_id != JippyTierID.Free && user?.tier_id !== 4;
let isSuccess = searchParams.get("success") === "true";
let stripeSessionId = searchParams.get("session_id");
let isCancelled = searchParams.get("cancelled") === "true";
Expand All @@ -82,7 +85,7 @@ const Page = () => {
return new Date(dateString);
}
return undefined;
}
};

const onClickDowngradeSubscription = () => {
downgradeSubscription.mutate();
Expand Down Expand Up @@ -175,8 +178,7 @@ const Page = () => {
</div>
<div className="flex flex-col gap-8 px-8 md:px-16 xl:px-56">
<div className="flex flex-col gap-4 w-auto pb-4">
<SubscriptionCard
user={user} />
<SubscriptionCard user={user} />
</div>
<div className="flex flex-col gap-4 w-auto pb-4">
<h2 className="text-2xl 2xl:text-3xl font-bold">Our Tiers</h2>
Expand Down
Loading

0 comments on commit cf30953

Please sign in to comment.