having one solution for different components of app
This commit is contained in:
Arjun Patel
@@ -0,0 +1,260 @@
|
||||
import { BsThreeDots } from "react-icons/bs";
|
||||
import { FaAngleDown, FaCode, FaFileImage, FaPlus } from "react-icons/fa";
|
||||
|
||||
import Image from "next/image";
|
||||
import { Dropdown, Menu, Radio, Tooltip } from "antd";
|
||||
import {
|
||||
ShowModalType,
|
||||
useKeyboardContext,
|
||||
} from "../../contexts/keyboardContext";
|
||||
import CreateOrUpdateLink from "../Modals/CreateOrUpdateLink";
|
||||
import { useEffect, useState } from "react";
|
||||
import LinkCard from "../LinkCard";
|
||||
import { Collections } from "../../services/collections";
|
||||
import {
|
||||
collection,
|
||||
getFirestore,
|
||||
onSnapshot,
|
||||
orderBy,
|
||||
query,
|
||||
where,
|
||||
} from "firebase/firestore";
|
||||
import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
|
||||
import Link, { LinkState } from "../../models/link";
|
||||
import { useAuth } from "../../contexts/authContext";
|
||||
|
||||
const lastWeek = new Date();
|
||||
lastWeek.setDate(lastWeek.getDate() - 7);
|
||||
|
||||
const db = getFirestore();
|
||||
|
||||
export default function Links() {
|
||||
const { currUser } = useAuth();
|
||||
const { handleModalType } = useKeyboardContext();
|
||||
|
||||
const { team } = useTeamDashboardContext();
|
||||
|
||||
const [linksMap, setLinksMap] = useState<Map<string, Link>>(
|
||||
new Map<string, Link>()
|
||||
);
|
||||
|
||||
// SECTION: LISTENER for LINKS
|
||||
useEffect(() => {
|
||||
/**
|
||||
* QUERY:
|
||||
* all links for the team in the past 7 days
|
||||
* order createdDate desc
|
||||
*
|
||||
*/
|
||||
const q = query(
|
||||
collection(db, Collections.links),
|
||||
where("teamId", "==", team.id),
|
||||
where("createdDate", ">", lastWeek),
|
||||
orderBy("createdDate", "desc")
|
||||
);
|
||||
|
||||
// return unsubscribe
|
||||
return onSnapshot(q, (snapshot) => {
|
||||
snapshot.docChanges().forEach((change) => {
|
||||
let updatedOrNewLink = change.doc.data() as Link;
|
||||
updatedOrNewLink.id = change.doc.id;
|
||||
|
||||
if (change.type === "added" || change.type === "modified") {
|
||||
setLinksMap((prevMap) => {
|
||||
return new Map(prevMap.set(updatedOrNewLink.id, updatedOrNewLink));
|
||||
});
|
||||
}
|
||||
if (change.type === "removed") {
|
||||
console.log("Removed link: ", updatedOrNewLink);
|
||||
}
|
||||
});
|
||||
});
|
||||
}, []);
|
||||
|
||||
const TimePeriodFilterMenu = (
|
||||
<Menu>
|
||||
<Menu.Item key={1} disabled>
|
||||
Past 24 Hours (Coming Soon)
|
||||
</Menu.Item>
|
||||
<Menu.Item key={2} disabled>
|
||||
This Month (Coming Soon)
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const [selectedTabPane, setSelectedTabPane] = useState<string>(
|
||||
LinkTypeFilter.me
|
||||
);
|
||||
|
||||
const allLinks = Array.from(linksMap.values());
|
||||
|
||||
const meLinks = allLinks.filter((link) => {
|
||||
// if archived or deleted, don't show
|
||||
if (link.state != LinkState.active) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// if I am the sender, then also show, but only if it's me sending to a specific person
|
||||
if (link.createdByUserId == currUser.uid && link.recipients?.length > 0) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// if I am a receiver
|
||||
if (link.recipients?.includes(currUser.uid)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
const teamLinks = allLinks.filter((link) => {
|
||||
// not archived and does not have a recipients list
|
||||
if (link.state == LinkState.active && !link.recipients) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
const archivedLinks = allLinks.filter(
|
||||
(link) => link.state == LinkState.archived
|
||||
);
|
||||
|
||||
function getFilteredContent() {
|
||||
switch (selectedTabPane) {
|
||||
case LinkTypeFilter.me:
|
||||
return meLinks;
|
||||
case LinkTypeFilter.team:
|
||||
return teamLinks;
|
||||
case LinkTypeFilter.archived:
|
||||
return archivedLinks;
|
||||
default:
|
||||
return allLinks;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md">
|
||||
{/* header row */}
|
||||
<Tooltip title={"archive unneeded links, keep yourself focused on today"}>
|
||||
{/* modal */}
|
||||
<CreateOrUpdateLink />
|
||||
|
||||
<span className="flex flex-row justify-start pb-5 items-center">
|
||||
<span className="flex flex-col mr-20">
|
||||
<span className="text-white mr-auto">
|
||||
DRAWER
|
||||
<button
|
||||
onClick={() => handleModalType(ShowModalType.createLink)}
|
||||
className="right-1 rounded-lg py-1 px-2 ml-1
|
||||
shadow-md text-center text-white text-sm font-bold"
|
||||
>
|
||||
CTRL + V
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<span className="text-gray-300 text-xs">
|
||||
links: jira tickets, drive files/folders, powerpoints...
|
||||
</span>
|
||||
|
||||
{meLinks.length > 6 || teamLinks.length > 6 ? (
|
||||
<span className="text-gray-300 text-xs">
|
||||
Make sure to{" "}
|
||||
<span className="text-orange-500">
|
||||
{"clear out your drawer and your team's"}
|
||||
</span>{" "}
|
||||
so that you are focused on this week.
|
||||
</span>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</span>
|
||||
|
||||
<div className="ml-auto">
|
||||
<Radio.Group
|
||||
value={selectedTabPane}
|
||||
onChange={(e) => setSelectedTabPane(e.target.value)}
|
||||
>
|
||||
<Radio.Button value={LinkTypeFilter.me}>
|
||||
{LinkTypeFilter.me}{" "}
|
||||
<span className="text-xs text-orange-500">
|
||||
{meLinks.length > 0 ? meLinks.length : ""}
|
||||
</span>
|
||||
</Radio.Button>
|
||||
<Radio.Button value={LinkTypeFilter.team}>
|
||||
{LinkTypeFilter.team}{" "}
|
||||
<span className="text-xs text-orange-500">
|
||||
{teamLinks.length}
|
||||
</span>
|
||||
</Radio.Button>
|
||||
<Tooltip title={"coming soon"}>
|
||||
<Radio.Button disabled value={LinkTypeFilter.favorites}>
|
||||
{LinkTypeFilter.favorites}{" "}
|
||||
{/* <span className="text-xs text-orange-500">
|
||||
{liveRooms.length > 0 ? fa.length : ""}
|
||||
</span> */}
|
||||
</Radio.Button>
|
||||
</Tooltip>
|
||||
<Radio.Button value={LinkTypeFilter.archived}>
|
||||
{LinkTypeFilter.archived}{" "}
|
||||
<span className="text-xs text-orange-500">
|
||||
{archivedLinks.length > 0 ? archivedLinks.length : ""}
|
||||
</span>
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
|
||||
<Dropdown overlay={TimePeriodFilterMenu}>
|
||||
<span className="ml-2 text-sm text-gray-300 flex flex-row items-center uppercase hover:cursor-pointer">
|
||||
Week <FaAngleDown />
|
||||
</span>
|
||||
</Dropdown>
|
||||
|
||||
<Tooltip
|
||||
title={
|
||||
"screenshots: paste screenshot into the paste.pics website and bring back the link here and just paste it"
|
||||
}
|
||||
>
|
||||
<button
|
||||
onClick={() => window.open("https://paste.pics/", "_blank")}
|
||||
className="bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40 ml-2"
|
||||
>
|
||||
<FaFileImage className="text-lg text-white" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip
|
||||
title={
|
||||
"code blocks: copy the link and paste it in here when you are done"
|
||||
}
|
||||
>
|
||||
<button
|
||||
onClick={() => window.open("https://www.codepile.net/", "_blank")}
|
||||
className="bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40 ml-2"
|
||||
>
|
||||
<FaCode className="text-lg text-white" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<button
|
||||
onClick={() => handleModalType(ShowModalType.createLink)}
|
||||
className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40"
|
||||
>
|
||||
<FaPlus className="text-lg text-white" />
|
||||
</button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
|
||||
{/* table of links */}
|
||||
<div className="flex flex-row space-x-2 overflow-x-auto py-2">
|
||||
{getFilteredContent().map((link) => (
|
||||
<LinkCard key={link.id} link={link} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
enum LinkTypeFilter {
|
||||
team = "team",
|
||||
me = "me",
|
||||
favorites = "favorites",
|
||||
archived = "archived",
|
||||
}
|
||||
Reference in New Issue
Block a user