refactored public page endpoints

This commit is contained in:
daniel31x13
2023-11-15 13:12:06 -05:00
parent 09ee81bf11
commit 59815f47d8
18 changed files with 262 additions and 128 deletions
@@ -1,18 +1,18 @@
import getCollection from "@/lib/api/controllers/public/getCollection";
import getPublicCollection from "@/lib/api/controllers/public/collections/getPublicCollection";
import type { NextApiRequest, NextApiResponse } from "next";
export default async function collections(
req: NextApiRequest,
res: NextApiResponse
) {
if (!req?.query?.body) {
if (!req?.query?.id) {
return res
.status(401)
.json({ response: "Please choose a valid collection." });
}
if (req.method === "GET") {
const collection = await getCollection(req?.query?.body as string);
const collection = await getPublicCollection(Number(req?.query?.id));
return res
.status(collection.status)
.json({ response: collection.response });
@@ -0,0 +1,41 @@
import getPublicLinksUnderCollection from "@/lib/api/controllers/public/links/getPublicLinksUnderCollection";
import { LinkRequestQuery } from "@/types/global";
import type { NextApiRequest, NextApiResponse } from "next";
export default async function collections(
req: NextApiRequest,
res: NextApiResponse
) {
if (req.method === "GET") {
// Convert the type of the request query to "LinkRequestQuery"
const convertedData: Omit<LinkRequestQuery, "tagId"> = {
sort: Number(req.query.sort as string),
cursor: req.query.cursor ? Number(req.query.cursor as string) : undefined,
collectionId: req.query.collectionId
? Number(req.query.collectionId as string)
: undefined,
pinnedOnly: req.query.pinnedOnly
? req.query.pinnedOnly === "true"
: undefined,
searchQueryString: req.query.searchQueryString
? (req.query.searchQueryString as string)
: undefined,
searchByName: req.query.searchByName === "true" ? true : undefined,
searchByUrl: req.query.searchByUrl === "true" ? true : undefined,
searchByDescription:
req.query.searchByDescription === "true" ? true : undefined,
searchByTextContent:
req.query.searchByTextContent === "true" ? true : undefined,
searchByTags: req.query.searchByTags === "true" ? true : undefined,
};
if (!convertedData.collectionId) {
return res
.status(400)
.json({ response: "Please choose a valid collection." });
}
const links = await getPublicLinksUnderCollection(convertedData);
return res.status(links.status).json({ response: links.response });
}
}
+2 -2
View File
@@ -1,5 +1,5 @@
import type { NextApiRequest, NextApiResponse } from "next";
import getPublicUserById from "@/lib/api/controllers/public/users/getPublicUserById";
import getPublicUser from "@/lib/api/controllers/public/users/getPublicUser";
import { getToken } from "next-auth/jwt";
export default async function users(req: NextApiRequest, res: NextApiResponse) {
@@ -12,7 +12,7 @@ export default async function users(req: NextApiRequest, res: NextApiResponse) {
const isId = lookupId.split("").every((e) => Number.isInteger(parseInt(e)));
if (req.method === "GET") {
const users = await getPublicUserById(lookupId, isId, requestingId);
const users = await getPublicUser(lookupId, isId, requestingId);
return res.status(users.status).json({ response: users.response });
}
}
+55 -42
View File
@@ -1,12 +1,13 @@
"use client";
import LinkCard from "@/components/PublicPage/LinkCard";
import useDetectPageBottom from "@/hooks/useDetectPageBottom";
import getPublicCollectionData from "@/lib/client/getPublicCollectionData";
import { PublicCollectionIncludingLinks } from "@/types/global";
import { CollectionIncludingMembersAndLinkCount, Sort } from "@/types/global";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";
import { motion, Variants } from "framer-motion";
import Head from "next/head";
import useLinks from "@/hooks/useLinks";
import useLinkStore from "@/store/links";
const cardVariants: Variants = {
offscreen: {
@@ -23,20 +24,42 @@ const cardVariants: Variants = {
};
export default function PublicCollections() {
const router = useRouter();
const { reachedBottom, setReachedBottom } = useDetectPageBottom();
const { links } = useLinkStore();
const [data, setData] = useState<PublicCollectionIncludingLinks>();
const router = useRouter();
const [searchFilter, setSearchFilter] = useState({
name: true,
url: true,
description: true,
textContent: true,
tags: true,
});
const [filterDropdown, setFilterDropdown] = useState(false);
const [sortDropdown, setSortDropdown] = useState(false);
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
useLinks({
sort: sortBy,
searchQueryString: router.query.q
? decodeURIComponent(router.query.q as string)
: undefined,
searchByName: searchFilter.name,
searchByUrl: searchFilter.url,
searchByDescription: searchFilter.description,
searchByTextContent: searchFilter.textContent,
searchByTags: searchFilter.tags,
});
const [collection, setCollection] =
useState<CollectionIncludingMembersAndLinkCount>();
document.body.style.background = "white";
useEffect(() => {
if (router.query.id) {
getPublicCollectionData(
Number(router.query.id),
data as PublicCollectionIncludingLinks,
setData
);
getPublicCollectionData(Number(router.query.id), setCollection);
}
// document
@@ -49,26 +72,14 @@ export default function PublicCollections() {
// );
}, []);
useEffect(() => {
if (reachedBottom && router.query.id) {
getPublicCollectionData(
Number(router.query.id),
data as PublicCollectionIncludingLinks,
setData
);
}
setReachedBottom(false);
}, [reachedBottom]);
return data ? (
return collection ? (
<div className="max-w-4xl mx-auto p-5 bg">
{data ? (
{collection ? (
<Head>
<title>{data.name} | Linkwarden</title>
<title>{collection.name} | Linkwarden</title>
<meta
property="og:title"
content={`${data.name} | Linkwarden`}
content={`${collection.name} | Linkwarden`}
key="title"
/>
</Head>
@@ -76,31 +87,33 @@ export default function PublicCollections() {
<div
className={`border border-solid border-sky-100 text-center bg-gradient-to-tr from-sky-100 from-10% via-gray-100 via-20% rounded-3xl shadow-lg p-5`}
>
<p className="text-5xl text-black mb-5 capitalize">{data.name}</p>
<p className="text-5xl text-black mb-5 capitalize">{collection.name}</p>
{data.description && (
{collection.description && (
<>
<hr className="mt-5 max-w-[30rem] mx-auto border-1 border-slate-400" />
<p className="mt-2 text-gray-500">{data.description}</p>
<p className="mt-2 text-gray-500">{collection.description}</p>
</>
)}
</div>
<div className="flex flex-col gap-5 my-8">
{data?.links?.map((e, i) => {
return (
<motion.div
key={i}
initial="offscreen"
whileInView="onscreen"
viewport={{ once: true, amount: 0.8 }}
>
<motion.div variants={cardVariants}>
<LinkCard link={e} count={i} />
{links
?.filter((e) => e.collectionId === Number(router.query.id))
.map((e, i) => {
return (
<motion.div
key={i}
initial="offscreen"
whileInView="onscreen"
viewport={{ once: true, amount: 0.8 }}
>
<motion.div variants={cardVariants}>
<LinkCard link={e as any} count={i} />
</motion.div>
</motion.div>
</motion.div>
);
})}
);
})}
</div>
{/* <p className="text-center font-bold text-gray-500">
+2 -3
View File
@@ -11,10 +11,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useRouter } from "next/router";
import { FormEvent, useEffect, useState } from "react";
import MainLayout from "@/layouts/MainLayout";
import { Tag } from "@prisma/client";
import useTagStore from "@/store/tags";
import SortDropdown from "@/components/SortDropdown";
import { Sort } from "@/types/global";
import { Sort, TagIncludingLinkCount } from "@/types/global";
import useLinks from "@/hooks/useLinks";
import Dropdown from "@/components/Dropdown";
import { toast } from "react-hot-toast";
@@ -33,7 +32,7 @@ export default function Index() {
const [renameTag, setRenameTag] = useState(false);
const [newTagName, setNewTagName] = useState<string>();
const [activeTag, setActiveTag] = useState<Tag>();
const [activeTag, setActiveTag] = useState<TagIncludingLinkCount>();
useLinks({ tagId: Number(router.query.id), sort: sortBy });