fix dashboard bug
This commit is contained in:
daniel31x13
parent
5e7835b4d5
commit
fb1869ca7a
|
|
@ -12,14 +12,16 @@ import { useDeleteLink, useGetLink, useUpdateLink } from "@/hooks/store/links";
|
|||
import toast from "react-hot-toast";
|
||||
import LinkModal from "@/components/ModalContent/LinkModal";
|
||||
import { useRouter } from "next/router";
|
||||
import clsx from "clsx";
|
||||
|
||||
type Props = {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
collection: CollectionIncludingMembersAndLinkCount;
|
||||
className?: string;
|
||||
btnStyle?: string;
|
||||
};
|
||||
|
||||
export default function LinkActions({ link, className }: Props) {
|
||||
export default function LinkActions({ link, className, btnStyle }: Props) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const permissions = usePermissions(link.collection.id as number);
|
||||
|
|
@ -85,13 +87,17 @@ export default function LinkActions({ link, className }: Props) {
|
|||
<>
|
||||
{isPublicRoute ? (
|
||||
<div
|
||||
className={`absolute ${className || "top-3 right-3"} z-20`}
|
||||
className={clsx(
|
||||
className || "top-3 right-3",
|
||||
"absolute z-20",
|
||||
btnStyle
|
||||
)}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
onMouseDown={dropdownTriggerer}
|
||||
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" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -105,7 +111,7 @@ export default function LinkActions({ link, className }: Props) {
|
|||
tabIndex={0}
|
||||
role="button"
|
||||
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" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ export default function LinkCardCompact({ link, editMode }: Props) {
|
|||
return (
|
||||
<>
|
||||
<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"
|
||||
} duration-200 w-full`}
|
||||
onClick={() =>
|
||||
|
|
@ -137,7 +137,10 @@ export default function LinkCardCompact({ link, editMode }: Props) {
|
|||
<LinkActions
|
||||
link={link}
|
||||
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 className="last:hidden rounded-none my-0 mx-1 border-t border-base-300 h-[1px]"></div>
|
||||
|
|
|
|||
|
|
@ -114,32 +114,36 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
|
|||
</label>
|
||||
</li>
|
||||
))}
|
||||
<p className="mb-1 mt-2 text-sm text-neutral">
|
||||
{t("columns")}:{" "}
|
||||
{settings.columns === 0 ? t("default") : settings.columns}
|
||||
</p>
|
||||
<div>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max="8"
|
||||
value={settings.columns}
|
||||
onChange={(e) => onColumnsChange(e)}
|
||||
className="range range-xs range-primary"
|
||||
step="1"
|
||||
/>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
{settings.viewMode !== ViewMode.List && (
|
||||
<>
|
||||
<p className="mb-1 mt-2 text-sm text-neutral">
|
||||
{t("columns")}:{" "}
|
||||
{settings.columns === 0 ? t("default") : settings.columns}
|
||||
</p>
|
||||
<div>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max="8"
|
||||
value={settings.columns}
|
||||
onChange={(e) => onColumnsChange(e)}
|
||||
className="range range-xs range-primary"
|
||||
step="1"
|
||||
/>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useSession } from "next-auth/react";
|
||||
|
||||
|
|
@ -7,11 +6,11 @@ const useDashboardData = () => {
|
|||
|
||||
return useQuery({
|
||||
queryKey: ["dashboardData"],
|
||||
queryFn: async (): Promise<LinkIncludingShortenedCollectionAndTags[]> => {
|
||||
const response = await fetch("/api/v1/dashboard");
|
||||
queryFn: async () => {
|
||||
const response = await fetch("/api/v2/dashboard");
|
||||
const data = await response.json();
|
||||
|
||||
return data.response;
|
||||
return data.data;
|
||||
},
|
||||
enabled: status === "authenticated",
|
||||
});
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export default async function getDashboardData(
|
|||
});
|
||||
|
||||
const pinnedLinks = await prisma.link.findMany({
|
||||
take: 10,
|
||||
take: 16,
|
||||
where: {
|
||||
AND: [
|
||||
{
|
||||
|
|
@ -80,7 +80,7 @@ export default async function getDashboardData(
|
|||
});
|
||||
|
||||
const recentlyAddedLinks = await prisma.link.findMany({
|
||||
take: 10,
|
||||
take: 16,
|
||||
where: {
|
||||
collection: {
|
||||
OR: [
|
||||
|
|
|
|||
|
|
@ -16,17 +16,21 @@ import { useCollections } from "@/hooks/store/collections";
|
|||
import { useTags } from "@/hooks/store/tags";
|
||||
import { useDashboardData } from "@/hooks/store/dashboardData";
|
||||
import Links from "@/components/LinkViews/Links";
|
||||
import useLocalSettingsStore from "@/store/localSettings";
|
||||
|
||||
export default function Dashboard() {
|
||||
const { t } = useTranslation();
|
||||
const { data: collections = [] } = useCollections();
|
||||
const dashboardData = useDashboardData();
|
||||
const { data: { links = [] } = { links: [] }, ...dashboardData } =
|
||||
useDashboardData();
|
||||
const { data: tags = [] } = useTags();
|
||||
|
||||
const [numberOfLinks, setNumberOfLinks] = useState(0);
|
||||
|
||||
const [showLinks, setShowLinks] = useState(3);
|
||||
|
||||
const { settings } = useLocalSettingsStore();
|
||||
|
||||
useEffect(() => {
|
||||
setNumberOfLinks(
|
||||
collections.reduce(
|
||||
|
|
@ -52,8 +56,10 @@ export default function Dashboard() {
|
|||
const { width } = useWindowDimensions();
|
||||
|
||||
useEffect(() => {
|
||||
handleNumberOfLinksToShow();
|
||||
}, [width]);
|
||||
settings.columns === 0
|
||||
? handleNumberOfLinksToShow()
|
||||
: setShowLinks(settings.columns);
|
||||
}, [width, settings.columns]);
|
||||
|
||||
const importBookmarks = async (
|
||||
e: React.ChangeEvent<HTMLInputElement>,
|
||||
|
|
@ -160,10 +166,7 @@ export default function Dashboard() {
|
|||
|
||||
<div
|
||||
style={{
|
||||
flex:
|
||||
dashboardData.data || dashboardData.isLoading
|
||||
? "0 1 auto"
|
||||
: "1 1 auto",
|
||||
flex: links || dashboardData.isLoading ? "0 1 auto" : "1 1 auto",
|
||||
}}
|
||||
className="flex flex-col 2xl:flex-row items-start 2xl:gap-2"
|
||||
>
|
||||
|
|
@ -175,14 +178,9 @@ export default function Dashboard() {
|
|||
useData={dashboardData}
|
||||
/>
|
||||
</div>
|
||||
) : dashboardData.data &&
|
||||
dashboardData.data[0] &&
|
||||
!dashboardData.isLoading ? (
|
||||
) : links && links[0] && !dashboardData.isLoading ? (
|
||||
<div className="w-full">
|
||||
<Links
|
||||
links={dashboardData.data.slice(0, showLinks)}
|
||||
layout={viewMode}
|
||||
/>
|
||||
<Links links={links.slice(0, showLinks)} layout={viewMode} />
|
||||
</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">
|
||||
|
|
@ -317,11 +315,11 @@ export default function Dashboard() {
|
|||
useData={dashboardData}
|
||||
/>
|
||||
</div>
|
||||
) : dashboardData.data?.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
|
||||
) : links?.some((e: any) => e.pinnedBy && e.pinnedBy[0]) ? (
|
||||
<div className="w-full">
|
||||
<Links
|
||||
links={dashboardData.data
|
||||
.filter((e) => e.pinnedBy && e.pinnedBy[0])
|
||||
links={links
|
||||
.filter((e: any) => e.pinnedBy && e.pinnedBy[0])
|
||||
.slice(0, showLinks)}
|
||||
layout={viewMode}
|
||||
/>
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue