bug fix + improvements + new logo

This commit is contained in:
Daniel 2023-06-18 08:57:57 +03:30
parent 1aaa9db229
commit 033f036ef3
15 changed files with 214 additions and 53 deletions

View File

@ -0,0 +1,164 @@
import {
CollectionIncludingMembersAndLinkCount,
LinkIncludingShortenedCollectionAndTags,
} from "@/types/global";
import { faFolder, faEllipsis } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useEffect, useState } from "react";
import Image from "next/image";
import Dropdown from "./Dropdown";
import useLinkStore from "@/store/links";
import useCollectionStore from "@/store/collections";
import useAccountStore from "@/store/account";
import useModalStore from "@/store/modals";
type Props = {
link: LinkIncludingShortenedCollectionAndTags;
count: number;
className?: string;
};
export default function LinkCard({ link, count, className }: Props) {
const { setModal } = useModalStore();
const [expandDropdown, setExpandDropdown] = useState(false);
const { collections } = useCollectionStore();
const { account } = useAccountStore();
const [collection, setCollection] =
useState<CollectionIncludingMembersAndLinkCount>(
collections.find(
(e) => e.id === link.collection.id
) as CollectionIncludingMembersAndLinkCount
);
useEffect(() => {
setCollection(
collections.find(
(e) => e.id === link.collection.id
) as CollectionIncludingMembersAndLinkCount
);
}, [collections]);
const { removeLink, updateLink } = useLinkStore();
const url = new URL(link.url);
const formattedDate = new Date(link.createdAt as string).toLocaleString(
"en-US",
{
year: "numeric",
month: "short",
day: "numeric",
}
);
return (
<div
className={`bg-gradient-to-tr from-slate-200 from-10% to-gray-50 via-20% shadow-sm hover:shadow-none cursor-pointer duration-100 p-5 rounded-3xl relative group ${className}`}
>
<div
onClick={() => setExpandDropdown(!expandDropdown)}
id={"expand-dropdown" + link.id}
className="text-gray-500 inline-flex rounded-md cursor-pointer hover:bg-slate-200 absolute right-5 top-5 z-10 duration-100 p-1"
>
<FontAwesomeIcon
icon={faEllipsis}
title="More"
className="w-5 h-5"
id={"expand-dropdown" + link.id}
/>
</div>
<div
onClick={() => console.log("hi!")}
className="flex items-start gap-5 sm:gap-10 h-full w-full"
>
<Image
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
width={70}
height={70}
alt=""
className="blur-sm absolute bottom-5 right-5 opacity-60 group-hover:opacity-80 duration-100 select-none"
draggable="false"
onError={(e) => {
const target = e.target as HTMLElement;
target.style.opacity = "0";
}}
/>
<div className="flex justify-between gap-5 w-full h-full z-0">
<div className="flex flex-col justify-between w-full">
<div className="flex items-baseline gap-1">
<p className="text-sm text-sky-400 font-bold">{count + 1}.</p>
<p className="text-lg text-sky-500 font-bold truncate max-w-[10rem]">
{link.name}
</p>
</div>
<div className="flex gap-3 items-center flex-wrap my-3">
<div className="flex items-center gap-1">
<FontAwesomeIcon
icon={faFolder}
className="w-4 h-4 mt-1 drop-shadow"
style={{ color: collection?.color }}
/>
<p className="text-sky-900 truncate max-w-[10rem]">
{collection?.name}
</p>
</div>
</div>
<p className="text-gray-500">{formattedDate}</p>
</div>
</div>
</div>
{expandDropdown ? (
<Dropdown
items={[
{
name:
link?.pinnedBy && link.pinnedBy[0]
? "Unpin"
: "Pin to Dashboard",
onClick: () => {
updateLink({
...link,
pinnedBy:
link?.pinnedBy && link.pinnedBy[0]
? undefined
: [{ id: account.id }],
});
setExpandDropdown(false);
},
},
{
name: "Edit",
onClick: () => {
setModal({
modal: "LINK",
state: true,
method: "UPDATE",
active: link,
});
setExpandDropdown(false);
},
},
{
name: "Delete",
onClick: () => {
removeLink(link);
setExpandDropdown(false);
},
},
]}
onClickOutside={(e: Event) => {
const target = e.target as HTMLInputElement;
if (target.id !== "expand-dropdown" + link.id)
setExpandDropdown(false);
}}
className="absolute top-12 right-5 w-36"
/>
) : null}
</div>
);
}

View File

@ -5,10 +5,18 @@ import TeamManagement from "./TeamManagement";
import { useState } from "react"; import { useState } from "react";
import DeleteCollection from "./DeleteCollection"; import DeleteCollection from "./DeleteCollection";
type Props = { type Props =
| {
toggleCollectionModal: Function; toggleCollectionModal: Function;
activeCollection: CollectionIncludingMembersAndLinkCount; activeCollection: CollectionIncludingMembersAndLinkCount;
method: "CREATE" | "UPDATE"; method: "UPDATE";
className?: string;
defaultIndex?: number;
}
| {
toggleCollectionModal: Function;
activeCollection?: CollectionIncludingMembersAndLinkCount;
method: "CREATE";
className?: string; className?: string;
defaultIndex?: number; defaultIndex?: number;
}; };
@ -21,7 +29,15 @@ export default function CollectionModal({
method, method,
}: Props) { }: Props) {
const [collection, setCollection] = const [collection, setCollection] =
useState<CollectionIncludingMembersAndLinkCount>(activeCollection); useState<CollectionIncludingMembersAndLinkCount>(
activeCollection || {
name: "",
description: "",
color: "#0ea5e9",
isPublic: false,
members: [],
}
);
return ( return (
<div className={className}> <div className={className}>

View File

@ -57,7 +57,7 @@ export default function EditLink({
(e) => e.id == Number(router.query.id) (e) => e.id == Number(router.query.id)
); );
if (currentCollection) if (currentCollection && currentCollection.ownerId)
setLink({ setLink({
...link, ...link,
collection: { collection: {

View File

@ -1,10 +1,6 @@
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { signOut } from "next-auth/react"; import { signOut } from "next-auth/react";
import { import { faPlus, faBars } from "@fortawesome/free-solid-svg-icons";
faPlus,
faChevronDown,
faBars,
} from "@fortawesome/free-solid-svg-icons";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Dropdown from "@/components/Dropdown"; import Dropdown from "@/components/Dropdown";
import ClickAwayHandler from "@/components/ClickAwayHandler"; import ClickAwayHandler from "@/components/ClickAwayHandler";
@ -67,7 +63,7 @@ export default function Navbar() {
<div className="relative"> <div className="relative">
<div <div
className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:p-1 duration-100 h-10 rounded-full items-center w-fit bg-white cursor-pointer" className="flex gap-1 group sm:hover:bg-slate-200 sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit bg-white cursor-pointer"
onClick={() => setProfileDropdown(!profileDropdown)} onClick={() => setProfileDropdown(!profileDropdown)}
id="profile-dropdown" id="profile-dropdown"
> >
@ -75,22 +71,12 @@ export default function Navbar() {
src={account.profilePic} src={account.profilePic}
className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100" className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100"
/> />
<div
id="profile-dropdown"
className="text-sky-500 duration-100 hidden sm:flex item-center gap-1 max-w-[8rem]"
>
<p <p
id="profile-dropdown" id="profile-dropdown"
className="font-bold leading-3 hidden sm:block select-none truncate py-1" className="font-bold text-sky-500 leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
> >
{account.name} {account.name}
</p> </p>
<FontAwesomeIcon
id="profile-dropdown"
icon={faChevronDown}
className="mt-1 h-3 w-3 text-gray-500"
/>
</div>
</div> </div>
{profileDropdown ? ( {profileDropdown ? (
<Dropdown <Dropdown
@ -101,7 +87,6 @@ export default function Navbar() {
setModal({ setModal({
modal: "ACCOUNT", modal: "ACCOUNT",
state: true, state: true,
method: "CREATE",
active: account, active: account,
}); });
setProfileDropdown(!profileDropdown); setProfileDropdown(!profileDropdown);

View File

@ -66,14 +66,6 @@ export default function Collections() {
modal: "COLLECTION", modal: "COLLECTION",
state: true, state: true,
method: "CREATE", method: "CREATE",
active: {
name: "",
description: "",
color: "#0ea5e9",
isPublic: false,
ownerId: session.data?.user.id as number,
members: [],
},
}); });
setExpandDropdown(false); setExpandDropdown(false);
}, },
@ -125,14 +117,6 @@ export default function Collections() {
modal: "COLLECTION", modal: "COLLECTION",
state: true, state: true,
method: "CREATE", method: "CREATE",
active: {
name: "",
description: "",
color: "#0ea5e9",
isPublic: false,
ownerId: session.data?.user.id as number,
members: [],
},
}); });
}} }}
> >

View File

@ -7,7 +7,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import MainLayout from "@/layouts/MainLayout"; import MainLayout from "@/layouts/MainLayout";
import useLinkStore from "@/store/links"; import useLinkStore from "@/store/links";
import useTagStore from "@/store/tags"; import useTagStore from "@/store/tags";
import LinkCard from "@/components/LinkCard"; import CompactLinkCard from "@/components/CompactLinkCard";
import Link from "next/link"; import Link from "next/link";
import CollectionCard from "@/components/CollectionCard"; import CollectionCard from "@/components/CollectionCard";
import { Disclosure, Transition } from "@headlessui/react"; import { Disclosure, Transition } from "@headlessui/react";
@ -39,6 +39,10 @@ export default function Dashboard() {
useLinks({ pinnedOnly: true, sort: 0 }); useLinks({ pinnedOnly: true, sort: 0 });
useEffect(() => {
console.log(links);
}, [links]);
useEffect(() => { useEffect(() => {
setNumberOfLinks( setNumberOfLinks(
collections.reduce( collections.reduce(
@ -145,11 +149,11 @@ export default function Dashboard() {
leaveFrom="transform opacity-100 translate-y-0" leaveFrom="transform opacity-100 translate-y-0"
leaveTo="transform opacity-0 -translate-y-3" leaveTo="transform opacity-0 -translate-y-3"
> >
<Disclosure.Panel className="flex flex-col gap-5 w-full"> <Disclosure.Panel className="grid grid-cols-1 xl:grid-cols-2 gap-5 w-full">
{links {links
.filter((e) => e.pinnedBy) .filter((e) => e.pinnedBy && e.pinnedBy[0])
.map((e, i) => ( .map((e, i) => (
<LinkCard key={i} link={e} count={i} /> <CompactLinkCard key={i} link={e} count={i} />
))} ))}
</Disclosure.Panel> </Disclosure.Panel>
</Transition> </Transition>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 214 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 402 B

After

Width:  |  Height:  |  Size: 645 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 767 B

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 191 KiB

View File

@ -27,10 +27,17 @@ type Modal =
| { | {
modal: "COLLECTION"; modal: "COLLECTION";
state: boolean; state: boolean;
method: "CREATE" | "UPDATE"; method: "UPDATE";
active: CollectionIncludingMembersAndLinkCount; active: CollectionIncludingMembersAndLinkCount;
defaultIndex?: number; defaultIndex?: number;
} }
| {
modal: "COLLECTION";
state: boolean;
method: "CREATE";
active?: CollectionIncludingMembersAndLinkCount;
defaultIndex?: number;
}
| null; | null;
type ModalsStore = { type ModalsStore = {

View File

@ -28,10 +28,11 @@ export interface Member {
} }
export interface CollectionIncludingMembersAndLinkCount export interface CollectionIncludingMembersAndLinkCount
extends Omit<Collection, "id" | "createdAt"> { extends Omit<Collection, "id" | "createdAt" | "ownerId"> {
id?: number; id?: number;
ownerId?: number;
createdAt?: string; createdAt?: string;
_count: { links: number }; _count?: { links: number };
members: Member[]; members: Member[];
} }