Skip to content

Commit

Permalink
feat: use user.handle default to share profile url
Browse files Browse the repository at this point in the history 
Signed-off-by: Innei <i@innei.in>
  • Loading branch information
@Innei
Innei committed Sep 19, 2024
1 parent 4fb1487 commit 36d51d9
Show file tree
Hide file tree
Showing 7 changed files with 144 additions and 122 deletions.
4 changes: 3 additions & 1 deletion apps/renderer/src/modules/profile/user-profile-modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,9 @@ export const UserProfileModalContent: FC<{
<ActionButton
tooltip={t("user_profile.share")}
onClick={() => {
window.open(`${env.VITE_WEB_URL}/profile/${user.data?.id}`)
window.open(
`${env.VITE_WEB_URL}/profile/${user.data?.handle ? `@${user.data.handle}` : user.data?.id}`,
)
}}
>
<i className="i-mgc-share-3-cute-re" />
Expand Down
4 changes: 3 additions & 1 deletion apps/renderer/src/pages/(external)/(with-layout)/feed/[id]/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next"
import { useParams, useSearchParams } from "react-router-dom"
import { toast } from "sonner"

import { PoweredByFooter } from "~/components/common/PoweredByFooter"
import { FeedIcon } from "~/components/feed-icon"
import { FollowIcon } from "~/components/icons/follow"
import { Button } from "~/components/ui/button"
Expand Down Expand Up @@ -66,7 +67,7 @@ export function Component() {
return (
<>
{feed.isLoading ? (
<LoadingCircle size="large" className="center h-48 w-full max-w-full" />
<LoadingCircle size="large" className="center fixed inset-0" />
) : (
feed.data?.feed && (
<div className="mx-auto mt-12 flex max-w-5xl flex-col items-center justify-center p-4 lg:p-0">
Expand Down Expand Up @@ -151,6 +152,7 @@ export function Component() {
</a>
))}
</div>
<PoweredByFooter className="pb-12" />
</div>
)
)}
Expand Down
5 changes: 0 additions & 5 deletions apps/renderer/src/pages/(external)/(with-layout)/feed/[id]/layout.tsx
View file

This file was deleted.

2 changes: 1 addition & 1 deletion apps/renderer/src/pages/(external)/(with-layout)/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export function Component() {
return (
<>
<Header />
<main className="pt-[80px]">
<main className="flex h-full grow flex-col pt-[80px]">
<Outlet />
</main>
</>
Expand Down
160 changes: 84 additions & 76 deletions apps/renderer/src/pages/(external)/(with-layout)/profile/[id]/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Fragment } from "react/jsx-runtime"
import { useParams } from "react-router-dom"

import { useWhoami } from "~/atoms/user"
Expand All @@ -18,10 +19,14 @@ export function Component() {
const t = useI18n()
const { id } = useParams()

const isHandle = id?.startsWith("@")
const user = useAuthQuery(
defineQuery(["profiles", id], async () => {
const res = await apiClient.profiles.$get({
query: { id: id! },
query: {
handle: isHandle ? id?.slice(1) : undefined,
id: isHandle ? undefined : id,
},
})
return res.data
}),
Expand All @@ -36,84 +41,87 @@ export function Component() {
const isMe = user.data?.id === me?.id
const presentFeedFormModal = usePresentFeedFormModal()

return user.isLoading ? (
<LoadingCircle size="large" className="center h-48 w-full max-w-full" />
) : (
<div className="container mx-auto mt-12 flex flex-col items-center justify-center p-4 lg:p-0">
<Avatar className="aspect-square size-16">
<AvatarImage
className="duration-200 animate-in fade-in-0"
src={user.data?.image || undefined}
/>
<AvatarFallback>{user.data?.name?.slice(0, 2)}</AvatarFallback>
</Avatar>
<div className="flex flex-col items-center">
<div className="mb-2 mt-4 flex items-center text-2xl font-bold">
<h1>{user.data?.name}</h1>
</div>
<div className="mb-8 text-sm text-zinc-500">{user.data?.handle}</div>
</div>
<div className="mb-12 w-[70ch] max-w-full space-y-10">
{subscriptions.isLoading ? (
<LoadingCircle size="large" className="center h-48 w-full max-w-full" />
) : (
Object.keys(subscriptions.data || {}).map((category) => (
<div key={category}>
<div className="mb-4 flex items-center text-2xl font-bold">
<h3>{category}</h3>
</div>
<div>
{subscriptions.data?.[category].map((subscription) => (
<div key={subscription.feedId} className="group relative border-b py-5">
<a
className="flex flex-1 cursor-default"
href={`/feed/${subscription.feedId}`}
target="_blank"
>
<FeedIcon fallback feed={subscription.feeds} size={22} className="mr-3" />
<div
className={cn(
"flex w-0 flex-1 grow flex-col justify-center",
"group-hover:grow-[0.85]",
)}
>
<div className="truncate font-medium leading-none">
{subscription.feeds?.title}
</div>
{subscription.feeds?.description && (
<div className="mt-1 line-clamp-1 text-xs text-zinc-500">
{subscription.feeds.description}
return (
<div className="container mx-auto mt-12 flex grow flex-col items-center p-4 lg:p-0">
{user.isLoading ? (
<LoadingCircle size="large" className="center fixed inset-0" />
) : (
<Fragment>
<Avatar className="aspect-square size-16">
<AvatarImage
className="duration-200 animate-in fade-in-0"
src={user.data?.image || undefined}
/>
<AvatarFallback>{user.data?.name?.slice(0, 2)}</AvatarFallback>
</Avatar>
<div className="flex flex-col items-center">
<div className="mb-2 mt-4 flex items-center text-2xl font-bold">
<h1>{user.data?.name}</h1>
</div>
<div className="mb-8 text-sm text-zinc-500">{user.data?.handle}</div>
</div>
<div className="mb-12 w-[70ch] max-w-full grow space-y-10">
{subscriptions.isLoading ? (
<LoadingCircle size="large" className="center fixed inset-0" />
) : (
Object.keys(subscriptions.data || {}).map((category) => (
<div key={category}>
<div className="mb-4 flex items-center text-2xl font-bold">
<h3>{category}</h3>
</div>
<div>
{subscriptions.data?.[category].map((subscription) => (
<div key={subscription.feedId} className="group relative border-b py-5">
<a
className="flex flex-1 cursor-default"
href={`/feed/${subscription.feedId}`}
target="_blank"
>
<FeedIcon fallback feed={subscription.feeds} size={22} className="mr-3" />
<div
className={cn(
"flex w-0 flex-1 grow flex-col justify-center",
"group-hover:grow-[0.85]",
)}
>
<div className="truncate font-medium leading-none">
{subscription.feeds?.title}
</div>
{subscription.feeds?.description && (
<div className="mt-1 line-clamp-1 text-xs text-zinc-500">
{subscription.feeds.description}
</div>
)}
</div>
)}
</div>
</a>
<span className="center absolute inset-y-0 right-0 opacity-0 transition-opacity group-hover:opacity-100">
<Button
onClick={(e) => {
e.stopPropagation()
</a>
<span className="center absolute inset-y-0 right-0 opacity-0 transition-opacity group-hover:opacity-100">
<Button
onClick={(e) => {
e.stopPropagation()

presentFeedFormModal(subscription.feedId)
}}
>
{isMe ? (
t.common("words.edit")
) : (
<>
<FollowIcon className="mr-1 size-3" />
{APP_NAME}
</>
)}
</Button>
</span>
presentFeedFormModal(subscription.feedId)
}}
>
{isMe ? (
t.common("words.edit")
) : (
<>
<FollowIcon className="mr-1 size-3" />
{APP_NAME}
</>
)}
</Button>
</span>
</div>
))}
</div>
))}
</div>
</div>
))
)}
</div>

<PoweredByFooter className="pb-12" />
</div>
))
)}
</div>
<PoweredByFooter className="pb-12" />
</Fragment>
)}
</div>
)
}
14 changes: 0 additions & 14 deletions apps/renderer/src/pages/(external)/(with-layout)/profile/[id]/layout.tsx
View file

This file was deleted.

Loading

0 comments on commit 36d51d9

Please sign in to comment.