[Dashboard] - Refactor dashboard and API integration (#29)

## Draft

- [x] Refactor code
- [ ] Fix #15 
- [ ] Add suggestion here ...

## Please describe the changes this PR makes and why it should be
merged:

- Only refactor and auth integration for now, there's still very long
way to go to fix #15 and better to merge the current work as it is now
and proceed with other thing like updating the doc, too many changes can
easily conflict with new PR

## Status and versioning classification:

- Code changes have been tested against the Discord API, or there are no
code changes
- I know how to update typings and have done so, or typings don't need
updating
- This PR changes the library's interface (methods or parameters added)

dashboard/.env.example

@@ -0,0 +1,4 @@
+# if you ever want to host it elsewhere separated from your bot
+
+NEXT_PUBLIC_API_URL=https://www.somedomain.com
+NEXT_PUBLIC_API_VERSION=v1

dashboard/package.json

@@ -7,18 +7,16 @@
     "lint": "npm i && next lint",
     "build": "npm i && next build",
     "start": "npm i && next start",
-    "export": "npm i && next export"
+    "export": "npm i && next export",
+    "build-and-start": "npm i && next build && next start"
   },
   "dependencies": {
     "@nextui-org/react": "1.0.0-beta.13",
-
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-
     "@mui/material": "^5.13.6",
     "@mui/icons-material": "^5.11.16",
-
-
+    "@tanstack/react-query": "^4.32.0",
     "next": "13.4.12",
     "axios": "^1.4.0",
     "react": "18.2.0",

dashboard/src/components/ProcessData.tsx

@@ -0,0 +1,21 @@
+import { useProcessData } from '@/hooks/useProcessData';
+import { IBaseApiResponse, IUseProcessDataOptions } from '@/interfaces/api';
+
+interface IProcessDataProps<T> extends IUseProcessDataOptions {
+    data: IBaseApiResponse<T> | undefined;
+    isLoading: boolean;
+    children: React.ReactNode;
+}
+
+export default function ProcessData<T>({
+    data,
+    isLoading,
+    children,
+    ...props
+}: IProcessDataProps<T>) {
+    const processData = useProcessData(data, isLoading, {
+        ...props,
+    });
+
+    return processData(children);
+}

dashboard/src/components/navbar.tsx

@@ -0,0 +1,65 @@
+import { Button, Link, Spacer } from '@nextui-org/react';
+import { useRouter } from 'next/router';
+
+export default function Navbar() {
+    const router = useRouter();
+
+    const pathIs = (path: string) => router.pathname === path;
+
+    return (
+        <div
+            style={{
+                height: '100%',
+                width: '250px',
+                minWidth: '250px',
+                backgroundColor: '#16181A',
+                display: 'flex',
+                alignItems: 'center',
+                flexDirection: 'column',
+                paddingTop: '50px',
+                position: 'sticky',
+                top: 0,
+            }}
+        >
+            <Link
+                css={{
+                    fontSize: '$xl2',
+                    fontWeight: 'bold',
+                    marginBottom: '30px',
+                    color: '#fff',
+                }}
+                onClick={() => router.push('/')}
+            >
+                Discord Music Bot
+            </Link>
+            <Button
+                css={{
+                    background: pathIs('/dashboard') ? '$primary' : '$gray100',
+                }}
+                onPress={() => router.push('/dashboard')}
+                style={{ marginBottom: '10px' }}
+            >
+                Dashboard
+            </Button>
+            <Button
+                css={{
+                    background: pathIs('/servers') ? '$primary' : '$gray100',
+                }}
+                color="default"
+                onPress={() => router.push('/servers')}
+                style={{ marginBottom: '10px' }}
+            >
+                Servers
+            </Button>
+            <Spacer />
+            <Button
+                color="error"
+                flat
+                onPress={() => router.push('/logout')}
+                style={{ marginBottom: '10px' }}
+            >
+                Logout
+            </Button>
+        </div>
+    );
+}