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

feat: add collection functionality

This commit is contained in:
Daniel 2023-04-25 01:00:40 +03:30
parent b02766f6c8
commit 4bfb08a52e
12 changed files with 86 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
components/Modal/AddCollection.tsx
View File

@ -3,64 +3,69 @@
// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
// You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
// import React, { useState } from "react";
// import CollectionSelection from "@/components/InputSelect/CollectionSelection";
// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
// import { faPlus } from "@fortawesome/free-solid-svg-icons";
// import useCollectionStore from "@/store/collections";
import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import useCollectionStore from "@/store/collections";
import { NewCollection } from "@/types/global";
// type Props = {
// toggleCollectionModal: Function;
// };
type Props = {
toggleCollectionModal: Function;
};
// export default function AddCollection({ toggleCollectionModal }: Props) {
// const [newCollection, setNewCollection] = useState({
// name: "",
// ownerId: undefined,
// });
export default function AddCollection({ toggleCollectionModal }: Props) {
const [newCollection, setNewCollection] = useState<NewCollection>({
name: "",
description: "",
});
// const { addCollection } = useCollectionStore();
const { addCollection } = useCollectionStore();
// const setCollectionOwner = (e: any) => {
// if (e?.__isNew__) e.value = null;
const submitCollection = async () => {
console.log(newCollection);
// setNewCollection({
// ...newCollection,
// ownerId: e?.value,
// });
// };
const response = await addCollection(newCollection as NewCollection);
// return (
// <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
// <p className="font-bold text-sky-300 mb-2 text-center">New Collection</p>
if (response) toggleCollectionModal();
};
// <div className="flex gap-5 items-center justify-between">
// <p className="text-sm font-bold text-sky-300">Name</p>
// <input
// value={newCollection.name}
// onChange={(e) =>
// setNewCollection({ ...newCollection, name: e.target.value })
// }
// type="text"
// placeholder="e.g. Example Collection"
// className="w-full rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
// />
// </div>
return (
<div className="flex flex-col gap-3 sm:w-[35rem] w-80">
<p className="font-bold text-sky-300 mb-2 text-center">New Collection</p>
// <div className="flex gap-5 items-center justify-between">
// <p className="text-sm font-bold text-sky-300">Owner</p>
// <CollectionSelection onChange={setCollectionOwner} />
// </div>
<div className="flex gap-5 items-center justify-between">
<p className="text-sm font-bold text-sky-300">Name</p>
<input
value={newCollection.name}
onChange={(e) =>
setNewCollection({ ...newCollection, name: e.target.value })
}
type="text"
placeholder="e.g. Example Collection"
className="w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
/>
</div>
// <div className="flex justify-end">
// <button
// onClick={() => submitCollection()}
// className="py-2 px-4 bg-sky-500 hover:bg-sky-600 text-white rounded-md"
// >
// <FontAwesomeIcon icon={faPlus} />
// <span className="ml-2">Add</span>
// </button>
// </div>
// </div>
// );
// }
<div className="flex gap-5 items-center justify-between">
<p className="text-sm font-bold text-sky-300">Description</p>
<input
value={newCollection.description}
onChange={(e) =>
setNewCollection({ ...newCollection, description: e.target.value })
}
type="text"
placeholder="Collection description (Optional)"
className="w-96 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
/>
</div>
<div
className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
onClick={submitCollection}
>
<FontAwesomeIcon icon={faPlus} className="h-5" />
Add Collection
</div>
</div>
);
}

2
components/Modal/AddLink.tsx
View File

@ -70,7 +70,7 @@ export default function AddLink({ toggleLinkModal }: Props) {
const submitLink = async () => {
console.log(newLink);
const response = await addLink(newLink as ExtendedLink);
const response = await addLink(newLink as NewLink);
if (response) toggleLinkModal();
};

48
components/Sidebar/index.tsx
View File

@ -3,12 +3,9 @@
// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
// You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
import ClickAwayHandler from "@/components/ClickAwayHandler";
import { useState } from "react";
import useCollectionStore from "@/store/collections";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faPlus,
faFolder,
faBox,
faHashtag,
@ -19,27 +16,10 @@ import useTagStore from "@/store/tags";
import Link from "next/link";
export default function () {
const [collectionInput, setCollectionInput] = useState(false);
const { collections, addCollection } = useCollectionStore();
const { collections } = useCollectionStore();
const { tags } = useTagStore();
const toggleCollectionInput = () => {
setCollectionInput(!collectionInput);
};
const submitCollection = async (
event: React.KeyboardEvent<HTMLInputElement>
) => {
const collectionName: string = (event.target as HTMLInputElement).value;
if (event.key === "Enter" && collectionName) {
addCollection(collectionName);
(event.target as HTMLInputElement).value = "";
}
};
return (
<div className="fixed bg-gray-100 top-0 bottom-0 left-0 w-80 p-2 overflow-y-auto border-solid border-r-sky-100 border z-20">
<p className="p-2 text-sky-500 font-bold text-xl mb-5 leading-4">
@ -60,30 +40,8 @@ export default function () {
</div>
</Link>
<div className="text-gray-500 flex items-center justify-between mt-5">
<div className="text-gray-500 mt-5">
<p className="text-sm p-2">Collections</p>
{collectionInput ? (
<ClickAwayHandler
onClickOutside={toggleCollectionInput}
className="w-fit"
>
<input
type="text"
placeholder="Enter Collection Name"
className="w-44 rounded-md p-1 border-sky-500 border-solid border text-sm outline-none"
onKeyDown={submitCollection}
autoFocus
/>
</ClickAwayHandler>
) : (
<div
title="Add Collection"
onClick={toggleCollectionInput}
className="select-none text-gray-500 rounded-md cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100 p-1"
>
<FontAwesomeIcon icon={faPlus} className="h-3 w-3" />
</div>
)}
</div>
<div>
{collections.map((e, i) => {
@ -97,7 +55,7 @@ export default function () {
);
})}
</div>
<div className="text-gray-500 flex items-center justify-between mt-5">
<div className="text-gray-500 mt-5">
<p className="text-sm p-2">Tags</p>
</div>
<div>

12
lib/api/controllers/collections/postCollection.ts
View File

@ -4,12 +4,13 @@
// You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
import { prisma } from "@/lib/api/db";
import { Collection } from "@prisma/client";
import { existsSync, mkdirSync } from "fs";
export default async function (collectionName: string, userId: number) {
if (!collectionName)
export default async function (collection: Collection, userId: number) {
if (!collection)
return {
response: "Please enter a valid name for the collection.",
response: "Please enter a valid collection.",
status: 400,
};
@ -20,7 +21,7 @@ export default async function (collectionName: string, userId: number) {
select: {
collections: {
where: {
name: collectionName,
name: collection.name,
},
},
},
@ -38,7 +39,8 @@ export default async function (collectionName: string, userId: number) {
id: userId,
},
},
name: collectionName,
name: collection.name,
description: collection.description,
},
});

5
pages/api/routes/collections/index.ts
View File

@ -22,10 +22,7 @@ export default async function (req: NextApiRequest, res: NextApiResponse) {
.status(collections.status)
.json({ response: collections.response });
} else if (req.method === "POST") {
const newCollection = await postCollection(
req.body.collectionName.trim(),
session.user.id
);
const newCollection = await postCollection(req.body, session.user.id);
return res
.status(newCollection.status)
.json({ response: newCollection.response });

2
prisma/migrations/20230328031049_init/migration.sql
View File

@ -1,2 +0,0 @@
-- DropIndex
DROP INDEX "Tag_name_collectionId_key";

11
prisma/migrations/20230328072406_/migration.sql
View File

@ -1,11 +0,0 @@
/*
Warnings:
- You are about to drop the column `collectionId` on the `Tag` table. All the data in the column will be lost.
*/
-- DropForeignKey
ALTER TABLE "Tag" DROP CONSTRAINT "Tag_collectionId_fkey";
-- AlterTable
ALTER TABLE "Tag" DROP COLUMN "collectionId";

8
prisma/migrations/20230327225044_init/migration.sql → prisma/migrations/20230424185742_/migration.sql
View File

@ -13,6 +13,7 @@ CREATE TABLE "User" (
CREATE TABLE "Collection" (
"id" SERIAL NOT NULL,
"name" TEXT NOT NULL,
"description" TEXT NOT NULL DEFAULT '',
"ownerId" INTEGER NOT NULL,
"createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
@ -48,7 +49,6 @@ CREATE TABLE "Link" (
CREATE TABLE "Tag" (
"id" SERIAL NOT NULL,
"name" TEXT NOT NULL,
"collectionId" INTEGER NOT NULL,
"ownerId" INTEGER NOT NULL,
CONSTRAINT "Tag_pkey" PRIMARY KEY ("id")
@ -69,9 +69,6 @@ CREATE UNIQUE INDEX "Collection_name_ownerId_key" ON "Collection"("name", "owner
-- CreateIndex
CREATE UNIQUE INDEX "Tag_name_ownerId_key" ON "Tag"("name", "ownerId");
-- CreateIndex
CREATE UNIQUE INDEX "Tag_name_collectionId_key" ON "Tag"("name", "collectionId");
-- CreateIndex
CREATE UNIQUE INDEX "_LinkToTag_AB_unique" ON "_LinkToTag"("A", "B");
@ -90,9 +87,6 @@ ALTER TABLE "UsersAndCollections" ADD CONSTRAINT "UsersAndCollections_collection
-- AddForeignKey
ALTER TABLE "Link" ADD CONSTRAINT "Link_collectionId_fkey" FOREIGN KEY ("collectionId") REFERENCES "Collection"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
-- AddForeignKey
ALTER TABLE "Tag" ADD CONSTRAINT "Tag_collectionId_fkey" FOREIGN KEY ("collectionId") REFERENCES "Collection"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
-- AddForeignKey
ALTER TABLE "Tag" ADD CONSTRAINT "Tag_ownerId_fkey" FOREIGN KEY ("ownerId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

1
prisma/schema.prisma
View File

@ -26,6 +26,7 @@ model User {
model Collection {
id Int @id @default(autoincrement())
name String
description String @default("")
owner User @relation(fields: [ownerId], references: [id])
ownerId Int
members UsersAndCollections[]

9
store/collections.ts
View File

@ -5,11 +5,12 @@
import { create } from "zustand";
import { Collection } from "@prisma/client";
import { NewCollection } from "@/types/global";
type CollectionStore = {
collections: Collection[];
setCollections: () => void;
addCollection: (collectionName: string) => void;
addCollection: (body: NewCollection) => Promise<boolean>;
updateCollection: (collection: Collection) => void;
removeCollection: (collectionId: number) => void;
};
@ -23,9 +24,9 @@ const useCollectionStore = create<CollectionStore>()((set) => ({
if (response.ok) set({ collections: data.response });
},
addCollection: async (collectionName) => {
addCollection: async (body) => {
const response = await fetch("/api/routes/collections", {
body: JSON.stringify({ collectionName }),
body: JSON.stringify(body),
headers: {
"Content-Type": "application/json",
},
@ -38,6 +39,8 @@ const useCollectionStore = create<CollectionStore>()((set) => ({
set((state) => ({
collections: [...state.collections, data.response],
}));
return response.ok;
},
updateCollection: (collection) =>
set((state) => ({

8
store/links.ts
View File

@ -4,14 +4,14 @@
// You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
import { create } from "zustand";
import { ExtendedLink } from "@/types/global";
import { ExtendedLink, NewLink } from "@/types/global";
import useTagStore from "./tags";
import useCollectionStore from "./collections";
type LinkStore = {
links: ExtendedLink[];
setLinks: () => void;
addLink: (linkName: ExtendedLink) => Promise<boolean>;
addLink: (body: NewLink) => Promise<boolean>;
updateLink: (link: ExtendedLink) => void;
removeLink: (link: ExtendedLink) => void;
};
@ -25,9 +25,9 @@ const useLinkStore = create<LinkStore>()((set) => ({
if (response.ok) set({ links: data.response });
},
addLink: async (newLink) => {
addLink: async (body) => {
const response = await fetch("/api/routes/links", {
body: JSON.stringify(newLink),
body: JSON.stringify(body),
headers: {
"Content-Type": "application/json",
},

5
types/global.ts
View File

@ -20,3 +20,8 @@ export interface NewLink {
ownerId: number | undefined;
};
}
export interface NewCollection {
name: string;
description: string;
}