starred/archived-linsa
1
0
Fork 0
mirror of https://github.com/linsa-io/linsa.git synced 2026-01-12 12:20:23 +01:00
Code Issues 2 Packages Projects Releases Wiki Activity

Tasks (#175)

Browse Source 
* tasks

* task input

* fixed jazz things

* create new task ui

* feat: simple feature flag

---------

Co-authored-by: marshennikovaolga <marshennikova@gmail.com>
Co-authored-by: Aslam H <iupin5212@gmail.com>
This commit is contained in:
Nikita
2024-09-27 20:55:03 +03:00
committed by GitHub
parent 223a4524ab
commit 34d69be960
13 changed files with 533 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
web/components/custom/sidebar/partial/task-section.tsx Normal file
View File

@@ -0,0 +1,149 @@
import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { ListOfTasks } from "@/lib/schema/tasks"
import { LaIcon } from "../../la-icon"
import { useEffect, useState } from "react"
import { useAuth, useUser } from "@clerk/nextjs"
import { getFeatureFlag } from "@/app/actions"
export const TaskSection: React.FC<{ pathname: string }> = ({ pathname }) => {
const me = { root: { tasks: [{ id: "1", title: "Test Task" }] } }
const taskCount = me?.root.tasks?.length || 0
const isActive = pathname === "/tasks"
const [isFetching, setIsFetching] = useState(false)
const [isFeatureActive, setIsFeatureActive] = useState(false)
const { isLoaded, isSignedIn } = useAuth()
const { user } = useUser()
useEffect(() => {
async function checkFeatureFlag() {
setIsFetching(true)
if (isLoaded && isSignedIn) {
const [data, err] = await getFeatureFlag({ name: "TASK" })
if (err) {
console.error(err)
setIsFetching(false)
return
}
if (user?.emailAddresses.some(email => data.flag?.emails.includes(email.emailAddress))) {
setIsFeatureActive(true)
}
setIsFetching(false)
}
}
checkFeatureFlag()
}, [isLoaded, isSignedIn, user])
if (!isLoaded || !isSignedIn) {
return <div className="py-2 text-center text-gray-500">Loading...</div>
}
if (!me) return null
if (!isFeatureActive) {
return null
}
return (
<div className="group/tasks flex flex-col gap-px py-2">
<TaskSectionHeader taskCount={taskCount} isActive={isActive} />
{isFetching ? (
<div className="py-2 text-center text-gray-500">Fetching tasks...</div>
) : (
<List tasks={me.root.tasks as ListOfTasks} />
)}
</div>
)
}
interface TaskSectionHeaderProps {
taskCount: number
isActive: boolean
}
const TaskSectionHeader: React.FC<TaskSectionHeaderProps> = ({ taskCount, isActive }) => (
<div
className={cn(
"flex min-h-[30px] items-center gap-px rounded-md",
isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
)}
>
<Link
href="/tasks"
className="flex flex-1 items-center justify-start rounded-md px-2 py-1 focus-visible:outline-none focus-visible:ring-0"
>
<p className="text-xs">
Tasks
{taskCount > 0 && <span className="text-muted-foreground ml-1">{taskCount}</span>}
</p>
</Link>
</div>
// <div
// className={cn(
// "flex min-h-[30px] items-center gap-px rounded-md",
// isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
// )}
// >
// <Button
// variant="ghost"
// className="size-6 flex-1 items-center justify-start rounded-md px-2 py-1 focus-visible:outline-none focus-visible:ring-0"
// >
// <p className="flex items-center text-xs font-medium">
// Tasks
// {taskCount > 0 && <span className="text-muted-foreground ml-1">{taskCount}</span>}
// </p>
// </Button>
// </div>
)
interface ListProps {
tasks: ListOfTasks
}
const List: React.FC<ListProps> = ({ tasks }) => {
const pathname = usePathname()
return (
<div className="flex flex-col gap-px">
<ListItem label="All Tasks" href="/tasks" count={tasks.length} isActive={pathname === "/tasks"} />
</div>
)
}
interface ListItemProps {
label: string
href: string
count: number
isActive: boolean
}
const ListItem: React.FC<ListItemProps> = ({ label, href, count, isActive }) => (
<div className="group/reorder-task relative">
<div className="group/task-link relative flex min-w-0 flex-1">
<Link
// TODO: update links
href="/tasks"
className="relative flex h-8 w-full items-center gap-2 rounded-md p-1.5 font-medium"
// className={cn(
// "relative flex h-8 w-full items-center gap-2 rounded-md p-1.5 font-medium",
// isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
// )}
>
<div className="flex max-w-full flex-1 items-center gap-1.5 truncate text-sm">
<LaIcon name="BookCheck" className="opacity-60" />
<p className={cn("truncate opacity-95 group-hover/task-link:opacity-100")}>{label}</p>
</div>
</Link>
{count > 0 && (
<span className="absolute right-2 top-1/2 z-[1] -translate-y-1/2 rounded p-1 text-sm">{count}</span>
)}
</div>
</div>
)

28
web/components/custom/sidebar/sidebar.tsx
View File

@@ -13,6 +13,7 @@ import { LinkSection } from "./partial/link-section"
import { PageSection } from "./partial/page-section"
import { TopicSection } from "./partial/topic-section"
import { ProfileSection } from "./partial/profile-section"
import { TaskSection } from "./partial/task-section"
import { useAccountOrGuest } from "@/lib/providers/jazz-provider"
import { LaIcon } from "../la-icon"
@@ -114,21 +115,20 @@ const SidebarContent: React.FC = React.memo(() => {
const pathname = usePathname()
return (
<>
<nav className="bg-background relative flex h-full w-full shrink-0 flex-col">
<div>
<LogoAndSearch />
</div>
<div className="relative mb-0.5 mt-1.5 flex grow flex-col overflow-y-auto rounded-md px-3 outline-none">
<div className="h-2 shrink-0" />
{me._type === "Account" && <LinkSection pathname={pathname} />}
{me._type === "Account" && <TopicSection pathname={pathname} />}
{me._type === "Account" && <PageSection pathname={pathname} />}
</div>
<nav className="bg-background relative flex h-full w-full shrink-0 flex-col">
<div>
<LogoAndSearch />
</div>
<div className="relative mb-0.5 mt-1.5 flex grow flex-col overflow-y-auto rounded-md px-3 outline-none">
<div className="h-2 shrink-0" />
{me._type === "Account" && <LinkSection pathname={pathname} />}
{me._type === "Account" && <TopicSection pathname={pathname} />}
{me._type === "Account" && <TaskSection pathname={pathname} />}
{me._type === "Account" && <PageSection pathname={pathname} />}
</div>
<ProfileSection />
</nav>
</>
<ProfileSection />
</nav>
)
})