feat: add tabs (#30)

autonomy-local · Jun 1, 2024 · 201fd92 · 201fd92
1 parent b0ae547
commit 201fd92
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 31 deletions.
diff --git a/app/src/pages/account/addAccount.tsx b/app/src/pages/account/addAccount.tsx
@@ -1,19 +1,37 @@
-import { Account } from "../../schema/account";
-const AddAccount = () => {
-	// tailwindcssのクラス名
-	// solidjsではclassではなくclassNameを使う
+import type { Account } from "../../schema/account";
+import type { User } from "../../service/auth";
+import { addNewDocument, firestore } from "../../service/firestore";
+import { getCurrentUser } from "../../service/auth";
+import { createSignal, createEffect } from "solid-js";
 
-	// テナントアカウントの追加フォーム
-	// baseAccountObjのプロパティを入力するフォーム
+const AddAccount = () => {
+	const [user, setUser] = createSignal<User | null>(null);
 
-	// ログインユーザーのアカウント情報から取得する
-	// id uid
-	// email
-	// name
-	// createdAt
-	// updatedAt
+	createEffect(async () => {
+		const currentUser = await getCurrentUser();
+		if (currentUser) {
+			setUser(currentUser);
+		}
+	});
 
-	// テナントアカウントの追加フォーム
+	const registerAccount = async () => {
+		const name = document.getElementById("name") as HTMLInputElement;
+		const email = document.getElementById("email") as HTMLInputElement;
+		const role = document.getElementById("role") as HTMLSelectElement;
+		const userId = user()?.uid;
+		const newAccount = {
+			id: userId,
+			name: name.value,
+			email: email.value,
+			role: role.value as Account["role"],
+		};
+		const error = await addNewDocument(firestore, "accounts", newAccount);
+		if (error) {
+			console.error(error);
+		} else {
+			window.location.href = "/dashboard";
+		}
+	};
 	return (
 		<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
 			<div class="px-4 py-6 sm:px-0">
@@ -68,12 +86,19 @@ const AddAccount = () => {
 								<button
 									class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
 									type="button"
+									onClick={() => registerAccount()}
 								>
 									Register Account
 								</button>
 								<button
 									class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
 									type="reset"
+									onClick={() => {
+										const name = document.getElementById("name") as HTMLInputElement;
+										const email = document.getElementById("email") as HTMLInputElement;
+										name.value = "";
+										email.value = "";
+									}}
 								>
 									Reset
 								</button>

diff --git a/app/src/pages/dashboard.tsx b/app/src/pages/dashboard.tsx
@@ -1,9 +1,15 @@
+import { createSignal, createEffect,Show } from "solid-js";
 import { getCurrentUser } from "../service/auth";
 import { getDocumentsWithQuery, firestore }from "../service/firestore";
 import type { QueryObj } from "../service/firestore";
 import type { DocumentData } from "firebase/firestore";
 
 const Dashboard = () => {
+	const [accountInfo, setAccountInfo] = createSignal<DocumentData | null>(null);
+	createEffect(async () => {
+		const info = await getAccountInfo();
+		setAccountInfo(info);
+	});
 	return (
 		<div class="bg-gray-100 h-screen">
 			<header class="bg-white shadow">
@@ -15,7 +21,7 @@ const Dashboard = () => {
 						<div class="ml-4 flex items-center md:ml-6">
 							<select class="block appearance-none bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
 								<option>🏘️Tenant Info</option>
-								<option>🪪Account Info</option>
+								<option selected>🪪Account Info</option>
 								<option>🛫Product Info</option>
 								<option>⚙️Settings</option>
 							</select>
@@ -28,19 +34,47 @@ const Dashboard = () => {
 			</header>
 			<div class="max-w-7xl mx-auto my-2 py-6 sm:px-6 lg:px-8">
 				<div class="px-4 py-6 sm:px-0">
-					<div class="border-4 border-dashed border-gray-200 rounded-lg h-96">
-						<div class="flex flex-col items-center justify-center h-full">
-							<h2 class="text-2xl font-bold text-gray-900">
-								Welcome to your dashboard!
-							</h2>
-							<a
-								href="/tenant/add"
-								class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mx-2 my-2 rounded"
-							>
-								Register Tenant
-							</a>
+					{/* tabs */}
+					<div class="flex items-center">
+						<div class="bg-white rounded-lg h-16 w-1/4 mx-2">
+							<button type="button" class="w-full h-full text-lg font-bold text-gray-700">
+								🎛️Account Settings
+							</button>
+						</div>
+						<div class="bg-white rounded-lg h-16 w-1/4">
+							<button type="button" class="w-full h-full text-lg font-bold text-gray-700">
+								🧾Account Logs
+							</button>
 						</div>
 					</div>
+					<div class="border-4 border-dashed border-gray-200 rounded-lg h-96">
+						<Show when={accountInfo()}>
+							<div class="flex flex-col items-center justify-center h-full">
+								<h2 class="text-2xl font-bold text-gray-900">
+									Welcome back, {accountInfo()?.name}!
+								</h2>
+								<p class="text-lg text-gray-700">
+									Your email address is {accountInfo()?.email}.
+								</p>
+								<p class="text-lg text-gray-700">
+									Your role is {accountInfo()?.role}.
+								</p>
+							</div>
+						</Show>
+						<Show when={!accountInfo()}>
+							<div class="flex flex-col items-center justify-center h-full">
+								<h2 class="text-2xl font-bold text-gray-900">
+									Welcome to your dashboard!
+								</h2>
+								<a
+									href="account/add"
+									class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 mx-2 my-2 rounded"
+								>
+									Register Tenant
+								</a>
+							</div>
+						</Show>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -54,7 +88,7 @@ async function getAccountInfo(): Promise<DocumentData | null> {
 	const uid = user?.uid;
 	const collectionName = "accounts";
 	const queryObj: QueryObj = {
-		field: "uid",
+		field: "id",
 		operator: "==",
 		value: uid,
 	};

diff --git a/app/src/service/auth.ts b/app/src/service/auth.ts
@@ -1,11 +1,8 @@
-import {
-	getAuth,
-	signInWithEmailAndPassword,
-	signOut,
-	onAuthStateChanged,
+import type {
 	UserCredential,
 	User,
 } from "firebase/auth";
+import { getAuth, signInWithEmailAndPassword, onAuthStateChanged, } from "firebase/auth";
 import { firebaseApp } from "./firebase";
 
 /* 
@@ -14,6 +11,7 @@ import { firebaseApp } from "./firebase";
 */
 
 const auth = getAuth(firebaseApp);
+export type { UserCredential, User };
 
 // Sign in with email and password
 export async function signIn(