Adds type definitions and style varibales

.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev",
+      "serverReadyAction": {
+        "pattern": "- Local:.+(https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}

src/components/atoms/AuthButton/index.tsx

@@ -2,7 +2,7 @@ import Image from "next/image";
 import styles from "./styles.module.sass";
 import AUTH_PROVIDERS from "@constants/AuthProviders";
 
-function AuthButton(props: any) {
+function AuthButton(props: Props) {
   const { text, providername } = props;
 
   const getButtonClass = () => {
@@ -30,4 +30,10 @@ function AuthButton(props: any) {
   )
 }
 
+type Props = {
+  text: string,
+  providername: string,
+  onClick: () => void
+}
+
 export default AuthButton;

src/components/atoms/AuthButton/styles.module.sass

@@ -1,14 +1,16 @@
+@import "@styles/variables.module.sass"
+
 .auth_button
-  background: #fff
+  background: $secondary-surface-color
   border: none
   width: 100%
   padding: 8px
   display: flex
   align-items: center
   justify-content: center
-  border: 1px solid #e4e4e4a0
+  border: 1px solid $border-color
   cursor: pointer
-  border-radius: 5px
+  border-radius: $border-radius
   margin: 10px 0px
   transition: opacity 0.5s
   .icon
@@ -22,7 +24,7 @@
 
 .auth_button_github
   @extend .auth_button
-  background: #292929
-  color: #fff
+  background: $github-primary-color
+  color: $font-color-light
   &:hover
     opacity: 0.8

src/components/atoms/CustomAvatar/index.tsx

@@ -2,7 +2,7 @@ import { Avatar } from "antd";
 import styles from "./styles.module.sass";
 import Image from "next/image";
 
-function CustomAvatar({ size = 'large', image, mainText, subText }: any) {
+function CustomAvatar({ size = 'large', image, mainText, subText }: Props) {
 
   const renderLabels = () => {
     if (!mainText && !subText) return;
@@ -26,4 +26,11 @@ function CustomAvatar({ size = 'large', image, mainText, subText }: any) {
   )
 }
 
+type Props = {
+  size?: 'large' | 'small' | 'default' | number,
+  image: string,
+  mainText: string,
+  subText: string
+}
+
 export default CustomAvatar;

src/components/molecules/AuthCard/index.tsx

@@ -9,8 +9,7 @@ import AuthButton from "@components/atoms/AuthButton";
 import styles from './styles.module.sass';
 
 function AuthCard() {
-  const CARD_WIDTH = 670;
-  const CARD_HEIGHT = 160;
+  const CARD_WIDTH = 678;
 
   const { data: session } = useSession();
   const router = useRouter()

src/components/molecules/IconCard/index.tsx

@@ -1,22 +1,30 @@
 import Image from "next/image";
 import styles from "./styles.module.sass";
-import CustomCard from "@components/atoms/CustomCard";
-import Link from "next/link";
+import { Card, Flex } from "antd";
 
-function IconCard({ text, iconPath, iconSize, url }: any) {
+function IconCard({ text, iconPath, iconSize, url }: Props) {
   return (
-    <a href={url} target={"_blank"} >
-      <CustomCard>
-        <Image
-          src={iconPath}
-          alt={iconPath}
-          width={iconSize}
-          height={iconSize}
-        />
-        <label className={styles.icon_card_text}>{text}</label>
-      </CustomCard>
+    <a href={url} target={"_blank"}>
+      <Card style={{ width: 120, margin: 10 }}>
+        <Flex vertical={true} align="center">
+          <Image
+            src={iconPath}
+            alt={iconPath}
+            width={iconSize}
+            height={iconSize}
+          />
+          <label className={styles.icon_card_text}>{text}</label>
+        </Flex>
+      </Card>
     </a>
   )
 }
 
+type Props = {
+  text: string,
+  iconPath: string,
+  iconSize: number,
+  url: string
+}
+
 export default IconCard;

src/components/molecules/IconCard/styles.module.sass

@@ -1,5 +1,8 @@
+@import "@styles/variables.module.sass"
+
 .icon_card_text
     font-size: 13px
     margin-top: 12px
     font-weight: 500
-    color: #000 // TODO :: Use variables
+    cursor: pointer
+    color: $font-color-dark

src/components/pages/Dashboard/index.tsx

@@ -17,7 +17,7 @@ export default function Dashboard() {
   const [form] = Form.useForm();
   const [isBusy, setIsBusy] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
-  const [todos, setTodos] = useState([]);
+  const [todos, setTodos] = useState<Todo[]>([]);
   const [isAddTodoModalOpen, setIsAddTodoModalOpen] = useState(false);
 
   useEffect(() => {
@@ -29,16 +29,11 @@ export default function Dashboard() {
 
     try {
       const response = await TodoService.getAllTodos();
-
-      // TODO :: Handle errors based on response status
-      const todos = await response.json();
-
+      const todos: Todo = await response.json();
       setTodos(Array.isArray(todos) ? todos : []);
-
+      setIsLoading(false);
     } catch (error) {
       console.error(error);
-    } finally {
-      setIsLoading(false);
     }
   };
 
@@ -96,7 +91,7 @@ export default function Dashboard() {
           itemLayout="horizontal"
           loadMore={null}
           dataSource={todos}
-          renderItem={(todo, index) => (
+          renderItem={(todo: Todo) => (
             <List.Item actions={[<Button type="link" danger key="list-delet" onClick={() => deleteTodo(todo._id)}><DeleteOutlined /></Button>]}>
               <Skeleton title={false} loading={isLoading} active>
                 <List.Item.Meta

src/components/pages/Dashboard/styles.module.sass

@@ -1,6 +1,5 @@
 .container
     height: calc(100vh - 25px)
-    background: #F9F9F9
     display: flex
     flex-direction: column
     align-items: center

src/components/pages/Home/styles.module.sass

@@ -1,6 +1,5 @@
 .container
     height: calc(100vh - 25px)
-    background: #F9F9F9
     display: flex
     flex-direction: column
     align-items: center

src/layouts/MainLayout.tsx

@@ -4,7 +4,7 @@ import { Inter } from "next/font/google";
 import { getServerSession } from "next-auth";
 import AuthSessionProvider from "@providers/AuthSessionProvider";
 import AntdConfigProvider from "@providers/AntdConfigProvider";
-import "@styles/globals.css";
+import "@styles/globals.sass";
 
 const inter = Inter({ subsets: ["latin"] });
 

src/middleware.ts

@@ -9,13 +9,15 @@ export async function middleware(request: NextRequest) {
   const isProtectedRoute = PROTECTED_ROUTES.some((route: string) => request.nextUrl?.pathname?.startsWith(route));
 
   if (isProtectedApiRoute) {
-    if (!isAuthenticated(request)) {
+    const isAuth = await isAuthenticated(request);
+    if (!isAuth) {
       return Response.json({ success: false, message: "Authentication failed" }, { status: 401 });
     }
   }
 
   if (isProtectedRoute) {
-    if (!isAuthenticated(request)) {
+    const isAuth = await isAuthenticated(request);
+    if (!isAuth) {
       return NextResponse.redirect(new URL("/", request.url));
     }
   }
@@ -24,6 +26,6 @@ export async function middleware(request: NextRequest) {
 }
 
 const isAuthenticated = async (request: NextRequest) => {
-  const token = await getToken({ req: request });
+  const token: any = await getToken({ req: request });
   return !!token && Date.now() <= token.exp * 1000;
 };

src/providers/AntdConfigProvider.tsx

@@ -1,9 +1,10 @@
-import { ConfigProvider, theme } from "antd";
+import { ConfigProvider } from "antd";
+import Colors from "@styles/variables.module.sass";
 
-const AntdConfigProvider = ({ children, session }: any) => {
+const AntdConfigProvider = ({ children }: Props) => {
   const THEME = {
     token: {
-      colorPrimary: '#292929', // TODO :: Store colors in constants
+      colorPrimary: Colors.primaryColor,
     },
   }
 
@@ -14,4 +15,8 @@ const AntdConfigProvider = ({ children, session }: any) => {
   )
 }
 
+type Props = {
+  children: React.ReactNode,
+}
+
 export default AntdConfigProvider;

src/providers/AuthSessionProvider.tsx

@@ -1,11 +1,18 @@
 'use client';
 
+import React from "react";
 import { SessionProvider } from "next-auth/react";
+import { Session } from "next-auth";
 
-const AuthSessionProvider = ({ children, session }: any) => (
+const AuthSessionProvider = ({ children, session }: Props) => (
   <SessionProvider session={session}>
     {children}
   </SessionProvider>
 )
 
+type Props = {
+  children: React.ReactNode,
+  session: Session | null
+}
+
 export default AuthSessionProvider;

src/services/TodoService.ts

@@ -1,5 +1,3 @@
-// TODO :: Handle typing
-
 const createTodo = async (todoTitle: string, todoDescription: string) => {
   return await fetch("/api/todo", {
     method: "POST",

src/styles/globals.sass

@@ -0,0 +1,4 @@
+@import "@styles/variables.module.sass"
+
+body
+    background: $primary-surface-color

src/styles/variables.module.sass

@@ -0,0 +1,15 @@
+// ------ Colors ------
+$primary-surface-color: #F9F9F9
+$secondary-surface-color: #FFF
+$primary-color: #292929
+$font-color-light: #FFF
+$font-color-dark: #292929
+$border-color: #e4e4e4a0
+$github-primary-color: #292929
+
+// ------ Sizes ------
+$border-radius: 0.3rem
+
+// ------ Exports ------
+:export
+  primaryColor: $primary-color

src/types/global.d.ts

@@ -0,0 +1,18 @@
+/**
+ *
+ * Define all global types in this file.
+ *
+ */
+
+type User = {
+  email: string;
+  image: string;
+  username: string;
+};
+
+type Todo = {
+  _id: string;
+  todoTitle: string;
+  todoDescription: string;
+  creator: User;
+};