Skip to content

Commit

Permalink
Remove socket io, I can't make it work with server actions
Browse files Browse the repository at this point in the history
  • Loading branch information
arjunkomath committed Jan 27, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent e8fb63a commit e1228b6
Showing 9 changed files with 125 additions and 386 deletions.
3 changes: 2 additions & 1 deletion app/(dashboard)/[tenant]/layout.tsx
Original file line number Diff line number Diff line change
@@ -17,7 +17,7 @@ export default async function ConsoleLayout(props: {
const { tenant } = await props.params;

const { children } = props;
const { orgSlug } = await getOwner();
const { orgSlug, userId } = await getOwner();
const user = await getUser();

if (tenant !== orgSlug) {
@@ -32,6 +32,7 @@ export default async function ConsoleLayout(props: {
return (
<SidebarProvider>
<AppSidebar
userId={userId}
user={{
firstName: user.firstName ?? "",
email: user.email ?? "",
77 changes: 77 additions & 0 deletions app/(dashboard)/[tenant]/notifications/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import PageSection from "@/components/core/section";
import PageTitle from "@/components/layout/page-title";
import { getUserNotifications } from "../settings/actions";

function Dot({ className }: { className?: string }) {
return (
<svg
width="6"
height="6"
fill="currentColor"
viewBox="0 0 6 6"
xmlns="http://www.w3.org/2000/svg"
className={className}
aria-hidden="true"
>
<circle cx="3" cy="3" r="3" />
</svg>
);
}

export default async function Notifications() {
const notifications = await getUserNotifications();

return (
<>
<PageTitle title="Notifications" />

<PageSection topInset>
{!notifications.length ? (
<div className="text-center text-muted-foreground p-6 text-sm">
No notifications
</div>
) : null}

{notifications.map((notification) => (
<div
key={notification.id}
className="rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent"
>
<div className="relative flex items-start gap-3 pe-3">
{/* <img
className="size-9 rounded-md"
src={notification.image}
width={32}
height={32}
alt={notification.user}
/> */}
<div className="flex-1 space-y-1">
<button
type="button"
className="text-left text-foreground/80 after:absolute after:inset-0"
>
<span className="font-medium text-foreground hover:underline">
{notification.user.firstName}
</span>{" "}
{notification.target}{" "}
<span className="font-medium text-foreground hover:underline">
{notification.target}
</span>
.
</button>
<div className="text-xs text-muted-foreground">
{notification.createdAt.toLocaleDateString()}
</div>
</div>
{!notification.read ? (
<div className="absolute end-0 self-center">
<Dot />
</div>
) : null}
</div>
</div>
))}
</PageSection>
</>
);
}
7 changes: 5 additions & 2 deletions components/app-sidebar.tsx
Original file line number Diff line number Diff line change
@@ -14,8 +14,11 @@ import {
import type * as React from "react";

export function AppSidebar({
userId,
user,
...props
}: React.ComponentProps<typeof Sidebar> & {
userId: string;
user: {
firstName: string;
imageUrl: string | null;
@@ -28,11 +31,11 @@ export function AppSidebar({
<WorkspaceSwitcher />
</SidebarHeader>
<SidebarContent>
<NavMain />
<NavMain userId={userId} />
<NavProjects />
</SidebarContent>
<SidebarFooter>
<NavUser user={props.user} />
<NavUser user={user} />
</SidebarFooter>
<SidebarRail />
</Sidebar>
176 changes: 27 additions & 149 deletions components/core/notifications.tsx
Original file line number Diff line number Diff line change
@@ -1,164 +1,42 @@
"use client";

import { getUserNotifications } from "@/app/(dashboard)/[tenant]/settings/actions";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import type { NotificationWithUser } from "@/drizzle/types";
import { socket } from "@/lib/utils/socket-client";
import { Bell } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { cn } from "@/lib/utils";
import { Bell, Dot } from "lucide-react";
import Link from "next/link";
import { useParams, usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar";

function Dot({ className }: { className?: string }) {
return (
<svg
width="6"
height="6"
fill="currentColor"
viewBox="0 0 6 6"
xmlns="http://www.w3.org/2000/svg"
className={className}
aria-hidden="true"
>
<circle cx="3" cy="3" r="3" />
</svg>
);
}
function Notifications({ tenant, userId }: { tenant: string; userId: string }) {
const pathname = usePathname();

function Notifications({ userId }: { userId: string }) {
const [isConnected, setIsConnected] = useState(false);
const isActive = pathname === `/${tenant}/notifications`;

useEffect(() => {
if (socket.connected) {
onConnect();
}

function onConnect() {
setIsConnected(true);
}

function onDisconnect() {
setIsConnected(false);
}

socket.on("connect", onConnect);
socket.on("disconnect", onDisconnect);

return () => {
socket.off("connect", onConnect);
socket.off("disconnect", onDisconnect);
};
getUserNotifications().then((notifications) => {
setUnreadCount(notifications.filter((x) => !x.read).length);
});
}, []);

const [notifications, setNotifications] = useState<NotificationWithUser[]>(
[],
);
const unreadCount = notifications.filter((n) => !n.read).length;

const handleMarkAllAsRead = () => {
setNotifications(
notifications.map((notification) => ({
...notification,
unread: false,
})),
);
};

const handleNotificationClick = (id: number) => {
setNotifications(
notifications.map((notification) =>
notification.id === id
? { ...notification, unread: false }
: notification,
),
);
};

const fetchNotifications = useCallback(async () => {
getUserNotifications().then(setNotifications);
}, []);
const [unreadCount, setUnreadCount] = useState<number>(0);

return (
<Popover onOpenChange={fetchNotifications}>
<PopoverTrigger asChild>
<SidebarMenuItem>
<SidebarMenuButton asChild>
<div className="relative flex cursor-pointer">
<Bell aria-hidden="true" />
<span>Notifications</span>
</div>
</SidebarMenuButton>
</SidebarMenuItem>
</PopoverTrigger>
<PopoverContent className="w-80 ml-4" align="end">
<div className="flex items-baseline justify-between gap-4 px-3 py-2">
<div className="text-sm font-semibold">Notifications</div>
{unreadCount > 0 && (
<button
type="button"
className="text-xs font-medium hover:underline"
onClick={handleMarkAllAsRead}
>
Mark all as read
</button>
)}
</div>
<div
aria-orientation="horizontal"
className="-mx-1 my-1 h-px bg-border"
/>

{!notifications.length ? (
<div className="text-center text-muted-foreground p-6 text-sm">
No notifications
</div>
) : null}

{notifications.map((notification) => (
<div
key={notification.id}
className="rounded-md px-3 py-2 text-sm transition-colors hover:bg-accent"
>
<div className="relative flex items-start gap-3 pe-3">
{/* <img
className="size-9 rounded-md"
src={notification.image}
width={32}
height={32}
alt={notification.user}
/> */}
<div className="flex-1 space-y-1">
<button
type="button"
className="text-left text-foreground/80 after:absolute after:inset-0"
onClick={() => handleNotificationClick(notification.id)}
>
<span className="font-medium text-foreground hover:underline">
{notification.user.firstName}
</span>{" "}
{notification.target}{" "}
<span className="font-medium text-foreground hover:underline">
{notification.target}
</span>
.
</button>
<div className="text-xs text-muted-foreground">
{notification.createdAt.toLocaleDateString()}
</div>
</div>
{!notification.read ? (
<div className="absolute end-0 self-center">
<Dot />
</div>
) : null}
</div>
</div>
))}
</PopoverContent>
</Popover>
<SidebarMenuItem>
<SidebarMenuButton asChild>
<Link href={`/${tenant}/notifications`} className="relative flex">
<Bell className={cn(isActive ? "text-primary" : "")} />
<span className={cn(isActive ? "font-semibold" : "")}>
Notifications
</span>
<Dot
className={`ml-auto w-10 h-10 -mr-2 ${
unreadCount ? "text-red-600" : "text-transparent"
}`}
/>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
);
}

25 changes: 12 additions & 13 deletions components/nav-main.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,5 @@
"use client";

import {
CalendarCheck,
ChevronRight,
File,
GaugeIcon,
ListChecksIcon,
type LucideIcon,
SettingsIcon,
} from "lucide-react";

import {
Collapsible,
CollapsibleContent,
@@ -29,6 +19,15 @@ import {
import type { ProjectWithData } from "@/drizzle/types";
import { cn } from "@/lib/utils";
import { getProjectById } from "@/lib/utils/useProjects";
import {
CalendarCheck,
ChevronRight,
File,
GaugeIcon,
ListChecksIcon,
type LucideIcon,
SettingsIcon,
} from "lucide-react";
import { CalendarHeartIcon } from "lucide-react";
import Link from "next/link";
import { useParams, usePathname } from "next/navigation";
@@ -47,7 +46,7 @@ type MainNavItem = {
}[];
};

export function NavMain() {
export function NavMain({ userId }: { userId: string }) {
const { setOpenMobile } = useSidebar();
const { tenant, projectId } = useParams();
const pathname = usePathname();
@@ -166,9 +165,9 @@ export function NavMain() {
return (
<SidebarGroup>
<SidebarMenu>
<Notifications userId="1" />
<Notifications tenant={String(tenant)} userId={userId} />
</SidebarMenu>
<SidebarGroupLabel className="font-bold">Tools</SidebarGroupLabel>
<SidebarGroupLabel className="font-bold mt-4">Tools</SidebarGroupLabel>
<SidebarMenu>
{navItems.map((navItem) =>
navItem.items?.length ? (
5 changes: 0 additions & 5 deletions lib/utils/socket-client.ts

This file was deleted.

6 changes: 2 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -3,9 +3,9 @@
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "TZ=UTC node server.js",
"dev": "TZ=UTC next dev",
"build": "next build",
"start": "NODE_ENV=production node server.js",
"start": "next start",
"lint": "biome lint",
"generate:migrations": "drizzle-kit generate"
},
@@ -59,8 +59,6 @@
"remark-gfm": "^4.0.0",
"rrule": "^2.8.1",
"sharp": "^0.33.4",
"socket.io": "^4.8.1",
"socket.io-client": "^4.8.1",
"strip-markdown": "^6.0.0",
"tailwind-merge": "^1.14.0",
"tailwindcss": "3.3.2",
Loading
Oops, something went wrong.

0 comments on commit e1228b6

Please sign in to comment.