xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

fix dashboard bug

This commit is contained in:
daniel31x13 2024-09-10 00:09:33 -04:00
parent 5e7835b4d5
commit fb1869ca7a
6 changed files with 65 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/LinkViews/LinkComponents/LinkActions.tsx
View File

@ -12,14 +12,16 @@ import { useDeleteLink, useGetLink, useUpdateLink } from "@/hooks/store/links";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import LinkModal from "@/components/ModalContent/LinkModal"; import LinkModal from "@/components/ModalContent/LinkModal";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import clsx from "clsx";
type Props = { type Props = {
link: LinkIncludingShortenedCollectionAndTags; link: LinkIncludingShortenedCollectionAndTags;
collection: CollectionIncludingMembersAndLinkCount; collection: CollectionIncludingMembersAndLinkCount;
className?: string; className?: string;
btnStyle?: string;
}; };
export default function LinkActions({ link, className }: Props) { export default function LinkActions({ link, className, btnStyle }: Props) {
const { t } = useTranslation(); const { t } = useTranslation();
const permissions = usePermissions(link.collection.id as number); const permissions = usePermissions(link.collection.id as number);
@ -85,13 +87,17 @@ export default function LinkActions({ link, className }: Props) {
<> <>
{isPublicRoute ? ( {isPublicRoute ? (
<div <div
className={`absolute ${className || "top-3 right-3"} z-20`} className={clsx(
className || "top-3 right-3",
"absolute z-20",
btnStyle
)}
tabIndex={0} tabIndex={0}
role="button" role="button"
onMouseDown={dropdownTriggerer} onMouseDown={dropdownTriggerer}
onClick={() => setLinkModal(true)} onClick={() => setLinkModal(true)}
> >
<div className="btn btn-ghost btn-sm btn-square text-neutral"> <div className="btn btn-sm btn-square text-neutral">
<i title="More" className="bi-three-dots text-xl" /> <i title="More" className="bi-three-dots text-xl" />
</div> </div>
</div> </div>
@ -105,7 +111,7 @@ export default function LinkActions({ link, className }: Props) {
tabIndex={0} tabIndex={0}
role="button" role="button"
onMouseDown={dropdownTriggerer} onMouseDown={dropdownTriggerer}
className="btn btn-sm btn-square text-neutral" className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}
> >
<i title="More" className="bi-three-dots text-xl" /> <i title="More" className="bi-three-dots text-xl" />
</div> </div>

7
components/LinkViews/LinkComponents/LinkList.tsx
View File

@ -93,7 +93,7 @@ export default function LinkCardCompact({ link, editMode }: Props) {
return ( return (
<> <>
<div <div
className={`${selectedStyle} rounded-md border relative items-center flex ${ className={`${selectedStyle} rounded-md border relative group items-center flex ${
!isPWA() ? "hover:bg-base-300 px-2 py-1" : "py-1" !isPWA() ? "hover:bg-base-300 px-2 py-1" : "py-1"
} duration-200 w-full`} } duration-200 w-full`}
onClick={() => onClick={() =>
@ -137,7 +137,10 @@ export default function LinkCardCompact({ link, editMode }: Props) {
<LinkActions <LinkActions
link={link} link={link}
collection={collection} collection={collection}
className="top-3 right-3" className={
"top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
}
btnStyle="btn-ghost"
/> />
</div> </div>
<div className="last:hidden rounded-none my-0 mx-1 border-t border-base-300 h-[1px]"></div> <div className="last:hidden rounded-none my-0 mx-1 border-t border-base-300 h-[1px]"></div>

56
components/ViewDropdown.tsx
View File

@ -114,32 +114,36 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
</label> </label>
</li> </li>
))} ))}
<p className="mb-1 mt-2 text-sm text-neutral"> {settings.viewMode !== ViewMode.List && (
{t("columns")}:{" "} <>
{settings.columns === 0 ? t("default") : settings.columns} <p className="mb-1 mt-2 text-sm text-neutral">
</p> {t("columns")}:{" "}
<div> {settings.columns === 0 ? t("default") : settings.columns}
<input </p>
type="range" <div>
min={0} <input
max="8" type="range"
value={settings.columns} min={0}
onChange={(e) => onColumnsChange(e)} max="8"
className="range range-xs range-primary" value={settings.columns}
step="1" onChange={(e) => onColumnsChange(e)}
/> className="range range-xs range-primary"
<div className="flex w-full justify-between px-2 text-xs text-neutral"> step="1"
<span>|</span> />
<span>|</span> <div className="flex w-full justify-between px-2 text-xs text-neutral">
<span>|</span> <span>|</span>
<span>|</span> <span>|</span>
<span>|</span> <span>|</span>
<span>|</span> <span>|</span>
<span>|</span> <span>|</span>
<span>|</span> <span>|</span>
<span>|</span> <span>|</span>
</div> <span>|</span>
</div> <span>|</span>
</div>
</div>
</>
)}
</ul> </ul>
</div> </div>
); );

7
hooks/store/dashboardData.tsx
View File

@ -1,4 +1,3 @@
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { useSession } from "next-auth/react"; import { useSession } from "next-auth/react";
@ -7,11 +6,11 @@ const useDashboardData = () => {
return useQuery({ return useQuery({
queryKey: ["dashboardData"], queryKey: ["dashboardData"],
queryFn: async (): Promise<LinkIncludingShortenedCollectionAndTags[]> => { queryFn: async () => {
const response = await fetch("/api/v1/dashboard"); const response = await fetch("/api/v2/dashboard");
const data = await response.json(); const data = await response.json();
return data.response; return data.data;
}, },
enabled: status === "authenticated", enabled: status === "authenticated",
}); });

4
lib/api/controllers/dashboard/getDashboardDataV2.ts
View File

@ -48,7 +48,7 @@ export default async function getDashboardData(
}); });
const pinnedLinks = await prisma.link.findMany({ const pinnedLinks = await prisma.link.findMany({
take: 10, take: 16,
where: { where: {
AND: [ AND: [
{ {
@ -80,7 +80,7 @@ export default async function getDashboardData(
}); });
const recentlyAddedLinks = await prisma.link.findMany({ const recentlyAddedLinks = await prisma.link.findMany({
take: 10, take: 16,
where: { where: {
collection: { collection: {
OR: [ OR: [

32
pages/dashboard.tsx
View File

@ -16,17 +16,21 @@ import { useCollections } from "@/hooks/store/collections";
import { useTags } from "@/hooks/store/tags"; import { useTags } from "@/hooks/store/tags";
import { useDashboardData } from "@/hooks/store/dashboardData"; import { useDashboardData } from "@/hooks/store/dashboardData";
import Links from "@/components/LinkViews/Links"; import Links from "@/components/LinkViews/Links";
import useLocalSettingsStore from "@/store/localSettings";
export default function Dashboard() { export default function Dashboard() {
const { t } = useTranslation(); const { t } = useTranslation();
const { data: collections = [] } = useCollections(); const { data: collections = [] } = useCollections();
const dashboardData = useDashboardData(); const { data: { links = [] } = { links: [] }, ...dashboardData } =
useDashboardData();
const { data: tags = [] } = useTags(); const { data: tags = [] } = useTags();
const [numberOfLinks, setNumberOfLinks] = useState(0); const [numberOfLinks, setNumberOfLinks] = useState(0);
const [showLinks, setShowLinks] = useState(3); const [showLinks, setShowLinks] = useState(3);
const { settings } = useLocalSettingsStore();
useEffect(() => { useEffect(() => {
setNumberOfLinks( setNumberOfLinks(
collections.reduce( collections.reduce(
@ -52,8 +56,10 @@ export default function Dashboard() {
const { width } = useWindowDimensions(); const { width } = useWindowDimensions();
useEffect(() => { useEffect(() => {
handleNumberOfLinksToShow(); settings.columns === 0
}, [width]); ? handleNumberOfLinksToShow()
: setShowLinks(settings.columns);
}, [width, settings.columns]);
const importBookmarks = async ( const importBookmarks = async (
e: React.ChangeEvent<HTMLInputElement>, e: React.ChangeEvent<HTMLInputElement>,
@ -160,10 +166,7 @@ export default function Dashboard() {
<div <div
style={{ style={{
flex: flex: links || dashboardData.isLoading ? "0 1 auto" : "1 1 auto",
dashboardData.data || dashboardData.isLoading
? "0 1 auto"
: "1 1 auto",
}} }}
className="flex flex-col 2xl:flex-row items-start 2xl:gap-2" className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
> >
@ -175,14 +178,9 @@ export default function Dashboard() {
useData={dashboardData} useData={dashboardData}
/> />
</div> </div>
) : dashboardData.data && ) : links && links[0] && !dashboardData.isLoading ? (
dashboardData.data[0] &&
!dashboardData.isLoading ? (
<div className="w-full"> <div className="w-full">
<Links <Links links={links.slice(0, showLinks)} layout={viewMode} />
links={dashboardData.data.slice(0, showLinks)}
layout={viewMode}
/>
</div> </div>
) : ( ) : (
<div className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200"> <div className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200">
@ -317,11 +315,11 @@ export default function Dashboard() {
useData={dashboardData} useData={dashboardData}
/> />
</div> </div>
) : dashboardData.data?.some((e) => e.pinnedBy && e.pinnedBy[0]) ? ( ) : links?.some((e: any) => e.pinnedBy && e.pinnedBy[0]) ? (
<div className="w-full"> <div className="w-full">
<Links <Links
links={dashboardData.data links={links
.filter((e) => e.pinnedBy && e.pinnedBy[0]) .filter((e: any) => e.pinnedBy && e.pinnedBy[0])
.slice(0, showLinks)} .slice(0, showLinks)}
layout={viewMode} layout={viewMode}
/> />