From e7324a4f09bac88958bcd5d71af99d62f8d952d8 Mon Sep 17 00:00:00 2001
From: Illia Derevianko <iliaderevianko30@gmail.com>
Date: Wed, 14 Aug 2024 18:54:51 +0300
Subject: [PATCH 1/4] feat: not found error pages

Co-authored-by: nick-bolas <nick-bolas@users.noreply.github.com>
---
 app/companies/not-found.tsx      | 13 +++++++++++++
 app/events/not-found.tsx         | 13 +++++++++++++
 app/not-found.tsx                |  7 +++++++
 app/opportunities/not-found.tsx  | 13 +++++++++++++
 app/students/not-found.tsx       | 13 +++++++++++++
 components/NotFoundPage.tsx      | 27 ++++++++++++++++++++++++++
 components/not-found.module.scss | 33 ++++++++++++++++++++++++++++++++
 7 files changed, 119 insertions(+)
 create mode 100644 app/companies/not-found.tsx
 create mode 100644 app/events/not-found.tsx
 create mode 100644 app/not-found.tsx
 create mode 100644 app/opportunities/not-found.tsx
 create mode 100644 app/students/not-found.tsx
 create mode 100644 components/NotFoundPage.tsx
 create mode 100644 components/not-found.module.scss

diff --git a/app/companies/not-found.tsx b/app/companies/not-found.tsx
new file mode 100644
index 00000000..faf56453
--- /dev/null
+++ b/app/companies/not-found.tsx
@@ -0,0 +1,13 @@
+import NotFoundPage from "@/components/NotFoundPage"
+
+import React from "react"
+
+export default function NotFound() {
+  return (
+    <NotFoundPage
+      message="We could not find the company you were looking for."
+      btnName="Go to all companies page"
+      btnUrl="/companies"
+    />
+  )
+}
diff --git a/app/events/not-found.tsx b/app/events/not-found.tsx
new file mode 100644
index 00000000..03d0bf06
--- /dev/null
+++ b/app/events/not-found.tsx
@@ -0,0 +1,13 @@
+import NotFoundPage from "@/components/NotFoundPage"
+
+import React from "react"
+
+export default function NotFound() {
+  return (
+    <NotFoundPage
+      message="We could not find the event you were looking for."
+      btnName="Go to all events page"
+      btnUrl="/events"
+    />
+  )
+}
diff --git a/app/not-found.tsx b/app/not-found.tsx
new file mode 100644
index 00000000..c26c1386
--- /dev/null
+++ b/app/not-found.tsx
@@ -0,0 +1,7 @@
+import NotFoundPage from "@/components/NotFoundPage"
+
+import React from "react"
+
+export default function NotFound() {
+  return <NotFoundPage message="Page not found." btnName="Go back home" btnUrl="/" />
+}
diff --git a/app/opportunities/not-found.tsx b/app/opportunities/not-found.tsx
new file mode 100644
index 00000000..7c84e40e
--- /dev/null
+++ b/app/opportunities/not-found.tsx
@@ -0,0 +1,13 @@
+import NotFoundPage from "@/components/NotFoundPage"
+
+import React from "react"
+
+export default function NotFound() {
+  return (
+    <NotFoundPage
+      message="We could not find the opportunity you were looking for."
+      btnName="Go to all opportunities page"
+      btnUrl="/opportunitites"
+    />
+  )
+}
diff --git a/app/students/not-found.tsx b/app/students/not-found.tsx
new file mode 100644
index 00000000..ef1e798e
--- /dev/null
+++ b/app/students/not-found.tsx
@@ -0,0 +1,13 @@
+import NotFoundPage from "@/components/NotFoundPage"
+
+import React from "react"
+
+export default function NotFound() {
+  return (
+    <NotFoundPage
+      message="We could not find the student you were looking for."
+      btnName="Go to all students page"
+      btnUrl="/students"
+    />
+  )
+}
diff --git a/components/NotFoundPage.tsx b/components/NotFoundPage.tsx
new file mode 100644
index 00000000..673545be
--- /dev/null
+++ b/components/NotFoundPage.tsx
@@ -0,0 +1,27 @@
+import styles from "./not-found.module.scss"
+
+import { Button, Flex } from "@radix-ui/themes"
+import Link from "next/link"
+import React from "react"
+
+export default function NotFoundPage({
+  message,
+  btnName,
+  btnUrl,
+}: {
+  message: string
+  btnName: string
+  btnUrl: string
+}) {
+  return (
+    <div className={styles.container}>
+      <Flex justify="center" align="center" direction="column" gap="3">
+        <h1 className={styles.header}>404</h1>
+        <h2 className={styles.message}>{message}</h2>
+        <Button className={styles.backButton} asChild>
+          <Link href={btnUrl}>{btnName}</Link>
+        </Button>
+      </Flex>
+    </div>
+  )
+}
diff --git a/components/not-found.module.scss b/components/not-found.module.scss
new file mode 100644
index 00000000..ec6ba3f7
--- /dev/null
+++ b/components/not-found.module.scss
@@ -0,0 +1,33 @@
+.container {
+  .header {
+    font-size: 3rem;
+    color: var(--blue-8);
+  }
+  .message {
+    font-size: 1rem;
+    color: var(--gray-9);
+  }
+  .backButton {
+    background-color: var(--blue-9);
+    -webkit-transition: -webkit-transform 0.3s ease-out;
+    -moz-transition: -moz-transform 0.3s ease-out;
+    -o-transition: -o-transform 0.3s ease-out;
+    -ms-transition: -ms-transform 0.3s ease-out;
+    transition: transform 0.3s ease-out;
+    &:hover {
+      background-color: var(--blue-9);
+      border: solid 2px var(--blue-10);
+      box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6);
+      -webkit-transform: scale(1.05);
+      -moz-transform: scale(1.05);
+      -o-transform: scale(1.05);
+      transform: scale(1.05);
+
+      -webkit-transition: -webkit-transform 0.3s ease-out;
+      -moz-transition: -moz-transform 0.3s ease-out;
+      -o-transition: -o-transform 0.3s ease-out;
+      -ms-transition: -ms-transform 0.3s ease-out;
+      transition: transform 0.3s ease-out;
+    }
+  }
+}

From 8283421ae9dde91766ce505034d1eeac98b37ade Mon Sep 17 00:00:00 2001
From: Illia Derevianko <iliaderevianko30@gmail.com>
Date: Wed, 14 Aug 2024 19:16:40 +0300
Subject: [PATCH 2/4] feat: general error page

---
 app/error.tsx                                 | 27 +++++++++++++++++++
 app/login/page.tsx                            |  1 +
 components/ErrorPage.tsx                      | 24 +++++++++++++++++
 components/NotFoundPage.tsx                   |  2 +-
 ...ot-found.module.scss => error.module.scss} |  0
 5 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 app/error.tsx
 create mode 100644 components/ErrorPage.tsx
 rename components/{not-found.module.scss => error.module.scss} (100%)

diff --git a/app/error.tsx b/app/error.tsx
new file mode 100644
index 00000000..0e9ec672
--- /dev/null
+++ b/app/error.tsx
@@ -0,0 +1,27 @@
+"use client"
+
+// Error boundaries must be Client Components
+import ErrorPage from "@/components/ErrorPage"
+
+import { Button } from "@radix-ui/themes"
+import React, { useEffect } from "react"
+
+export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error)
+  }, [error])
+
+  return (
+    <ErrorPage title="Oops!" message="Something went wrong!">
+      <Button
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </Button>
+    </ErrorPage>
+  )
+}
diff --git a/app/login/page.tsx b/app/login/page.tsx
index c826d315..268e954a 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -3,6 +3,7 @@ import Auth from "@/components/Auth"
 import React from "react"
 
 const Login = () => {
+  throw new Error("client error test")
   return <Auth />
 }
 export default Login
diff --git a/components/ErrorPage.tsx b/components/ErrorPage.tsx
new file mode 100644
index 00000000..4d1ea49f
--- /dev/null
+++ b/components/ErrorPage.tsx
@@ -0,0 +1,24 @@
+import styles from "./error.module.scss"
+
+import { Button, Flex } from "@radix-ui/themes"
+import React from "react"
+
+export default function ErrorPage({
+  children,
+  title,
+  message,
+}: {
+  children: React.ReactNode
+  title: string
+  message: string
+}) {
+  return (
+    <div className={styles.container}>
+      <Flex justify="center" align="center" direction="column" gap="3">
+        <h1 className={styles.header}>{title}</h1>
+        <h2 className={styles.message}>{message}</h2>
+        {children}
+      </Flex>
+    </div>
+  )
+}
diff --git a/components/NotFoundPage.tsx b/components/NotFoundPage.tsx
index 673545be..fec2ac68 100644
--- a/components/NotFoundPage.tsx
+++ b/components/NotFoundPage.tsx
@@ -1,4 +1,4 @@
-import styles from "./not-found.module.scss"
+import styles from "./error.module.scss"
 
 import { Button, Flex } from "@radix-ui/themes"
 import Link from "next/link"
diff --git a/components/not-found.module.scss b/components/error.module.scss
similarity index 100%
rename from components/not-found.module.scss
rename to components/error.module.scss

From 5f504695ce096747f306b6ae864b1ed95217c9af Mon Sep 17 00:00:00 2001
From: Illia Derevianko <iliaderevianko30@gmail.com>
Date: Thu, 15 Aug 2024 12:29:04 +0300
Subject: [PATCH 3/4] refactor: extract animated button into its own componenet

---
 app/error.tsx                                 |  5 ++--
 app/login/page.tsx                            |  1 -
 components/NotFoundPage.tsx                   |  6 +++--
 components/buttons/AnimatedButton.tsx         | 14 +++++++++++
 .../buttons/animated-button.module.scss       | 23 +++++++++++++++++++
 components/error.module.scss                  | 23 -------------------
 6 files changed, 44 insertions(+), 28 deletions(-)
 create mode 100644 components/buttons/AnimatedButton.tsx
 create mode 100644 components/buttons/animated-button.module.scss

diff --git a/app/error.tsx b/app/error.tsx
index 0e9ec672..a64db669 100644
--- a/app/error.tsx
+++ b/app/error.tsx
@@ -2,6 +2,7 @@
 
 // Error boundaries must be Client Components
 import ErrorPage from "@/components/ErrorPage"
+import { AnimatedButton } from "@/components/buttons/AnimatedButton"
 
 import { Button } from "@radix-ui/themes"
 import React, { useEffect } from "react"
@@ -14,14 +15,14 @@ export default function Error({ error, reset }: { error: Error & { digest?: stri
 
   return (
     <ErrorPage title="Oops!" message="Something went wrong!">
-      <Button
+      <AnimatedButton
         onClick={
           // Attempt to recover by trying to re-render the segment
           () => reset()
         }
       >
         Try again
-      </Button>
+      </AnimatedButton>
     </ErrorPage>
   )
 }
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 268e954a..c826d315 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -3,7 +3,6 @@ import Auth from "@/components/Auth"
 import React from "react"
 
 const Login = () => {
-  throw new Error("client error test")
   return <Auth />
 }
 export default Login
diff --git a/components/NotFoundPage.tsx b/components/NotFoundPage.tsx
index fec2ac68..3acc86a1 100644
--- a/components/NotFoundPage.tsx
+++ b/components/NotFoundPage.tsx
@@ -1,3 +1,5 @@
+import { AnimatedButton } from "@/components/buttons/AnimatedButton"
+
 import styles from "./error.module.scss"
 
 import { Button, Flex } from "@radix-ui/themes"
@@ -18,9 +20,9 @@ export default function NotFoundPage({
       <Flex justify="center" align="center" direction="column" gap="3">
         <h1 className={styles.header}>404</h1>
         <h2 className={styles.message}>{message}</h2>
-        <Button className={styles.backButton} asChild>
+        <AnimatedButton asChild>
           <Link href={btnUrl}>{btnName}</Link>
-        </Button>
+        </AnimatedButton>
       </Flex>
     </div>
   )
diff --git a/components/buttons/AnimatedButton.tsx b/components/buttons/AnimatedButton.tsx
new file mode 100644
index 00000000..cb674918
--- /dev/null
+++ b/components/buttons/AnimatedButton.tsx
@@ -0,0 +1,14 @@
+import styles from "./animated-button.module.scss"
+
+import { Button } from "@radix-ui/themes"
+import React from "react"
+
+type AnimatedButtonProps = React.ComponentProps<typeof Button>
+
+export const AnimatedButton: React.FC<AnimatedButtonProps> = props => {
+  return (
+    <Button className={styles.animatedButton} {...props}>
+      {props.children}
+    </Button>
+  )
+}
diff --git a/components/buttons/animated-button.module.scss b/components/buttons/animated-button.module.scss
new file mode 100644
index 00000000..1a4aaae5
--- /dev/null
+++ b/components/buttons/animated-button.module.scss
@@ -0,0 +1,23 @@
+.animatedButton {
+  background-color: var(--blue-9);
+  -webkit-transition: -webkit-transform 0.3s ease-out;
+  -moz-transition: -moz-transform 0.3s ease-out;
+  -o-transition: -o-transform 0.3s ease-out;
+  -ms-transition: -ms-transform 0.3s ease-out;
+  transition: transform 0.3s ease-out;
+  &:hover {
+    background-color: var(--blue-9);
+    border: solid 2px var(--blue-10);
+    box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6);
+    -webkit-transform: scale(1.05);
+    -moz-transform: scale(1.05);
+    -o-transform: scale(1.05);
+    transform: scale(1.05);
+
+    -webkit-transition: -webkit-transform 0.3s ease-out;
+    -moz-transition: -moz-transform 0.3s ease-out;
+    -o-transition: -o-transform 0.3s ease-out;
+    -ms-transition: -ms-transform 0.3s ease-out;
+    transition: transform 0.3s ease-out;
+  }
+}
diff --git a/components/error.module.scss b/components/error.module.scss
index ec6ba3f7..25e58a98 100644
--- a/components/error.module.scss
+++ b/components/error.module.scss
@@ -7,27 +7,4 @@
     font-size: 1rem;
     color: var(--gray-9);
   }
-  .backButton {
-    background-color: var(--blue-9);
-    -webkit-transition: -webkit-transform 0.3s ease-out;
-    -moz-transition: -moz-transform 0.3s ease-out;
-    -o-transition: -o-transform 0.3s ease-out;
-    -ms-transition: -ms-transform 0.3s ease-out;
-    transition: transform 0.3s ease-out;
-    &:hover {
-      background-color: var(--blue-9);
-      border: solid 2px var(--blue-10);
-      box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6);
-      -webkit-transform: scale(1.05);
-      -moz-transform: scale(1.05);
-      -o-transform: scale(1.05);
-      transform: scale(1.05);
-
-      -webkit-transition: -webkit-transform 0.3s ease-out;
-      -moz-transition: -moz-transform 0.3s ease-out;
-      -o-transition: -o-transform 0.3s ease-out;
-      -ms-transition: -ms-transform 0.3s ease-out;
-      transition: transform 0.3s ease-out;
-    }
-  }
 }

From 4aef356a710229c66d531e02e4945988a8b1dc1f Mon Sep 17 00:00:00 2001
From: Illia Derevianko <iliaderevianko30@gmail.com>
Date: Thu, 15 Aug 2024 13:07:27 +0300
Subject: [PATCH 4/4] chore: replace html headers with radix headers & improve
 button animation

---
 components/ErrorPage.tsx                      | 10 +++--
 components/NotFoundPage.tsx                   | 10 +++--
 .../buttons/animated-button.module.scss       | 40 ++++++++++++++-----
 3 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/components/ErrorPage.tsx b/components/ErrorPage.tsx
index 4d1ea49f..9c00994a 100644
--- a/components/ErrorPage.tsx
+++ b/components/ErrorPage.tsx
@@ -1,6 +1,6 @@
 import styles from "./error.module.scss"
 
-import { Button, Flex } from "@radix-ui/themes"
+import { Flex, Heading } from "@radix-ui/themes"
 import React from "react"
 
 export default function ErrorPage({
@@ -15,8 +15,12 @@ export default function ErrorPage({
   return (
     <div className={styles.container}>
       <Flex justify="center" align="center" direction="column" gap="3">
-        <h1 className={styles.header}>{title}</h1>
-        <h2 className={styles.message}>{message}</h2>
+        <Heading as="h1" className={styles.header}>
+          {title}
+        </Heading>
+        <Heading as="h2" className={styles.message}>
+          {message}
+        </Heading>
         {children}
       </Flex>
     </div>
diff --git a/components/NotFoundPage.tsx b/components/NotFoundPage.tsx
index 3acc86a1..03530493 100644
--- a/components/NotFoundPage.tsx
+++ b/components/NotFoundPage.tsx
@@ -2,7 +2,7 @@ import { AnimatedButton } from "@/components/buttons/AnimatedButton"
 
 import styles from "./error.module.scss"
 
-import { Button, Flex } from "@radix-ui/themes"
+import { Flex, Heading } from "@radix-ui/themes"
 import Link from "next/link"
 import React from "react"
 
@@ -18,8 +18,12 @@ export default function NotFoundPage({
   return (
     <div className={styles.container}>
       <Flex justify="center" align="center" direction="column" gap="3">
-        <h1 className={styles.header}>404</h1>
-        <h2 className={styles.message}>{message}</h2>
+        <Heading as="h1" className={styles.header}>
+          404
+        </Heading>
+        <Heading as="h2" className={styles.message}>
+          {message}
+        </Heading>
         <AnimatedButton asChild>
           <Link href={btnUrl}>{btnName}</Link>
         </AnimatedButton>
diff --git a/components/buttons/animated-button.module.scss b/components/buttons/animated-button.module.scss
index 1a4aaae5..e930eb23 100644
--- a/components/buttons/animated-button.module.scss
+++ b/components/buttons/animated-button.module.scss
@@ -1,10 +1,20 @@
 .animatedButton {
   background-color: var(--blue-9);
-  -webkit-transition: -webkit-transform 0.3s ease-out;
-  -moz-transition: -moz-transform 0.3s ease-out;
-  -o-transition: -o-transform 0.3s ease-out;
-  -ms-transition: -ms-transform 0.3s ease-out;
-  transition: transform 0.3s ease-out;
+  -webkit-transition:
+    -webkit-transform 0.3s ease-out,
+    -webkit-box-shadow 0.3s ease-out;
+  -moz-transition:
+    -moz-transform 0.3s ease-out,
+    -moz-box-shadow 0.3s ease-out;
+  -o-transition:
+    -o-transform 0.3s ease-out,
+    -o-box-shadow 0.3s ease-out;
+  -ms-transition:
+    -ms-transform 0.3s ease-out,
+    -ms-box-shadow 0.3s ease-out;
+  transition:
+    transform 0.3s ease-out,
+    box-shadow 0.3s ease-out;
   &:hover {
     background-color: var(--blue-9);
     border: solid 2px var(--blue-10);
@@ -14,10 +24,20 @@
     -o-transform: scale(1.05);
     transform: scale(1.05);
 
-    -webkit-transition: -webkit-transform 0.3s ease-out;
-    -moz-transition: -moz-transform 0.3s ease-out;
-    -o-transition: -o-transform 0.3s ease-out;
-    -ms-transition: -ms-transform 0.3s ease-out;
-    transition: transform 0.3s ease-out;
+    -webkit-transition:
+      -webkit-transform 0.3s ease-out,
+      -webkit-box-shadow 0.3s ease-out;
+    -moz-transition:
+      -moz-transform 0.3s ease-out,
+      -moz-box-shadow 0.3s ease-out;
+    -o-transition:
+      -o-transform 0.3s ease-out,
+      -o-box-shadow 0.3s ease-out;
+    -ms-transition:
+      -ms-transform 0.3s ease-out,
+      -ms-box-shadow 0.3s ease-out;
+    transition:
+      transform 0.3s ease-out,
+      box-shadow 0.3s ease-out;
   }
 }