feat: empty state

Mokto · May 9, 2024 · 9cc74c4 · 9cc74c4
1 parent 7172763
commit 9cc74c4
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 27 deletions.
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
@@ -1,8 +1,14 @@
 import fs from 'fs';
-import { prepareDatabase } from '$lib/utils/db';
+import { prepareDatabase, resetDatabase } from '$lib/utils/db';
 
 console.log('Running init script...');
-const data = fs.readFileSync('./openapi.json', 'utf-8');
-prepareDatabase(data).then(() => {
-	console.log('Done.');
-});
+const exists = fs.existsSync('./openapi.json');
+if (exists) {
+	const data = fs.readFileSync('./openapi.json', 'utf-8');
+	prepareDatabase(data).then(() => {
+		console.log('Done.');
+	});
+} else {
+	console.warn('openapi.json not found.');
+	resetDatabase();
+}
diff --git a/src/lib/utils/db.ts b/src/lib/utils/db.ts
@@ -5,27 +5,34 @@ import fs from 'fs';
 
 const dbLocation = 'openapi.db';
 
-export const prepareDatabase = async (jsonFile: string) => {
+export const resetDatabase = () => {
 	if (fs.existsSync(dbLocation)) {
 		fs.unlinkSync(dbLocation);
 	}
 	const db = new Database(dbLocation);
-	const data = await parseOpenAPI(JSON.parse(jsonFile));
+
 	db.exec(`CREATE TABLE GlobalData ( data JSON NOT NULL ) RANDOM ROWID`);
 	db.exec(
-		`INSERT INTO GlobalData (data) VALUES ('${JSON.stringify(data.global).replace(/'/g, "''")}')`
+		`CREATE TABLE Operations ( operation_id TEXT NOT NULL, data JSON NOT NULL ) RANDOM ROWID`
 	);
+	db.exec(`CREATE TABLE Webhooks ( webhook_id TEXT NOT NULL, data JSON NOT NULL ) RANDOM ROWID`);
+
+	return db;
+};
 
+export const prepareDatabase = async (jsonFile: string) => {
+	const db = resetDatabase();
+	const data = await parseOpenAPI(JSON.parse(jsonFile));
 	db.exec(
-		`CREATE TABLE Operations ( operation_id TEXT NOT NULL, data JSON NOT NULL ) RANDOM ROWID`
+		`INSERT INTO GlobalData (data) VALUES ('${JSON.stringify(data.global).replace(/'/g, "''")}')`
 	);
+
 	Object.keys(data.operations).forEach((operationId) => {
 		db.exec(
 			`INSERT INTO Operations (operation_id, data) VALUES ('${operationId}', '${JSON.stringify(data.operations[operationId]).replace(/'/g, "''")}')`
 		);
 	});
 
-	db.exec(`CREATE TABLE Webhooks ( webhook_id TEXT NOT NULL, data JSON NOT NULL ) RANDOM ROWID`);
 	Object.keys(data.webhooks).forEach((webhookId) => {
 		db.exec(
 			`INSERT INTO Webhooks (webhook_id, data) VALUES ('${webhookId}', '${JSON.stringify(data.webhooks[webhookId]).replace(/'/g, "''")}')`
@@ -35,6 +42,10 @@ export const prepareDatabase = async (jsonFile: string) => {
 export const getGlobalData = async () => {
 	const db = new Database(dbLocation);
 	const result = db.prepare(`SELECT data FROM GlobalData `).get() as { data: string };
+	if (!result) {
+		return null;
+	}
+
 	return JSON.parse(result.data) as GlobalData;
 };
 

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
 	import Menu from '$lib/components/menu/menu.svelte';
-	import MenuGroup from '$lib/components/menu/menu-group.svelte';
-	import MenuItem from '$lib/components/menu/menu-item.svelte';
 	import '$lib';
 	import '@fontsource-variable/rethink-sans';
 	import '@fontsource-variable/source-code-pro';
@@ -27,20 +25,25 @@
 	{/if}
 </svelte:head>
 
-<div class="h-16 bg-apihero-200 fixed inset-x-0 sm:hidden">
-	<div class="px-4">
-		<select class="bg-apihero-200 h-16 w-full" on:change={(e) => goto(e.target?.value)}>
-			{#each data.menu as menuGroup}
-				<optgroup label={menuGroup.title}>
-					{#each menuGroup.items as menuItem}
-						<option value={menuItem.link}>{menuItem.label}</option>
-					{/each}
-				</optgroup>
-			{/each}
-		</select>
+{#if data?.menu}
+	<div class="h-16 bg-apihero-200 fixed inset-x-0 sm:hidden">
+		<div class="px-4">
+			<select class="bg-apihero-200 h-16 w-full" on:change={(e) => goto(e.target?.value)}>
+				{#each data.menu as menuGroup}
+					<optgroup label={menuGroup.title}>
+						{#each menuGroup.items as menuItem}
+							<option value={menuItem.link}>{menuItem.label}</option>
+						{/each}
+					</optgroup>
+				{/each}
+			</select>
+		</div>
 	</div>
-</div>
 
-<Menu logo={data.logo} menu={data.menu}>
-	<slot />
-</Menu>
+	<Menu logo={data.logo} menu={data.menu}>
+		<slot />
+	</Menu>
+{:else}
+	You haven't uploaded a documentation menu yet. Please refer to the documentation to learn how to
+	do so.
+{/if}