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

many changes across the app

This commit is contained in:
Daniel 2023-05-01 13:37:01 +03:30
parent c1d1d4a4a2
commit 0d0e53218f
14 changed files with 215 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
components/LinkList.tsx
View File

@ -19,6 +19,7 @@ import Dropdown from "./Dropdown";
import useLinkStore from "@/store/links";
import Modal from "./Modal";
import EditLink from "./Modal/EditLink";
import Link from "next/link";
export default function ({
link,
@ -57,7 +58,7 @@ export default function ({
width={32}
height={32}
alt=""
className="select-none mt-3 z-10 rounded-md"
className="select-none mt-3 z-10 rounded-md shadow"
draggable="false"
onError={(e) => {
const target = e.target as HTMLElement;
@ -84,18 +85,20 @@ export default function ({
</div>
<p className="text-sky-400 text-sm font-medium">{link.title}</p>
<div className="flex gap-3 items-center flex-wrap my-3">
<div className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100">
<FontAwesomeIcon icon={faFolder} className="w-4 text-sky-300" />
<p className="text-sky-900">{link.collection.name}</p>
</div>
<Link href={`/collections/${link.collection.id}`}>
<div className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100">
<FontAwesomeIcon icon={faFolder} className="w-4 text-sky-300" />
<p className="text-sky-900">{link.collection.name}</p>
</div>
</Link>
<div className="flex gap-1 items-center flex-wrap">
{link.tags.map((e, i) => (
<p
key={i}
className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer hover:bg-sky-100 duration-100"
>
# {e.name}
</p>
<Link key={i} href={`/tags/${e.id}`}>
<p className="px-2 py-1 bg-sky-200 text-sky-700 text-xs rounded-3xl cursor-pointer hover:bg-sky-100 duration-100">
# {e.name}
</p>
</Link>
))}
</div>
</div>

2
components/Modal/DeleteCollection.tsx
View File

@ -34,7 +34,7 @@ export default function AddCollection({
};
return (
<div className="flex flex-col gap-3 sm:w-[35rem] w-80">
<div className="flex flex-col gap-3 sm:w-[33rem] w-72">
<p className="font-bold text-sky-300 text-center">Delete Collection</p>
<p className="text-sky-900 select-none text-center">

54
components/Modal/EditCollection.tsx
View File

@ -5,11 +5,17 @@
import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faClose, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
import {
faClose,
faPenToSquare,
faTrashCan,
} from "@fortawesome/free-solid-svg-icons";
import useCollectionStore from "@/store/collections";
import { ExtendedCollection } from "@/types/global";
import { useSession } from "next-auth/react";
import getPublicUserDataByEmail from "@/lib/client/getPublicUserDataByEmail";
import Modal from "@/components/Modal";
import DeleteCollection from "@/components/Modal/DeleteCollection";
type Props = {
toggleCollectionModal: Function;
@ -27,6 +33,12 @@ export default function EditCollection({
const { updateCollection } = useCollectionStore();
const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
const toggleDeleteCollectionModal = () => {
setDeleteCollectionModal(!deleteCollectionModal);
};
const session = useSession();
const submit = async () => {
@ -250,13 +262,41 @@ export default function EditCollection({
);
})}
<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={submit}
>
<FontAwesomeIcon icon={faPenToSquare} className="h-5" />
Edit Collection
<div className="flex flex-col justify-center items-center gap-2 mt-2">
<div
className="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={submit}
>
<FontAwesomeIcon icon={faPenToSquare} className="h-5" />
Edit Collection
</div>
<div className="flex items-center justify-center gap-2">
<hr className="w-16 border" />
<p className="text-gray-400 font-bold">OR</p>
<hr className="w-16 border" />
</div>
<div
onClick={() => {
toggleDeleteCollectionModal();
}}
className="w-fit inline-flex rounded-md cursor-pointer bg-red-500 hover:bg-red-400 duration-100 p-2"
>
<FontAwesomeIcon icon={faTrashCan} className="w-4 h-4 text-white" />
</div>
</div>
{deleteCollectionModal ? (
<Modal toggleModal={toggleDeleteCollectionModal}>
<DeleteCollection
collection={activeCollection}
toggleCollectionModal={toggleDeleteCollectionModal}
/>
</Modal>
) : null}
</div>
);
}

35
components/Modal/EditLink.tsx
View File

@ -10,6 +10,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ExtendedLink } from "@/types/global";
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
import useLinkStore from "@/store/links";
import { faTrashCan } from "@fortawesome/free-solid-svg-icons";
type Props = {
toggleLinkModal: Function;
@ -19,7 +20,7 @@ type Props = {
export default function EditLink({ toggleLinkModal, link }: Props) {
const [currentLink, setCurrentLink] = useState<ExtendedLink>(link);
const { updateLink } = useLinkStore();
const { updateLink, removeLink } = useLinkStore();
const shortendURL = new URL(link.url).host.toLowerCase();
@ -85,12 +86,32 @@ export default function EditLink({ toggleLinkModal, link }: Props) {
/>
</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={submit}
>
<FontAwesomeIcon icon={faPenToSquare} className="h-5" />
Edit Link
<div className="flex flex-col justify-center items-center gap-2 mt-2">
<div
className="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={submit}
>
<FontAwesomeIcon icon={faPenToSquare} className="h-5" />
Edit Link
</div>
<div className="flex items-center justify-center gap-2">
<hr className="w-16 border" />
<p className="text-gray-400 font-bold">OR</p>
<hr className="w-16 border" />
</div>
<div
onClick={() => {
removeLink(link);
toggleLinkModal();
}}
className="w-fit inline-flex rounded-md cursor-pointer bg-red-500 hover:bg-red-400 duration-100 p-2"
>
<FontAwesomeIcon icon={faTrashCan} className="w-4 h-4 text-white" />
</div>
</div>
</div>
);

19
components/Modal/index.tsx
View File

@ -3,8 +3,10 @@
// 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 { ReactNode } from "react";
import { MouseEventHandler, ReactNode } from "react";
import ClickAwayHandler from "@/components/ClickAwayHandler";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
type Props = {
toggleModal: Function;
@ -13,9 +15,18 @@ type Props = {
export default function ({ toggleModal, children }: Props) {
return (
<div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30">
<ClickAwayHandler onClickOutside={toggleModal} className="w-fit mx-auto">
<div className="slide-up border-sky-100 rounded-md border-solid border shadow-lg p-5 bg-white">
<div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30">
<ClickAwayHandler onClickOutside={toggleModal} className="w-fit m-auto">
<div className="slide-up relative border-sky-100 rounded-md border-solid border shadow-lg p-5 bg-white">
<div
onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-white hover:border-sky-500 border-sky-100 border duration-100 p-1"
>
<FontAwesomeIcon
icon={faChevronLeft}
className="w-4 h-4 text-gray-500"
/>
</div>
{children}
</div>
</ClickAwayHandler>

11
components/Navbar.tsx
View File

@ -15,12 +15,13 @@ import {
faChevronDown,
faBars,
} from "@fortawesome/free-solid-svg-icons";
import { useState } from "react";
import { useEffect, useState } from "react";
import Dropdown from "@/components/Dropdown";
import Modal from "./Modal";
import AddLink from "./Modal/AddLink";
import ClickAwayHandler from "./ClickAwayHandler";
import Sidebar from "./Sidebar";
import { useRouter } from "next/router";
export default function () {
const { data: session } = useSession();
@ -32,8 +33,14 @@ export default function () {
const [linkModal, setLinkModal] = useState(false);
const [sidebar, setSidebar] = useState(false);
const router = useRouter();
window.addEventListener("resize", () => setSidebar(false));
useEffect(() => {
setSidebar(false);
}, [router]);
const toggleSidebar = () => {
setSidebar(!sidebar);
};
@ -123,7 +130,7 @@ export default function () {
{sidebar ? (
<div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 flex items-center fade-in z-30">
<ClickAwayHandler onClickOutside={toggleSidebar}>
<div className="slide-right">
<div className="slide-right shadow-lg">
<Sidebar />
</div>
</ClickAwayHandler>

21
components/Sidebar/SidebarItem.tsx
View File

@ -4,7 +4,8 @@
// 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 Link from "next/link";
import React, { ReactElement } from "react";
import React, { ReactElement, useEffect, useState } from "react";
import { useRouter } from "next/router";
interface SidebarItemProps {
text: string;
@ -13,13 +14,25 @@ interface SidebarItemProps {
}
export default function ({ text, icon, path }: SidebarItemProps) {
const router = useRouter();
const [active, setActive] = useState(false);
useEffect(() => {
if (router.asPath === path) setActive(true);
else setActive(false);
}, [router]);
return (
<Link href={path}>
<div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2">
<div
className={`${
active ? "bg-sky-500" : "hover:bg-gray-50 hover:outline bg-gray-100"
} outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2`}
>
{React.cloneElement(icon, {
className: "w-4 text-sky-300",
className: `w-4 ${active ? "text-white" : "text-sky-300"}`,
})}
<p className="text-sky-900">{text}</p>
<p className={`${active ? "text-white" : "text-sky-900"}`}>{text}</p>
</div>
</Link>
);

55
components/Sidebar/index.tsx
View File

@ -14,12 +14,21 @@ import {
import SidebarItem from "./SidebarItem";
import useTagStore from "@/store/tags";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
export default function () {
const { collections } = useCollectionStore();
const { tags } = useTagStore();
const router = useRouter();
const [active, setActive] = useState("");
useEffect(() => {
setActive(router.asPath);
}, [router]);
return (
<div className="bg-gray-100 h-screen w-64 xl: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">
@ -27,16 +36,48 @@ export default function () {
</p>
<Link href="/links">
<div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2">
<FontAwesomeIcon icon={faBookmark} className="w-4 text-sky-300" />
<p>All Links</p>
<div
className={`${
active === "/links"
? "bg-sky-500"
: "hover:bg-gray-50 hover:outline bg-gray-100"
} outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2`}
>
<FontAwesomeIcon
icon={faBookmark}
className={`w-4 ${
active === "/links" ? "text-white" : "text-sky-300"
}`}
/>
<p
className={`${active === "/links" ? "text-white" : "text-sky-900"}`}
>
All Links
</p>
</div>
</Link>
<Link href="/collections">
<div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2">
<FontAwesomeIcon icon={faBox} className="w-4 text-sky-300" />
<p>All Collections</p>
<div
className={`${
active === "/collections"
? "bg-sky-500"
: "hover:bg-gray-50 hover:outline bg-gray-100"
} outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2`}
>
<FontAwesomeIcon
icon={faBox}
className={`w-4 ${
active === "/collections" ? "text-white" : "text-sky-300"
}`}
/>
<p
className={`${
active === "/collections" ? "text-white" : "text-sky-900"
}`}
>
All Collections
</p>
</div>
</Link>

2
layouts/AuthRedirect.tsx
View File

@ -41,5 +41,5 @@ export default function ({ children }: Props) {
}, [status]);
if (status !== "loading" && !redirect) return <>{children}</>;
else return <Loader />;
// else return <Loader />;
}

2
layouts/Dashboard.tsx
View File

@ -36,5 +36,5 @@ export default function ({ children }: Props) {
);
else if ((status === "unauthenticated" && !redirect) || !routeExists)
return <>{children}</>;
else return <Loader />;
else return <></>;
}

8
lib/api/controllers/collections/deleteCollection.ts
View File

@ -33,7 +33,13 @@ export default async function (collection: { id: number }, userId: number) {
},
});
fs.rmdirSync(`data/archives/${collection.id}`, { recursive: true });
try {
fs.rmdirSync(`data/archives/${collection.id}`, { recursive: true });
} catch (error) {
console.log(
"Collection's archive directory wasn't deleted most likely because it didn't exist..."
);
}
return await prisma.collection.delete({
where: {

25
lib/api/controllers/links/updateLink.ts
View File

@ -5,7 +5,7 @@
import { prisma } from "@/lib/api/db";
import { ExtendedLink } from "@/types/global";
import { Link, UsersAndCollections } from "@prisma/client";
import { UsersAndCollections } from "@prisma/client";
import getPermission from "@/lib/api/getPermission";
export default async function (link: ExtendedLink, userId: number) {
@ -17,10 +17,23 @@ export default async function (link: ExtendedLink, userId: number) {
(e: UsersAndCollections) => e.userId === userId && e.canUpdate
);
if (!(collectionIsAccessible?.ownerId === userId || memberHasAccess))
return { response: "Collection is not accessible.", status: 401 };
if (link.collection.ownerId) {
const collectionIsAccessible = await getPermission(
userId,
link.collection.id
);
const updatedLink: Link = await prisma.link.update({
const memberHasAccess = collectionIsAccessible?.members.some(
(e: UsersAndCollections) => e.userId === userId && e.canCreate
);
if (!(collectionIsAccessible?.ownerId === userId || memberHasAccess))
return { response: "Collection is not accessible.", status: 401 };
} else {
link.collection.ownerId = userId;
}
const updatedLink: ExtendedLink = await prisma.link.update({
where: {
id: link.id,
},
@ -60,6 +73,10 @@ export default async function (link: ExtendedLink, userId: number) {
})),
},
},
include: {
tags: true,
collection: true,
},
});
return { response: updatedLink, status: 200 };

5
store/links.ts
View File

@ -63,9 +63,12 @@ const useLinkStore = create<LinkStore>()((set) => ({
if (response.ok) {
set((state) => ({
links: state.links.map((e) => (e.id === link.id ? link : e)),
links: state.links.map((e) =>
e.id === data.response.id ? data.response : e
),
}));
useTagStore.getState().setTags();
useCollectionStore.getState().setCollections();
}
},
removeLink: async (link) => {

6
styles/globals.css
View File

@ -63,16 +63,14 @@
}
.slide-right {
animation: slide-right-animation 100ms;
animation: slide-right-animation 200ms;
}
@keyframes slide-right-animation {
0% {
transform: translateX(-25%);
opacity: 0;
transform: translateX(-100%);
}
100% {
transform: translateX(0);
opacity: 1;
}
}