Refactored components to use explicit named exports

ladunjexa · ladunjexa · commit f91642ecc82f · 2023-11-09T01:57:30.000+02:00
diff --git a/app/(main)/(routes)/documents/[documentId]/page.tsx b/app/(main)/(routes)/documents/[documentId]/page.tsx
@@ -2,8 +2,8 @@
 
 import dynamic from "next/dynamic";
 import React, { useMemo } from "react";
-import Cover from "@/components/shared/Cover";
-import Toolbar from "@/components/shared/Toolbar";
+import { Cover } from "@/components/shared/Cover";
+import { Toolbar } from "@/components/shared/Toolbar";
 import { Skeleton } from "@/components/ui/skeleton";
 import { api } from "@/convex/_generated/api";
 import { Id } from "@/convex/_generated/dataModel";
diff --git a/app/(main)/_components/Banner.tsx b/app/(main)/_components/Banner.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import ConfirmModal from "@/components/modals/ConfirmModal";
+import { ConfirmModal } from "@/components/modals/ConfirmModal";
 import { Button } from "@/components/ui/button";
 import { api } from "@/convex/_generated/api";
 import { Id } from "@/convex/_generated/dataModel";
@@ -12,7 +12,7 @@ type BannerProps = {
   documentId: Id<"documents">;
 };
 
-const Banner = ({ documentId }: BannerProps) => {
+export const Banner = ({ documentId }: BannerProps) => {
   const router = useRouter();
   const remove = useMutation(api.documents.remove);
   const restore = useMutation(api.documents.restore);
@@ -62,5 +62,3 @@ const Banner = ({ documentId }: BannerProps) => {
     </div>
   );
 };
-
-export default Banner;
diff --git a/app/(main)/_components/DocumentList.tsx b/app/(main)/_components/DocumentList.tsx
@@ -5,7 +5,7 @@ import { Doc, Id } from "@/convex/_generated/dataModel";
 import { useQuery } from "convex/react";
 import { useParams, useRouter } from "next/navigation";
 import React, { useState } from "react";
-import Item from "./Item";
+import { Item } from "./Item";
 import { cn } from "@/lib/utils";
 import { FileIcon } from "lucide-react";
 
@@ -15,7 +15,10 @@ interface DocumentListProps {
   data?: Doc<"documents">[];
 }
 
-const DocumentList = ({ parentDocumentId, level = 0 }: DocumentListProps) => {
+export const DocumentList = ({
+  parentDocumentId,
+  level = 0,
+}: DocumentListProps) => {
   const params = useParams();
   const router = useRouter();
   const [expanded, setExpanded] = useState<Record<string, boolean>>({});
@@ -84,5 +87,3 @@ const DocumentList = ({ parentDocumentId, level = 0 }: DocumentListProps) => {
     </>
   );
 };
-
-export default DocumentList;
diff --git a/app/(main)/_components/Item.tsx b/app/(main)/_components/Item.tsx
@@ -38,7 +38,7 @@ interface ItemProps {
   icon: LucideIcon;
 }
 
-const Item = ({
+export const Item = ({
   id,
   label,
   onClick,
@@ -181,5 +181,3 @@ Item.Skeleton = function ItemSkeleton({ level }: { level?: number }) {
     </div>
   );
 };
-
-export default Item;
diff --git a/app/(main)/_components/Menu.tsx b/app/(main)/_components/Menu.tsx
@@ -20,7 +20,7 @@ interface MenuProps {
   documentId: Id<"documents">;
 }
 
-const Menu = ({ documentId }: MenuProps) => {
+export const Menu = ({ documentId }: MenuProps) => {
   const router = useRouter();
   const { user } = useUser();
 
@@ -66,5 +66,3 @@ const Menu = ({ documentId }: MenuProps) => {
 Menu.Skeleton = function MenuSkeleton() {
   return <Skeleton className="h-10 w-10" />;
 };
-
-export default Menu;
diff --git a/app/(main)/_components/Navbar.tsx b/app/(main)/_components/Navbar.tsx
@@ -6,17 +6,17 @@ import { useParams } from "next/navigation";
 import { api } from "@/convex/_generated/api";
 import { Id } from "@/convex/_generated/dataModel";
 import { MenuIcon } from "lucide-react";
-import Title from "./Title";
-import Banner from "./Banner";
-import Menu from "./Menu";
-import Publish from "./Publish";
+import { Title } from "./Title";
+import { Banner } from "./Banner";
+import { Menu } from "./Menu";
+import { Publish } from "./Publish";
 
 interface NavbarProps {
   isCollapsed: boolean;
   onResetWidth: () => void;
 }
 
-const Navbar = ({ isCollapsed, onResetWidth }: NavbarProps) => {
+export const Navbar = ({ isCollapsed, onResetWidth }: NavbarProps) => {
   const params = useParams();
 
   const document = useQuery(api.documents.getById, {
@@ -59,5 +59,3 @@ const Navbar = ({ isCollapsed, onResetWidth }: NavbarProps) => {
     </>
   );
 };
-
-export default Navbar;
diff --git a/app/(main)/_components/Navigation.tsx b/app/(main)/_components/Navigation.tsx
@@ -15,22 +15,22 @@ import { useMediaQuery } from "usehooks-ts";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { useMutation } from "convex/react";
 import { cn } from "@/lib/utils";
-import UserItem from "./UserItem";
+import { UserItem } from "./UserItem";
 import { api } from "@/convex/_generated/api";
-import Item from "./Item";
+import { Item } from "./Item";
 import { toast } from "sonner";
-import DocumentList from "./DocumentList";
+import { DocumentList } from "./DocumentList";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import TrashBox from "./TrashBox";
+import { TrashBox } from "./TrashBox";
 import { useSearch } from "@/hooks/useSearch";
 import { useSettings } from "@/hooks/useSettings";
-import Navbar from "./Navbar";
+import { Navbar } from "./Navbar";
 
-const Navigation = () => {
+export const Navigation = () => {
   const router = useRouter();
   const params = useParams();
   const pathname = usePathname();
@@ -210,5 +210,3 @@ const Navigation = () => {
     </>
   );
 };
-
-export default Navigation;
diff --git a/app/(main)/_components/Publish.tsx b/app/(main)/_components/Publish.tsx
@@ -7,7 +7,7 @@ import {
   PopoverContent,
 } from "@/components/ui/popover";
 
-import { useOrigin } from "@/hooks/useOrigin";
+import useOrigin from "@/hooks/useOrigin";
 import { useMutation } from "convex/react";
 import { api } from "@/convex/_generated/api";
 import { toast } from "sonner";
@@ -18,7 +18,7 @@ interface PublishProps {
   initialData: Doc<"documents">;
 }
 
-const Publish = ({ initialData }: PublishProps) => {
+export const Publish = ({ initialData }: PublishProps) => {
   const origin = useOrigin();
   const update = useMutation(api.documents.update);
 
@@ -133,5 +133,3 @@ const Publish = ({ initialData }: PublishProps) => {
     </Popover>
   );
 };
-
-export default Publish;
diff --git a/app/(main)/_components/Title.tsx b/app/(main)/_components/Title.tsx
@@ -12,7 +12,7 @@ type TitleProps = {
   initialData: Doc<"documents">;
 };
 
-const Title = ({ initialData }: TitleProps) => {
+export const Title = ({ initialData }: TitleProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const update = useMutation(api.documents.update);
 
@@ -76,5 +76,3 @@ const Title = ({ initialData }: TitleProps) => {
 Title.Skeleton = function TitleSkeleton() {
   return <Skeleton className="h-6 w-20 rounded-md" />;
 };
-
-export default Title;
diff --git a/app/(main)/_components/TrashBox.tsx b/app/(main)/_components/TrashBox.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import ConfirmModal from "@/components/modals/ConfirmModal";
-import Spinner from "@/components/shared/Spinner";
+import { ConfirmModal } from "@/components/modals/ConfirmModal";
+import { Spinner } from "@/components/shared/Spinner";
 import { Input } from "@/components/ui/input";
 import { api } from "@/convex/_generated/api";
 import { Id } from "@/convex/_generated/dataModel";
@@ -11,7 +11,7 @@ import { useParams, useRouter } from "next/navigation";
 import React, { useState } from "react";
 import { toast } from "sonner";
 
-const TrashBox = () => {
+export const TrashBox = () => {
   const router = useRouter();
   const params = useParams();
   const documents = useQuery(api.documents.getTrash);
@@ -111,5 +111,3 @@ const TrashBox = () => {
     </div>
   );
 };
-
-export default TrashBox;
diff --git a/app/(main)/_components/UserItem.tsx b/app/(main)/_components/UserItem.tsx
@@ -14,7 +14,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 
-const UserItem = () => {
+export const UserItem = () => {
   const { user } = useUser();
 
   return (
@@ -69,5 +69,3 @@ const UserItem = () => {
     </DropdownMenu>
   );
 };
-
-export default UserItem;
diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
@@ -2,9 +2,9 @@
 
 import React from "react";
 import { useConvexAuth } from "convex/react";
-import Spinner from "@/components/shared/Spinner";
+import { Spinner } from "@/components/shared/Spinner";
 import { redirect } from "next/navigation";
-import Navigation from "./_components/Navigation";
+import { Navigation } from "./_components/Navigation";
 import SearchCommand from "@/components/shared/SearchCommand";
 
 export default function MainLayout({
diff --git a/app/(marketing)/_components/Footer.tsx b/app/(marketing)/_components/Footer.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import Logo from "./Logo";
+import { Logo } from "./Logo";
 import { Button } from "@/components/ui/button";
 
-const Footer = () => {
+export const Footer = () => {
   return (
     <div className="z-50 flex w-full items-center bg-background p-6 dark:bg-[#1F1F1F]">
       <Logo />
@@ -17,5 +17,3 @@ const Footer = () => {
     </div>
   );
 };
-
-export default Footer;
diff --git a/app/(marketing)/_components/Heading.tsx b/app/(marketing)/_components/Heading.tsx
@@ -4,12 +4,12 @@ import { Button } from "@/components/ui/button";
 import { ArrowRight } from "lucide-react";
 import React from "react";
 import { useConvexAuth } from "convex/react";
-import Spinner from "@/components/shared/Spinner";
+import { Spinner } from "@/components/shared/Spinner";
 import Link from "next/link";
 import { SignInButton } from "@clerk/clerk-react";
 import Image from "next/image";
 
-const Heading = () => {
+export const Heading = () => {
   const { isAuthenticated, isLoading } = useConvexAuth();
   return (
     <div className="max-w-3xl space-y-4">
@@ -78,5 +78,3 @@ const Heading = () => {
     </div>
   );
 };
-
-export default Heading;
diff --git a/app/(marketing)/_components/Heroes.tsx b/app/(marketing)/_components/Heroes.tsx
@@ -1,7 +1,7 @@
 import Image from "next/image";
 import React from "react";
 
-const Heroes = () => {
+export const Heroes = () => {
   return (
     <div className="flex max-w-5xl flex-col items-center justify-center">
       <div className="flex items-center">
@@ -37,5 +37,3 @@ const Heroes = () => {
     </div>
   );
 };
-
-export default Heroes;
diff --git a/app/(marketing)/_components/Logo.tsx b/app/(marketing)/_components/Logo.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
 
 const poppins = Poppins({ subsets: ["latin"], weight: ["400", "600"] });
 
-const Logo = () => {
+export const Logo = () => {
   return (
     <div className="hidden items-center gap-x-2 md:flex">
       <Image
@@ -19,5 +19,3 @@ const Logo = () => {
     </div>
   );
 };
-
-export default Logo;
diff --git a/app/(marketing)/_components/Navbar.tsx b/app/(marketing)/_components/Navbar.tsx
@@ -3,15 +3,15 @@
 import useScrollTop from "@/hooks/useScrollTop";
 import React from "react";
 import { cn } from "@/lib/utils";
-import Logo from "./Logo";
+import { Logo } from "./Logo";
 import { ModeToggle } from "@/components/shared/ModeToggle";
 import { useConvexAuth } from "convex/react";
 import { SignInButton, SignUpButton, UserButton } from "@clerk/clerk-react";
 import { Button } from "@/components/ui/button";
-import Spinner from "@/components/shared/Spinner";
+import { Spinner } from "@/components/shared/Spinner";
 import Link from "next/link";
 
-const Navbar = () => {
+export const Navbar = () => {
   const { isAuthenticated, isLoading } = useConvexAuth();
   const scrolled = useScrollTop();
   return (
@@ -50,5 +50,3 @@ const Navbar = () => {
     </div>
   );
 };
-
-export default Navbar;
diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Navbar from "./_components/Navbar";
+import { Navbar } from "./_components/Navbar";
 
 export default function MarketingLayout({
   children,
diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
@@ -1,6 +1,6 @@
-import Footer from "./_components/Footer";
-import Heading from "./_components/Heading";
-import Heroes from "./_components/Heroes";
+import { Footer } from "./_components/Footer";
+import { Heading } from "./_components/Heading";
+import { Heroes } from "./_components/Heroes";
 
 export default function Home() {
   return (
diff --git a/app/(public)/(routes)/preview/[documentId]/page.tsx b/app/(public)/(routes)/preview/[documentId]/page.tsx
@@ -2,8 +2,8 @@
 
 import dynamic from "next/dynamic";
 import React, { useMemo } from "react";
-import Cover from "@/components/shared/Cover";
-import Toolbar from "@/components/shared/Toolbar";
+import { Cover } from "@/components/shared/Cover";
+import { Toolbar } from "@/components/shared/Toolbar";
 import { Skeleton } from "@/components/ui/skeleton";
 import { api } from "@/convex/_generated/api";
 import { Id } from "@/convex/_generated/dataModel";
diff --git a/components/modals/ConfirmModal.tsx b/components/modals/ConfirmModal.tsx
@@ -18,7 +18,7 @@ interface ConfirmModalProps {
   onConfirm: () => void;
 }
 
-const ConfirmModal = ({ children, onConfirm }: ConfirmModalProps) => {
+export const ConfirmModal = ({ children, onConfirm }: ConfirmModalProps) => {
   const handleConfirm = (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>
   ) => {
@@ -48,5 +48,3 @@ const ConfirmModal = ({ children, onConfirm }: ConfirmModalProps) => {
     </AlertDialog>
   );
 };
-
-export default ConfirmModal;
diff --git a/components/modals/SettingsModal.tsx b/components/modals/SettingsModal.tsx
@@ -7,7 +7,7 @@ import { Label } from "../ui/label";
 import { useSettings } from "@/hooks/useSettings";
 import { ModeToggle } from "../shared/ModeToggle";
 
-const SettingsModal = () => {
+export const SettingsModal = () => {
   const settings = useSettings();
 
   return (
@@ -29,5 +29,3 @@ const SettingsModal = () => {
     </Dialog>
   );
 };
-
-export default SettingsModal;
diff --git a/components/providers/ModalProvider.tsx b/components/providers/ModalProvider.tsx
diff --git a/components/shared/Cover.tsx b/components/shared/Cover.tsx
diff --git a/components/shared/SingleImageDropzone.tsx b/components/shared/SingleImageDropzone.tsx
diff --git a/components/shared/Spinner.tsx b/components/shared/Spinner.tsx
diff --git a/components/shared/Toolbar.tsx b/components/shared/Toolbar.tsx
diff --git a/hooks/useOrigin.tsx b/hooks/useOrigin.tsx
