feat: added user api' s

Co-Authored-By: Chris Saganic <chris@saganic.co.uk>
Co-Authored-By: Jorge A. <102924003+j0rgedev@users.noreply.github.com>

Author: 3 people

app/components/Dropdown.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { clear, user } = useUserSession();
+const { clear } = useUserSession();
 const colorMode = useColorMode();
 
 const isDarkMode = computed({

app/components/ProfileActions.vue

@@ -1,6 +1,36 @@
+<script setup lang="ts">
+const { loggedIn, session } = useUserSession();
+const createHabitModal = ref(false);
+defineProps<{ user: User }>();
+const isOwnProfile = computed(() => session.value.user?.login === useRoute().params.user);
+</script>
+
 <template>
   <div class="relative flex p-5">
-    <UserProfileInfo />
-    <ProfileActions />
+    <div class="flex flex-col gap-3">
+      <UAvatar size="3xl" :src="user?.avatarUrl" :alt="user?.login" />
+      <div class="flex flex-col gap-1">
+        <div class="text-xl font-medium">{{ user?.name }}</div>
+        <div class="text-xs text-white/40">{{ user?.bio }}</div>
+      </div>
+    </div>
+    <div v-if="isOwnProfile" class="absolute right-5 top-5 flex gap-3">
+      <button class="button bg-white/20 py-1.5 pl-2 pr-2.5 hover:bg-white/25" @click="createHabitModal = true">
+        <UIcon name="i-heroicons-plus-16-solid" class="h-5 w-5" />
+        Create
+      </button>
+      <Dropdown />
+    </div>
+    <div v-else-if="!loggedIn" class="absolute right-5 top-5 flex gap-3">
+      <a href="/api/auth/github" class="button bg-white/20 px-2 py-1.5 hover:bg-white/25">
+        <UIcon name="i-simple-icons-github" class="h-5 w-5" />
+        Sign in
+      </a>
+    </div>
+    <UModal
+      v-model="createHabitModal"
+      :ui="{ container: 'items-center', width: 'w-96', background: '', shadow: '', overlay: { base: 'backdrop-blur-2xl', background: 'bg-white/5 dark:bg-black/60' } }">
+      <HabitForm @habitAdded="createHabitModal = false" />
+    </UModal>
   </div>
 </template>

app/components/ProfileHeader.vue

@@ -1,22 +1,38 @@
 <script setup lang="ts">
 const router = useRoute();
 
+const { data: user } = useQuery({
+  key: ['user'],
+  query: () => useRequestFetch()(`/api/users/${router.params.user}`) as Promise<User>,
+});
+
 const { data: habits } = useQuery({
   key: ['habits'],
-  query: () => useRequestFetch()('/api/habits') as Promise<Habit[]>,
+  query: () => useRequestFetch()(`/api/users/${router.params.user}/habits`) as Promise<Habit[]>,
 });
 
 const emptyHabits = computed(() => habits.value?.length === 0);
 </script>
 
 <template>
-  <Card>
+  <Card v-if="user">
     <div class="relative z-10">
-      <ProfileHeader />
+      <ProfileHeader :user="user" />
       <div class="scrollable-card max-h-[calc(100vh-18.875rem)] overflow-y-auto">
         <HabitCard v-for="habit in habits" :key="habit.id" :habit="habit" />
       </div>
       <EmptyHabits v-if="emptyHabits" />
     </div>
   </Card>
+  <Card v-else class="items-start justify-center gap-7 p-6">
+    <div class="relative z-10 flex w-5/6 flex-col gap-5">
+      <div class="text-3xl font-semibold">404</div>
+      <p class="font-semibold">Sorry, this page isn't available.</p>
+      <p class="text-sm text-white/50">The link you followed may be broken, or the page may have been removed.</p>
+    </div>
+    <a href="/" class="button bg-white/20 px-2.5 py-2 hover:bg-white/30">
+      <UIcon name="i-heroicons-arrow-left-16-solid" class="h-5 w-5" />
+      Go back to Habit
+    </a>
+  </Card>
 </template>

app/components/UserProfileInfo.vue

@@ -0,0 +1,26 @@
+import { eq } from 'drizzle-orm';
+import { useValidatedParams, z } from 'h3-zod';
+
+export default eventHandler(async event => {
+  const { login } = await useValidatedParams(event, {
+    login: z.string().toLowerCase(),
+  });
+
+  const user = await useDB()
+    .select()
+    .from(tables.users)
+    .where(and(eq(tables.users.login, login), eq(tables.users.userView, true)))
+    .get();
+
+  if (!user) {
+    return [] as Habit[];
+  }
+
+  const habits = await useDB()
+    .select()
+    .from(tables.habits)
+    .where(and(eq(tables.habits.userId, user.id), eq(tables.habits.habitView, true)))
+    .all();
+
+  return habits as Habit[];
+});

app/pages/[user].vue

@@ -0,0 +1,16 @@
+import { eq } from 'drizzle-orm';
+import { useValidatedParams, z } from 'h3-zod';
+
+export default eventHandler(async event => {
+  const { login } = await useValidatedParams(event, {
+    login: z.string().toLowerCase(),
+  });
+
+  const user = await useDB()
+    .select()
+    .from(tables.users)
+    .where(and(eq(tables.users.login, login), eq(tables.users.userView, true)))
+    .get();
+
+  return user as User;
+});

pnpm-lock.yaml

@@ -0,0 +1,9 @@
+import { eq } from 'drizzle-orm';
+
+export default eventHandler(async event => {
+  const { user: requestUser } = await requireUserSession(event);
+
+  const user = await useDB().select().from(tables.users).where(eq(tables.habits.userId, requestUser.id)).limit(1).get();
+
+  return user;
+});