code cleanup

Author: guri2323

app/components/ErrorMessage.tsx

@@ -1,7 +1,7 @@
 import React, { PropsWithChildren } from "react";
 import { Text } from "@radix-ui/themes";
 
-const ErrorMessage = ({ children }: PropsWithChildren) => {
+export const ErrorMessage = ({ children }: PropsWithChildren) => {
   if (!children) {
     return null;
   }
@@ -11,5 +11,3 @@ const ErrorMessage = ({ children }: PropsWithChildren) => {
     </Text>
   );
 };
-
-export default ErrorMessage;

app/components/IssueStatusBadge.tsx

@@ -23,10 +23,8 @@ const statusMap: Record<
     color: "green",
   },
 };
-const IssueStatusBadge = ({ status }: Props) => {
+export const IssueStatusBadge = ({ status }: Props) => {
   return (
     <Badge color={statusMap[status].color}>{statusMap[status].label}</Badge>
   );
 };
-
-export default IssueStatusBadge;

app/components/Link.tsx

@@ -6,7 +6,7 @@ interface Props {
   href: string;
   children: string;
 }
-const Link = ({ href, children }: Props) => {
+export const Link = ({ href, children }: Props) => {
   return (
     <NextLink href={href} passHref legacyBehavior>
       <RadixLink className="text-blue-500 hover:text-blue-700">
@@ -15,5 +15,3 @@ const Link = ({ href, children }: Props) => {
     </NextLink>
   );
 };
-
-export default Link;

app/components/Skeleton.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+import Skeleton from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+
+export default Skeleton;

app/components/Spinner.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-const Spinner = () => {
+export const Spinner = () => {
   return (
     <div
       className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-e-transparent align-[-0.125em] text-surface motion-reduce:animate-[spin_1.5s_linear_infinite] dark:text-white"
@@ -12,5 +12,3 @@ const Spinner = () => {
     </div>
   );
 };
-
-export default Spinner;

app/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./Link";
+export * from "./ErrorMessage";
+export * from "./Spinner";
+export * from "./IssueStatusBadge";
+export { default as Skeleton } from "./Skeleton";

app/issues/loading.tsx

@@ -1,8 +1,7 @@
 import { Table } from "@radix-ui/themes";
 import React from "react";
-import Skeleton from "react-loading-skeleton";
-import "react-loading-skeleton/dist/skeleton.css";
 import IssueActions from "./issueActions";
+import { Skeleton } from "../components";
 
 const LoadingIssuesPage = () => {
   const issues = [1, 2, 3, 4, 5];

app/issues/new/page.tsx

@@ -1,16 +1,15 @@
 "use client";
-import SimpleMDE from "react-simplemde-editor";
-import "easymde/dist/easymde.min.css";
+import { createIssueSchema } from "@/app/createIssueSchema";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { Button, Callout, TextField } from "@radix-ui/themes";
-import { useForm, Controller } from "react-hook-form";
 import axios from "axios";
+import "easymde/dist/easymde.min.css";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { createIssueSchema } from "@/app/createIssueSchema";
+import { Controller, useForm } from "react-hook-form";
+import SimpleMDE from "react-simplemde-editor";
 import { z } from "zod";
-import ErrorMessage from "@/app/components/ErrorMessage";
-import Spinner from "@/app/components/Spinner";
+import { ErrorMessage, Spinner } from "../../components";
 
 type IssueForm = z.infer<typeof createIssueSchema>;
 
@@ -35,6 +34,7 @@ const NewIssuePage = () => {
     } catch (e) {
       setSubmitting(false);
       setError("Error creating issue");
+      console.error(e);
     }
   });
   return (

app/issues/page.tsx

@@ -1,17 +1,14 @@
-import React from "react";
 import { Table } from "@radix-ui/themes";
 
-import Link from "../components/Link";
-
 import prisma from "@/prisma/client";
-import IssueStatusBadge from "../components/IssueStatusBadge";
-import delay from "delay";
-import IssueActions from "./issueActions";
+
 import capitalize from "lodash/capitalize";
+import IssueActions from "./issueActions";
+import { Link, IssueStatusBadge } from "../components";
 
 const IssuesPage = async () => {
   const issues = await prisma.issue.findMany();
-  await delay(2000);
+
   return (
     <div>
       <IssueActions />

app/layout.tsx

@@ -4,7 +4,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import NavBar from "./NavBar";
-import { Theme, ThemePanel } from "@radix-ui/themes";
+import { Theme } from "@radix-ui/themes";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",