-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: mark avatars for often use (#32)
* feat: mark avatars for often use * fix: 🐛 router.replace instead of router.reload * refactor: update cache for client-side data-fetching
- Loading branch information
1 parent
bae59e8
commit 8448784
Showing
16 changed files
with
428 additions
and
197 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import Link from "next/link" | ||
| import { useRouter } from "next/router" | ||
|
|
||
| import { IconBookmark, IconMessage } from "@tabler/icons-react" | ||
| import { useMutation } from "@tanstack/react-query" | ||
|
|
||
| import { Avatar } from "~/types" | ||
|
|
||
| import { AvatarInfoCard } from "./AvatarInfoCard" | ||
|
|
||
| export function AvatarCardWithMarkIcon({ avatar }: { avatar: Avatar & { isMarked: boolean } }) { | ||
| const router = useRouter() | ||
|
|
||
| const markAvatarMutation = useMutation({ | ||
| mutationFn: async (data: { avatar_username: string }) => { | ||
| const res = await fetch("/api/avatarMark", { | ||
| method: "POST", | ||
| headers: { | ||
| "Content-Type": "application/json" | ||
| }, | ||
| body: JSON.stringify(data) | ||
| }) | ||
| return res.json() | ||
| }, | ||
| onSuccess: () => { | ||
| router.replace(router.asPath) | ||
| } | ||
| }) | ||
|
|
||
| const unMarkAvatarMutation = useMutation({ | ||
| mutationFn: async (data: { avatar_username: string }) => { | ||
| const res = await fetch("/api/avatarUnMark", { | ||
| method: "POST", | ||
| headers: { | ||
| "Content-Type": "application/json" | ||
| }, | ||
| body: JSON.stringify(data) | ||
| }) | ||
| return res.json() | ||
| }, | ||
| onSuccess: () => { | ||
| router.replace(router.asPath) | ||
| } | ||
| }) | ||
|
|
||
| return ( | ||
| <div | ||
| key={avatar.id} | ||
| className="flex h-full flex-col justify-between divide-y divide-gray-200 rounded-lg bg-white shadow" | ||
| > | ||
| <AvatarInfoCard avatar={avatar} /> | ||
| <div> | ||
| <div className="-mt-px flex divide-x divide-gray-200"> | ||
| <div className="flex w-0 flex-1"> | ||
| <Link | ||
| href={`/chat/${avatar.username}`} | ||
| className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900" | ||
| > | ||
| <IconMessage className="h-5 w-5 text-gray-400" aria-hidden="true" /> | ||
| Chat | ||
| </Link> | ||
| </div> | ||
|
|
||
| <div className="-ml-px flex w-0 flex-1"> | ||
| {avatar.isMarked ? ( | ||
| <button | ||
| onClick={() => { | ||
| unMarkAvatarMutation.mutate({ avatar_username: avatar.username }) | ||
| }} | ||
| className="relative inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-gray-900" | ||
| > | ||
| <IconBookmark className="h-5 w-5 fill-blue-500 text-blue-500" aria-hidden="true" /> | ||
| marked | ||
| </button> | ||
| ) : ( | ||
| <button | ||
| onClick={() => { | ||
| markAvatarMutation.mutate({ avatar_username: avatar.username }) | ||
| }} | ||
| className="relative inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-gray-900" | ||
| > | ||
| <IconBookmark className="h-5 w-5 text-gray-400" aria-hidden="true" /> | ||
| mark | ||
| </button> | ||
| )} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import Link from "next/link" | ||
|
|
||
| import { IconDatabase, IconMessage } from "@tabler/icons-react" | ||
|
|
||
| import { Avatar } from "~/types" | ||
|
|
||
| import { AvatarInfoCard } from "./AvatarInfoCard" | ||
|
|
||
| export function AvatarCardWithSettings({ avatar }: { avatar: Avatar }) { | ||
| return ( | ||
| <div | ||
| key={avatar.id} | ||
| className="flex h-full flex-col justify-between divide-y divide-gray-200 rounded-lg bg-white shadow" | ||
| > | ||
| <AvatarInfoCard avatar={avatar} /> | ||
| <div> | ||
| <div className="-mt-px flex divide-x divide-gray-200"> | ||
| <div className="flex w-0 flex-1"> | ||
| <Link | ||
| href={`/chat/${avatar.username}`} | ||
| className="relative -mr-px inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-bl-lg border border-transparent py-4 text-sm font-semibold text-gray-900" | ||
| > | ||
| <IconMessage className="h-5 w-5 text-gray-400" aria-hidden="true" /> | ||
| Chat | ||
| </Link> | ||
| </div> | ||
|
|
||
| <div className="-ml-px flex w-0 flex-1"> | ||
| <Link | ||
| href={`/settings/avatars/${avatar.username}`} | ||
| className="relative inline-flex w-0 flex-1 items-center justify-center gap-x-3 rounded-br-lg border border-transparent py-4 text-sm font-semibold text-gray-900" | ||
| > | ||
| <IconDatabase className="h-5 w-5 text-gray-400" aria-hidden="true" /> | ||
| Settings | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import Link from "next/link" | ||
|
|
||
| import { Avatar } from "~/types" | ||
|
|
||
| export function AvatarInfoCard({ avatar }: { avatar: Avatar }) { | ||
| return ( | ||
| <div className="flex w-full items-center justify-between space-x-6 p-6"> | ||
| <div className="flex-1 truncate"> | ||
| <div className="flex items-center justify-between space-x-3"> | ||
| <h3 className="truncate text-lg font-medium text-gray-900">{avatar.name}</h3> | ||
| {avatar.status !== "public" ? ( | ||
| <span className="inline-block flex-shrink-0 rounded-full bg-slate-300 px-2 py-0.5 text-xs font-medium text-slate-800"> | ||
| {avatar.status} | ||
| </span> | ||
| ) : null} | ||
| </div> | ||
| <p className=" text-sm">@{avatar.username}</p> | ||
| <p className="mt-1 truncate text-sm text-gray-500">{avatar.bio ?? ""}</p> | ||
| </div> | ||
|
|
||
| <Link href={`/avatars/${avatar.username}`}> | ||
| {avatar.avatar_url ? ( | ||
| <> | ||
| <div className="avatar"> | ||
| <img className="!h-16 !w-16 rounded-full" src={avatar.avatar_url} alt={`Avatar of ${avatar.name}`} /> | ||
| </div> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <div className="placeholder avatar"> | ||
| <div className="!h-16 !w-16 rounded-full bg-neutral-focus text-neutral-content"> | ||
| <span className="text-4xl">{avatar?.name?.[0]}</span> | ||
| </div> | ||
| </div> | ||
| </> | ||
| )} | ||
| </Link> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.
8448784There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
aier – ./
aier-thaddeusjiang.vercel.app
www.aier.app
aier-git-dev-thaddeusjiang.vercel.app
aier.app