Skip to content

Commit

Permalink
fix: show add feed error message
Browse files Browse the repository at this point in the history 
Signed-off-by: Innei <i@innei.in>
  • Loading branch information
@Innei
Innei committed Aug 6, 2024
1 parent f43e7e5 commit 7763129
Show file tree
Hide file tree
Showing 3 changed files with 197 additions and 162 deletions.
2 changes: 1 addition & 1 deletion src/renderer/src/initialize/posthog.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ declare global {
}
}
export const initPostHog = async () => {
// if (import.meta.env.DEV) return
if (import.meta.env.DEV) return
const { default: posthog } = await import("posthog-js")

if (env.VITE_POSTHOG_KEY === undefined) return
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/lib/query-client.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { FetchError } from "ofetch"

import { QUERY_PERSIST_KEY } from "../constants/app"

const DO_NOT_RETRY_CODES = new Set([401, 403, 404, 422])
const DO_NOT_RETRY_CODES = new Set([400, 401, 403, 404, 422])
const queryClient = new QueryClient({
defaultOptions: {
queries: {
Expand Down
355 changes: 195 additions & 160 deletions src/renderer/src/modules/discover/feed-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import { Queries } from "@renderer/queries"
import { useFeed } from "@renderer/queries/feed"
import { feedUnreadActions } from "@renderer/store/unread"
import { useMutation } from "@tanstack/react-query"
import { useEffect, useRef } from "react"
import { Fragment, useEffect, useRef } from "react"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { z } from "zod"
Expand Down Expand Up @@ -58,6 +58,72 @@ export const FeedForm: Component<{
})

const isSubscribed = !!feed.data?.subscription

return (
<div
className={cn(
"flex h-full flex-col",
asWidget ?
"min-h-[420px] w-[550px] max-w-full" :
"px-[18px] pb-[18px] pt-12",
)}
>
{!asWidget && (
<div className="mb-4 mt-2 flex items-center gap-2 text-[22px] font-bold">
<Logo className="size-8" />
{isSubscribed ? "Update" : "Add"}
{" "}
follow
</div>
)}
{feed.isLoading ? (
<div className="flex flex-1 items-center justify-center">
<LoadingCircle size="large" />
</div>
) : !feed.data?.feed ?
(
<div className="flex flex-1 flex-col items-center justify-center gap-2">
{feed.error ? (
<div className="center flex-col gap-3">
<i className="i-mgc-bug-cute-re size-7 text-red-500" />
<p>Error in fetching feed.</p>
<p className="break-all px-8 text-center">{getFetchErrorMessage(feed.error)}</p>
</div>
) : (
<Fragment>
<p>Feed not found.</p>
<p>{url}</p>
</Fragment>
)}
</div>
) :
(
<FeedInnerForm {...{ defaultValues, id, url, asWidget, onSuccess }} />
)}
</div>
)
}

const FeedInnerForm = ({
defaultValues,
id,
url,
asWidget,
onSuccess,
}: {
defaultValues?: z.infer<typeof formSchema>
url?: string
id?: string
asWidget?: boolean
onSuccess?: () => void
}) => {
const feed = useFeed({
url,
id,
})!
const buttonRef = useRef<HTMLButtonElement>(null)
const isSubscribed = !!feed.data?.subscription

const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues,
Expand Down Expand Up @@ -150,171 +216,140 @@ export const FeedForm: Component<{
Queries.subscription.categories(Number.parseInt(form.watch("view"))),
)

const buttonRef = useRef<HTMLButtonElement>(null)
useEffect(() => {
if (feed.isSuccess) nextFrame(() => buttonRef.current?.focus())
}, [feed.isSuccess])

return (
<div
className={cn(
"flex h-full flex-col",
asWidget ?
"min-h-[420px] w-[550px] max-w-full" :
"px-[18px] pb-[18px] pt-12",
)}
>
{!asWidget && (
<div className="mb-4 mt-2 flex items-center gap-2 text-[22px] font-bold">
<Logo className="size-8" />
{isSubscribed ? "Update" : "Add"}
{" "}
follow
</div>
)}
{feed.isLoading ? (
<div className="flex flex-1 items-center justify-center">
<LoadingCircle size="large" />
</div>
) : !feed.data?.feed ?
(
<div className="flex flex-1 flex-col items-center justify-center gap-2">
<p>Feed not found.</p>
<p>{url}</p>
</div>
) :
(
<div className="flex flex-1 flex-col gap-y-4">
<Card>
<CardHeader>
<FollowSummary feed={feed.data?.feed} />
</CardHeader>
</Card>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="flex flex-1 flex-col gap-y-4"
>
<FormField
control={form.control}
name="view"
render={() => (
<FormItem>
<FormLabel>View</FormLabel>
<Card>
<CardHeader className="grid grid-cols-6 space-y-0 px-2 py-3">
{views.map((view) => (
<div key={view.name}>
<input
className="peer hidden"
type="radio"
id={view.name}
value={view.view}
{...form.register("view")}
/>
<label
htmlFor={view.name}
className={cn(
view.peerClassName,
"center flex h-10 flex-col text-xs leading-none text-theme-vibrancyFg",
)}
>
<span className="text-lg">{view.icon}</span>
{view.name}
</label>
</div>
))}
</CardHeader>
</Card>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="category"
render={({ field }) => (
<FormItem>
<div>
<FormLabel>Category</FormLabel>
<FormDescription>
By default, your follows will be grouped by website.
</FormDescription>
</div>
<FormControl>
<div>
<Autocomplete
maxHeight={window.innerHeight < 600 ? 120 : 240}
portal
suggestions={categories.data?.map((i) => ({
name: i,
value: i,
})) || []}
{...(field as any)}
onSuggestionSelected={(suggestion) => {
field.onChange(suggestion.value)
}}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="isPrivate"
render={({ field }) => (
<FormItem>
<div className="flex items-center justify-between">
<div>
<FormLabel>Private Follow</FormLabel>
<FormDescription>
Whether this follow is publicly visible on your
profile page.
</FormDescription>
</div>
<FormControl>
<Switch
className="shrink-0"
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</div>
</FormItem>
)}
/>

<div className="flex flex-1 items-end justify-end gap-4">
{isSubscribed && (
<StyledButton
ref={buttonRef}
variant="text"
isLoading={deleteSubscription.isPending}
className="text-red-500"
onClick={(e) => {
e.preventDefault()
if (feed.data?.subscription) {
deleteSubscription.mutate(feed.data.subscription)
}
}}
>
Unfollow
</StyledButton>
)}
<StyledButton
ref={buttonRef}
type="submit"
isLoading={followMutation.isPending}
>
{isSubscribed ? "Update" : "Follow"}
</StyledButton>
<div className="flex flex-1 flex-col gap-y-4">
<Card>
<CardHeader>
<FollowSummary feed={feed.data!.feed} />
</CardHeader>
</Card>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="flex flex-1 flex-col gap-y-4"
>
<FormField
control={form.control}
name="view"
render={() => (
<FormItem>
<FormLabel>View</FormLabel>
<Card>
<CardHeader className="grid grid-cols-6 space-y-0 px-2 py-3">
{views.map((view) => (
<div key={view.name}>
<input
className="peer hidden"
type="radio"
id={view.name}
value={view.view}
{...form.register("view")}
/>
<label
htmlFor={view.name}
className={cn(
view.peerClassName,
"center flex h-10 flex-col text-xs leading-none text-theme-vibrancyFg",
)}
>
<span className="text-lg">{view.icon}</span>
{view.name}
</label>
</div>
))}
</CardHeader>
</Card>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="category"
render={({ field }) => (
<FormItem>
<div>
<FormLabel>Category</FormLabel>
<FormDescription>
By default, your follows will be grouped by website.
</FormDescription>
</div>
<FormControl>
<div>
<Autocomplete
maxHeight={window.innerHeight < 600 ? 120 : 240}
portal
suggestions={categories.data?.map((i) => ({
name: i,
value: i,
})) || []}
{...(field as any)}
onSuggestionSelected={(suggestion) => {
field.onChange(suggestion.value)
}}
/>
</div>
</form>
</Form>
</div>
)}
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="isPrivate"
render={({ field }) => (
<FormItem>
<div className="flex items-center justify-between">
<div>
<FormLabel>Private Follow</FormLabel>
<FormDescription>
Whether this follow is publicly visible on your profile
page.
</FormDescription>
</div>
<FormControl>
<Switch
className="shrink-0"
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl>
</div>
</FormItem>
)}
/>

<div className="flex flex-1 items-end justify-end gap-4">
{isSubscribed && (
<StyledButton
ref={buttonRef}
variant="text"
isLoading={deleteSubscription.isPending}
className="text-red-500"
onClick={(e) => {
e.preventDefault()
if (feed.data?.subscription) {
deleteSubscription.mutate(feed.data.subscription)
}
}}
>
Unfollow
</StyledButton>
)}
<StyledButton
ref={buttonRef}
type="submit"
isLoading={followMutation.isPending}
>
{isSubscribed ? "Update" : "Follow"}
</StyledButton>
</div>
</form>
</Form>
</div>
)
}

0 comments on commit 7763129

Please sign in to comment.