typescript! yay! (pain.)

src/components/AnimatedSVG/AnimatedSVG.module.css

@@ -1,6 +1,6 @@
 /* the value 54150 is decided by getting the length of the path (54122 for the logo asset) */
 
-.svgWrapper path {
+.svg_wrapper path {
   stroke-dasharray: 54150;
   stroke-dashoffset: 54150;
   animation: draw 5s ease-in-out infinite;

src/components/AnimatedSVG/index.tsx

@@ -1,13 +1,15 @@
-import React from 'react';
+import React from "react";
 import styles from "./AnimatedSVG.module.css";
 
-const AnimatedSVG = ({ stroke = "#ffffff" }) => {
+const AnimatedSVG = () => {
+  const stroke = "#fff";
   return (
-    <div className={styles.svgWrapper}>
+    <div className={styles.svg_wrapper}>
       {/* width, height and viewBox are necessary */}
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="256" height="256" // adjust size here
+        width="256"
+        height="256" // adjust size here
         viewBox="0 0 512 512"
         preserveAspectRatio="xMidYMid meet"
       >
@@ -35,12 +37,12 @@ const AnimatedSVG = ({ stroke = "#ffffff" }) => {
             strokeMiterlimit={10}
             fill="none"
             id="svglength"
-          // document.getElementById('svglength').getTotalLength()
+            // document.getElementById('svglength').getTotalLength()
           />
         </g>
       </svg>
     </div>
-  )
-}
+  );
+};
 
 export default AnimatedSVG;

src/components/Button/index.jsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import styles from "./Button.module.css";
-
-function Button({ children, onClickMethod }) {
-  const clickHandler = (e) => {
-    e.preventDefault();
-    onClickMethod();
-  }
-  return (
-    <button type="button"
-      className={styles.btn_wrapper}
-      onClick={clickHandler}>
-      {children}
-    </button>
-  )
-}
-
-export default Button;

src/components/Button/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import styles from "./Button.module.css";
+
+type ButtonProps = {
+  children: React.ReactNode;
+  onClickMethod: () => void;
+}
+
+const Button = ({ children, onClickMethod }: ButtonProps) => {
+  const clickHandler = (e: React.MouseEvent) => {
+    e.preventDefault();
+    onClickMethod();
+  };
+  return (
+    <button type="button" className={styles.btn_wrapper} onClick={clickHandler}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;

src/components/Navbar/index.jsx

@@ -1,24 +0,0 @@
-import React, { useContext } from 'react'
-
-import styles from "./Navbar.module.css";
-
-import { AuthContext } from "../../App";
-import StyledNavLink from '../StyledNavLink';
-
-const Navbar = () => {
-  const auth = useContext(AuthContext);
-
-  return (
-    <nav className={styles.navbar_wrapper}>
-      <StyledNavLink exact path="/" text="About" />
-      <StyledNavLink exact path="/graph" text="Graph" />
-      {
-        auth === true ?
-          <StyledNavLink exact path="/logout" text="Logout" /> :
-          <StyledNavLink exact path="/login" text="Login" />
-      }
-    </nav>
-  )
-}
-
-export default Navbar

src/components/Navbar/index.tsx

@@ -0,0 +1,24 @@
+import React, { useContext } from "react";
+
+import styles from "./Navbar.module.css";
+
+import { AuthContext } from "../../App";
+import StyledNavLink from "../StyledNavLink/index";
+
+const Navbar = () => {
+  const auth = useContext(AuthContext);
+
+  return (
+    <nav className={styles.navbar_wrapper}>
+      <StyledNavLink path="/" text="About" />
+      <StyledNavLink path="/graph" text="Graph" />
+      {auth === true ? (
+        <StyledNavLink path="/logout" text="Logout" />
+      ) : (
+        <StyledNavLink path="/login" text="Login" />
+      )}
+    </nav>
+  );
+};
+
+export default Navbar;

src/components/StyledNavLink/index.jsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import { NavLink } from 'react-router-dom';
-
-import styles from "./StyledNavLink.module.css";
-
-/**
- * @param {{
- * path: string,
- * text: string,
- * activeClass: string,
- * inactiveClass: string
- * }}
- * @returns
- */
-const StyledNavLink = ({
-  path = "/",
-  text = "Go To",
-  activeClass = styles.active_link,
-  inactiveClass = styles.inactive_link
-}) => {
-
-  return (
-    <NavLink
-      to={path}
-      className={({ isActive }) => isActive ? activeClass : inactiveClass}
-    >
-      {text}
-    </NavLink>
-  )
-}
-
-export default StyledNavLink;

src/components/StyledNavLink/index.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+import styles from "./StyledNavLink.module.css";
+
+type StyledNavLinkProps = {
+  path: string;
+  text: string;
+  activeClass?: string;
+  inactiveClass?: string;
+}
+const StyledNavLink = ({
+  path = "/",
+  text = "Go To",
+  activeClass = styles.active_link,
+  inactiveClass = styles.inactive_link,
+}: StyledNavLinkProps): React.ReactNode => {
+  return (
+    <NavLink
+      to={path}
+      className={({ isActive }) => (isActive ? activeClass : inactiveClass)}
+    >
+      {text}
+    </NavLink>
+  );
+};
+
+export default StyledNavLink;

src/components/ToastNotification/index.jsx

@@ -1,17 +0,0 @@
-import { toast } from "react-toastify";
-
-export const showErrorToastNotification = (message) => {
-  toast.error(message || "Server Error");
-};
-
-export const showSuccessToastNotification = (message) => {
-  toast.success(message || "Success");
-};
-
-export const showWarnToastNotification = (message) => {
-  toast.warn(message || "Warning");
-};
-
-export const showInfoToastNotification = (message) => {
-  toast.info(message || "Info");
-};

src/components/ToastNotification/index.tsx

@@ -0,0 +1,17 @@
+import { toast, type ToastContent } from "react-toastify";
+
+export const showErrorToastNotification = (message: ToastContent) => {
+  toast.error(message || "Server Error");
+};
+
+export const showSuccessToastNotification = (message: ToastContent) => {
+  toast.success(message || "Success");
+};
+
+export const showWarnToastNotification = (message: ToastContent) => {
+  toast.warn(message || "Warning");
+};
+
+export const showInfoToastNotification = (message: ToastContent) => {
+  toast.info(message || "Info");
+};