Merge pull request #55 from SwiichyCode/resource

feat: implement add ressource modal / form

src/app/(app)/(sharing)/resources/loading.tsx

@@ -0,0 +1,11 @@
+import { RepositoryCardSkeleton } from "@/modules/repositories/components/RepositoryCard/RepositoryCardSkeleton";
+
+export default function loading() {
+  return (
+    <div className="grid grid-cols-1 gap-4 p-8 md:grid-cols-3 lg:grid-cols-4">
+      {Array.from({ length: 15 }).map((_, index) => (
+        <RepositoryCardSkeleton key={index} />
+      ))}
+    </div>
+  );
+}

src/app/(app)/(sharing)/resources/page.tsx

@@ -0,0 +1,9 @@
+import { AddResourceForm } from "@/modules/resources/components/_forms/add-resource-form";
+
+export default async function ResourcesPage() {
+  return (
+    <>
+      <AddResourceForm />
+    </>
+  );
+}

src/components/layouts/Header.tsx

@@ -1,12 +1,11 @@
+import type { PropsWithChildren } from "react";
 import { getServerAuthSession } from "@/config/server/auth";
 import { Logo } from "@/components/layouts/Logo";
 import { GithubLink } from "@/components/ui/github-link";
 import { RepositoryInputSearch } from "@/modules/repositories/components/RepositoryInputSearch";
-import { RepositoryShareBtn } from "@/modules/repositories/components/RepositoryShareBtn";
+import { SharingBtn } from "@/components/layouts/SharingBtn";
 import { AuthNavigation } from "@/components/layouts/AuthNavigation";
-
 import { URL } from "@/config/constants";
-import type { PropsWithChildren } from "react";
 
 export const HeaderLayout = ({ children }: PropsWithChildren) => {
   return (
@@ -27,7 +26,7 @@ export const Header = async () => {
         <GithubLink url={URL.GITHUB} />
         <RepositoryInputSearch />
         <div className="hidden h-6 w-[1px] bg-[#30363D] lg:block" />
-        <RepositoryShareBtn session={session} />
+        <SharingBtn session={session} />
         <AuthNavigation session={session} />
       </div>
     </HeaderLayout>

src/components/layouts/SharingBtn.tsx

@@ -0,0 +1,51 @@
+"use client";
+import { usePathname } from "next/navigation";
+import { signIn } from "next-auth/react";
+import { Button } from "@/components/ui/button";
+import { useShareRepositoryModal } from "@/modules/repositories/stores/useShareRepositoryModal";
+import { useShareResourceModal } from "@/modules/resources/stores/useShareResourcesModal";
+import { RepoIcon, FileDirectoryIcon } from "@primer/octicons-react";
+import { URL } from "@/config/constants";
+import type { Session } from "next-auth";
+
+type Props = {
+  session: Session | null;
+};
+
+export const SharingBtn = ({ session }: Props) => {
+  const { setOpen: setOpenShareRepositoryModal } = useShareRepositoryModal();
+  const { setOpen: setOpenShareResourceModal } = useShareResourceModal();
+  const pathname = usePathname();
+
+  const pageActions = {
+    [URL.REPOSITORIES]: {
+      action: setOpenShareRepositoryModal,
+      label: "Share Repository",
+      icon: RepoIcon,
+    },
+    [URL.RESOURCES]: {
+      action: setOpenShareResourceModal,
+      label: "Share Resource",
+      icon: FileDirectoryIcon,
+    },
+  };
+
+  const currentPageAction = pageActions[pathname];
+
+  if (!currentPageAction) return null;
+
+  const handleOpen = async () => {
+    if (session) {
+      currentPageAction.action(true);
+    } else {
+      await signIn("github");
+    }
+  };
+
+  return (
+    <Button variant={"success"} onClick={handleOpen} className="space-x-2">
+      <currentPageAction.icon className="h-5 w-5" />
+      <span className="hidden lg:block">{currentPageAction.label}</span>
+    </Button>
+  );
+};

src/components/layouts/Sidebar/SidebarNavigation.tsx

@@ -1,4 +1,9 @@
-import { GearIcon, PersonIcon, RepoIcon } from "@primer/octicons-react";
+import {
+  GearIcon,
+  PersonIcon,
+  RepoIcon,
+  FileDirectoryIcon,
+} from "@primer/octicons-react";
 import { Separator } from "@/components/ui/separator";
 import { SidebarNavigationLink } from "./SidebarNavigationLink";
 import { SidebarSignout } from "./SidebarSignout";
@@ -21,6 +26,11 @@ const SidebarNavigationItems = [
     href: URL.REPOSITORIES,
     icon: RepoIcon,
   },
+  {
+    name: "Resources",
+    href: URL.RESOURCES,
+    icon: FileDirectoryIcon,
+  },
   {
     name: "Settings",
     href: URL.SETTINGS,

src/components/ui/cta-link.tsx

@@ -9,7 +9,7 @@ type Props = {
 export const CTALink = ({ url, fn }: Props) => {
   return (
     <Link
-      className="bg-cta hover:bg-cta/90 rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
+      className="rounded-md bg-cta px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-cta/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
       href={url}
       onMouseEnter={fn}
     >

src/components/ui/select-form.tsx

@@ -0,0 +1,59 @@
+"use client";
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@/components/ui/select";
+
+interface SelectProps extends React.ComponentPropsWithoutRef<"select"> {
+  control: any;
+  name: string;
+  placeholder: string;
+  items: string[];
+  label: string;
+}
+
+export function SelectForm({
+  control,
+  name,
+  placeholder,
+  label,
+  ...props
+}: SelectProps) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{label}</FormLabel>
+          <Select onValueChange={field.onChange} defaultValue={field.value}>
+            <FormControl>
+              <SelectTrigger>
+                <SelectValue placeholder={placeholder} />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent>
+              {props.items.map((item, index) => (
+                <SelectItem key={index} value={item}>
+                  {item}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

src/components/ui/select.tsx

@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm capitalize ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}
@@ -118,7 +118,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-skeleton focus:text-default data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm capitalize outline-none focus:bg-skeleton focus:text-default data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}

src/config/constants/index.ts

@@ -1,6 +1,7 @@
 export const URL = {
   HOME: "/",
   REPOSITORIES: "/repositories",
+  RESOURCES: "/resources",
   PROFILE: "/profile",
   SETTINGS: "/settings",
   LINKEDIN: "https://www.linkedin.com/in/swapnil-singh-1a1b3b1b3/",

src/config/env.js

@@ -39,6 +39,7 @@ export const env = createEnv({
     CRON_SECRET: z.string(),
     TRIGGER_API_KEY: z.string(),
     TRIGGER_API_URL: z.string(),
+    SESSION_TOKEN_NAME: z.string().default("next-auth.session-token"),
   },
 
   /**
@@ -72,6 +73,7 @@ export const env = createEnv({
     CRON_SECRET: process.env.CRON_SECRET,
     TRIGGER_API_KEY: process.env.TRIGGER_API_KEY,
     TRIGGER_API_URL: process.env.TRIGGER_API_URL,
+    SESSION_TOKEN_NAME: process.env.SESSION_TOKEN_NAME,
     NEXT_PUBLIC_PUSHER_APP_KEY: process.env.NEXT_PUBLIC_PUSHER_APP_KEY,
     NEXT_PUBLIC_TRIGGER_PUBLIC_API_KEY:
       process.env.NEXT_PUBLIC_TRIGGER_PUBLIC_API_KEY,

src/middleware.ts

@@ -1,3 +1,16 @@
-export { default } from "next-auth/middleware";
+import { withAuth } from "next-auth/middleware";
+import { env } from "@/config/env";
+
+export default withAuth({
+  callbacks: {
+    authorized: ({ req }) => {
+      const sessionToken = req.cookies.get(env.SESSION_TOKEN_NAME);
+      if (!sessionToken) return false;
+
+      return true;
+    },
+  },
+  secret: env.NEXTAUTH_SECRET,
+});
 
 export const config = { matcher: ["/profile", "/settings"] };

src/modules/repositories/components/RepositoryInputSearch.tsx

@@ -1,12 +1,14 @@
 "use client";
 import { useTransition, useRef, useState } from "react";
+import { usePathname } from "next/navigation";
 import { parseAsString, useQueryState } from "nuqs";
 import { useMediaQuery, useDebounceCallback } from "usehooks-ts";
 import { Drawer, DrawerContent } from "@/components/ui/drawer";
 import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/spinner";
 import { SearchIcon } from "@primer/octicons-react";
 import { cn } from "@/lib/utils";
+import { URL } from "@/config/constants";
 
 type Props = {
   placeholder?: string;
@@ -20,7 +22,7 @@ export const RepositoryInputSearch = ({ placeholder }: Props) => {
     "query",
     parseAsString.withDefault("").withOptions({ startTransition }),
   );
-
+  const pathname = usePathname();
   const inputRef = useRef<HTMLInputElement>(null);
   const isDesktop = useMediaQuery("(min-width: 1024px)");
 
@@ -33,10 +35,12 @@ export const RepositoryInputSearch = ({ placeholder }: Props) => {
     300,
   );
 
+  if (pathname !== URL.REPOSITORIES) return null;
+
   return (
     <div
       className={cn(
-        "hover:bg-buttonHover border-input flex h-10 w-full cursor-pointer items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm ring-offset-[#21262D] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
+        "hover:bg-buttonHover flex h-10 w-full cursor-pointer items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-[#21262D] file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300",
         "lg:min-w-96 lg:cursor-default lg:space-x-2",
         isEditing && "ring-1 ring-slate-950",
       )}

src/modules/repositories/components/_forms/add-repository-form.tsx

@@ -3,16 +3,17 @@
 import { useTransition } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
-import { Form } from "@/components/ui/form";
-import { formRepositorySchema } from "./add-repository-schema";
-import { useToast } from "@/components/ui/use-toast";
+import { useFetchInfiniteRepositories } from "@/modules/repositories/hooks/use-fetch-infinite-repositories";
 import { useQueryParamsContext } from "@/modules/repositories/context/queryParamsContext";
 import { useShareRepositoryModal } from "@/modules/repositories/stores/useShareRepositoryModal";
+import { useToast } from "@/components/ui/use-toast";
+import { Form } from "@/components/ui/form";
+import { formRepositorySchema } from "./add-repository-schema";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { InputForm } from "@/components/ui/input-form";
 import { RichTextFieldForm } from "@/components/ui/rich-textfield-form";
 import { SubmitButton } from "@/components/ui/submit-button";
-import { useFetchInfiniteRepositories } from "@/modules/repositories/hooks/use-fetch-infinite-repositories";
+
 import { postRepositoryAction } from "@/services/actions/post-repository";
 import type * as z from "zod";