Feature/api integration

packages/dashboard/api/index.ts

@@ -27,11 +27,11 @@ class ApiSdk {
 			if (typeof window === 'undefined') {
 				const { cookies } = await import('next/headers');
 				config.headers['x-shx-api-key'] = cookies().get('apiKey')?.value;
-				config.baseURL = cookies().get('instanceUrl')?.value;
+
 			} else {
 				config.headers['x-shx-api-key'] = Cookies.get().apiKey ?? '';
-				config.baseURL = Cookies.get('instanceUrl') ?? '';
 			}
+			config.baseURL = process.env.NEXT_PUBLIC_INSTANCE_URL
 
 			return config;
 		});

packages/dashboard/api/notes.ts

@@ -6,24 +6,27 @@ export class Notes {
 	constructor(axios: Axios) {
 		this.axios = axios;
 	}
-	async getAllNotes(search?:string) {
-		const res = await this.axios.get('/gist',{params:{search}});
+	async getAllNotes(search?: string) {
+		const res = await this.axios.get('/gist', { params: { search } });
 		const data = res.data.data as INote[];
 		return data;
 	}
+	async getSingleNote(id: string, passkey = '') {
+		const res = await this.axios.get(`/gist/${id}`, {
+			params: passkey ? { passkey } : {},
+		});
+		const data = res.data.data as INote;
+		return data;
+	}
 	async uploadSingleNote(data: AddNoteType) {
-        console.log("uploading")
-        if(!data.passkey){
-            delete data.passkey
-        }
+		console.log('uploading');
+		if (!data.passkey) {
+			delete data.passkey;
+		}
 		const res = await this.axios.post('/gist', data);
 		return res.data.data as INote;
 	}
-	async deleteSingleNote({
-		noteID,
-	}: {
-		noteID: string;
-	}) {
+	async deleteSingleNote({ noteID }: { noteID: string }) {
 		const res = await this.axios.delete(`/gist/${noteID}`);
 		return res;
 	}

packages/dashboard/api/settings.ts

@@ -14,6 +14,12 @@ export class Settings {
 		const res = await this.axios.post('/settings', {key, value});
 		return res
 	}
+	async getInstanceInfo(){
+		const res = await this.axios.get('/info/sys');
+		delete res.data.data.cpuUsage
+		delete res.data.data.memoryUsage
+		return res.data.data as ISysSettings
+	}	
 }
 
 export default Settings;

packages/dashboard/app/(dashboard)/dashboard/error.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import React from 'react'
+
+function ErrorPage() {
+  return (
+    <div>ErrorPage</div>
+  )
+}
+
+export default ErrorPage

packages/dashboard/app/(dashboard)/dashboard/layout.tsx

@@ -1,23 +1,30 @@
 import { sidebarGroups } from '@/lib/sidebar';
+import { cookies } from 'next/headers';
 import Link from 'next/link';
-import React from 'react';
+import { redirect } from 'next/navigation';
 
 interface DashboardLayoutProps {
 	children: React.ReactNode;
 }
 
 const Layout = ({ children }: DashboardLayoutProps) => {
+	const cookieList = cookies();
+	const apiKey = cookieList.has('apiKey');
+	const masterKey = cookieList.has('masterKey');
+	if (!apiKey || !masterKey) redirect('/');
 	return (
 		<div className="flex h-screen">
 			<div className="sidebar w-full max-w-xs h-screen bg-black flex flex-col overflow-x-hidden overflow-y-auto">
 				{sidebarGroups.map((sidebarGrp, index) => {
 					return (
 						<div key={index} className="menu-group p-4">
-							<p className="title text-lg text-primary mb-2">{sidebarGrp.name}</p>
+							<p className="title text-lg text-primary mb-2">
+								{sidebarGrp.name}
+							</p>
 							{sidebarGrp.items.map((item, index) => {
 								return (
 									<Link
-                                        key={index}
+										key={index}
 										href={item.href}
 										className="p-2.5 block text-sm hover:bg-gray-900 w-full rounded-md"
 									>
@@ -29,7 +36,7 @@ const Layout = ({ children }: DashboardLayoutProps) => {
 					);
 				})}
 			</div>
-			<main className='w-full h-full overflow-y-auto p-5'>{children}</main>
+			<main className="w-full h-full overflow-y-auto p-5">{children}</main>
 		</div>
 	);
 };

packages/dashboard/app/(dashboard)/dashboard/page.tsx

@@ -1,9 +1,14 @@
+import Markdown from '@/components/Markdown';
+import axios from 'axios';
 import React from 'react';
 
-const Dashboard = () => {
+const Dashboard = async () => {
+	const { data } = await axios.get(
+		'https://raw.githubusercontent.com/BRAVO68WEB/shx/dev/README.md'
+	);
 	return (
 		<>
-			<h1 className="text-5xl">Dasbhboard</h1>
+			<Markdown markdown={data} />
 		</>
 	);
 };

packages/dashboard/app/(dashboard)/dashboard/utilities/download-config/page.tsx

@@ -1,37 +1,94 @@
+'use client';
+
 import Button from '@/components/ui/Button';
+import axios from 'axios';
+import Cookies from 'js-cookie';
 import { Download } from 'lucide-react';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { toast } from 'react-hot-toast';
 
 const configs = [
 	{
-		name: 'Lorem Ipsum Config',
+		name: 'Image Config',
+		filename: 'image.sxcu',
+		url: `${process.env.NEXT_PUBLIC_INSTANCE_URL}/config/image.sxcu?apikey=`,
 		id: '1',
 	},
 	{
-		name: 'Lorem Cnofig',
-		id: '12',
+		name: 'Gist Config',
+		filename: 'gist.sxcu',
+		url: `${process.env.NEXT_PUBLIC_INSTANCE_URL}/config/gist.sxcu?apikey=`,
+		id: '2',
 	},
 	{
-		name: 'Lorem Config Config',
-		id: '13',
+		name: 'URL Config',
+		filename: 'url.sxcu',
+		url: `${process.env.NEXT_PUBLIC_INSTANCE_URL}/config/url.sxcu?apikey=`,
+		id: '3',
 	},
 	{
-		name: 'Lorem ',
-		id: '14',
+		name: 'File Config',
+		filename: 'file.sxcu',
+		url: `${process.env.NEXT_PUBLIC_INSTANCE_URL}/config/file.sxcu?apikey=`,
+		id: '4',
 	},
 ];
-
+const downloadFile = ({
+	data,
+	fileName,
+	fileType,
+}: {
+	data: string;
+	fileName: string;
+	fileType: string;
+}) => {
+	// Create a blob with the data we want to download as a file
+	const blob = new Blob([data], { type: fileType });
+	// Create an anchor element and dispatch a click event on it
+	// to trigger a download
+	const a = document.createElement('a');
+	a.download = fileName;
+	a.href = window.URL.createObjectURL(blob);
+	const clickEvt = new MouseEvent('click', {
+		view: window,
+		bubbles: true,
+		cancelable: true,
+	});
+	a.dispatchEvent(clickEvt);
+	a.remove();
+};
 function Page() {
+	const [apiKey, setApiKey] = useState('');
+	useEffect(() => {
+		setApiKey(Cookies.get('apiKey') ?? '');
+	},[]);
+
+	async function onDownloadFile(url: string, filename: string) {
+		try {
+			const { data } = await axios.get(url);
+			console.log(data);
+			downloadFile({
+				data: JSON.stringify(data),
+				fileName: filename,
+				fileType: 'text/json',
+			});
+		} catch {
+			toast.error('Error downloading file');
+		}
+	}
 	return (
 		<>
-			{configs.map(({ name, id }) => {
+			{configs.map(({ name, id, url, filename }) => {
 				return (
 					<div
 						key={id}
 						className="w-full my-3 p-4 flex items-center justify-between bg-gray-900 rounded"
 					>
 						<p>{name}</p>
-						<Button size={'icon'} variant={'transparent'}>
+						<Button
+							size={'icon'}
+							onClick={() => onDownloadFile(`${url}${apiKey}`, filename)}
+						>
 							<Download />
 						</Button>
 					</div>

packages/dashboard/app/(dashboard)/dashboard/utilities/instance-info/page.tsx

@@ -1,13 +1,9 @@
+import api from '@/api';
 import React from 'react';
 
-function Page() {
-	const urls = [
-		{
-			id: 'afdas',
-			originalURL: 'https://www.google.com',
-			shortenedURL: 'https://www.google.com',
-		},
-	];
+async function Page() {
+	const res = await api.settings.getInstanceInfo();
+	const data = Object.entries(res);
 
 	return (
 		<div>
@@ -29,19 +25,13 @@ function Page() {
 					</tr>
 				</thead>
 				<tbody className="divide-y p-2">
-					{urls.map(({ originalURL, shortenedURL, id }) => (
+					{data.map((val, id) => (
 						<tr className="bg-gray-900 rounded" key={id}>
 							<td className="whitespace-nowrap py-5  pl-4 pr-20 text-sm font-medium text-white">
-								<div className="flex items-center gap-3">
-									{originalURL}
-
-								</div>
+								<div className="flex items-center gap-3">{val[0]}</div>
 							</td>
 							<td className="whitespace-nowrap  pl-4 text-sm font-medium text-white">
-								<div className="flex items-center gap-3">
-									{shortenedURL}
-
-								</div>
+								<div className="flex items-center gap-3">{val[1]}</div>
 							</td>
 						</tr>
 					))}

packages/dashboard/app/(dashboard)/dashboard/utilities/settings/page.tsx

@@ -2,7 +2,6 @@
 
 import React, { ChangeEventHandler, useEffect, useState } from 'react';
 import Button from '@/components/ui/Button';
-import Input from '@/components/ui/Input';
 import TagInput from '@/components/TagInput';
 import api from '@/api';
 import { toast } from 'react-hot-toast';
@@ -112,21 +111,16 @@ function Page() {
 					Save
 				</Button>
 			</div>
-			<div className="flex items-center w-full gap-4">
-				<Input
-					id="instance-url"
-					withLabel
-					label="Instance URL"
-					type="text"
-					className="w-full"
-				/>
-				<Button className="w-20 h-min ">Save</Button>
-			</div>
 			<div className="flex gap-4">
 				<TagInput
 					tags={settings.imageExtensions}
 					onAddTags={addImageExt}
 					placeholder="Image Extensions"
+					onChange={value =>
+						setSettings(old => {
+							return { ...old, imageExtensions: value };
+						})
+					}
 				/>
 
 				<Button
@@ -143,6 +137,11 @@ function Page() {
 					tags={settings.fileExtensions}
 					onAddTags={addFileExt}
 					placeholder="File Extensions"
+					onChange={value =>
+						setSettings(old => {
+							return { ...old, fileExtensions: value };
+						})
+					}
 				/>
 				<Button
 					onClick={() =>

packages/dashboard/app/globals.css

@@ -1,19 +1,31 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
 
-*{
-  margin:0;
-  padding:0;
-  box-sizing: border-box;
+:root {
+	--primary: #3a86ff;
+	--secondary: #8338ec;
 }
 
-:root{
-  --primary:#3A86FF;
-  --secondary:#8338EC;
+body {
+	color: white;
 }
 
-body{
-  color:white
+.markdown-body p:nth-child(3) {
+	display: flex;
+  gap: 10px;
+}
+.markdown-body p:nth-child(4) {
+	display: flex;
+  gap: 10px;
+}
+.markdown-body p:nth-child(5) {
+	display: flex;
+  gap: 10px;
 }
 
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;