From 662d0b279d6ddc7a260e353cc2cad206d350d806 Mon Sep 17 00:00:00 2001
From: amandesai01 <amandesai01@gmail.com>
Date: Fri, 6 Sep 2024 22:18:24 +0530
Subject: [PATCH] chore(refactor): update dataflow for postings

---
 app/components/admin/Posting/Form.vue |   0
 app/composables/postings.ts           |  69 +++++++++++++++
 app/composables/repositories.ts       |   5 +-
 app/pages/admin/applications.vue      |   7 +-
 app/pages/admin/postings/edit.vue     | 117 ++++++--------------------
 app/pages/admin/postings/index.vue    |  11 +--
 app/pages/admin/postings/new.vue      | 114 +++++++++++++++++++++++++
 server/api/posting/index.get.ts       |  45 +++-------
 server/api/postings/index.get.ts      |  43 +++++++---
 server/api/postings/lite.get.ts       |  19 +++++
 shared/schemas/posting.ts             |   4 +
 11 files changed, 292 insertions(+), 142 deletions(-)
 create mode 100644 app/components/admin/Posting/Form.vue
 create mode 100644 app/composables/postings.ts
 create mode 100644 app/pages/admin/postings/new.vue
 create mode 100644 server/api/postings/lite.get.ts

diff --git a/app/components/admin/Posting/Form.vue b/app/components/admin/Posting/Form.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/app/composables/postings.ts b/app/composables/postings.ts
new file mode 100644
index 00000000..f6a2451d
--- /dev/null
+++ b/app/composables/postings.ts
@@ -0,0 +1,69 @@
+import type { z } from 'zod';
+import type { JobPosting } from '~~/server/db/schema';
+import type {
+  createJobPostingSchema,
+  deleteJobPostingSchema,
+  fetchJobPostingFilterSchema,
+  updateJobPostingSchema,
+} from '~~/shared/schemas/posting';
+
+export type PostingLite = { id: string; title: string };
+export type PostingsLite = PostingLite[];
+export function usePostingsLiteRepository(
+  options: { immediate?: boolean } = { immediate: true }
+) {
+  return useObjectRepository<
+    PostingsLite,
+    never,
+    never,
+    never,
+    never,
+    never,
+    never
+  >({
+    key: 'postings-lite',
+    fetchURL: '/api/postings/lite',
+    initFn: () => [],
+    immediate: options.immediate,
+  });
+}
+
+export type Postings = JobPosting[];
+export function usePostingsRepository() {
+  return useObjectRepository<
+    Postings,
+    never,
+    never,
+    never,
+    never,
+    never,
+    never
+  >({
+    key: 'postings',
+    fetchURL: '/api/postings',
+    initFn: () => [],
+  });
+}
+
+export type CreatePostingSchema = z.infer<typeof createJobPostingSchema>;
+export type UpdatePostingSchema = z.infer<typeof updateJobPostingSchema>;
+export type FetchPostingSchema = z.infer<typeof fetchJobPostingFilterSchema>;
+export type DeletePostingSchema = z.infer<typeof deleteJobPostingSchema>;
+export function usePostingRepository(query: FetchPostingSchema) {
+  return useObjectRepository<
+    JobPosting,
+    FetchPostingSchema,
+    UpdatePostingSchema,
+    never,
+    CreatePostingSchema,
+    never,
+    DeletePostingSchema
+  >({
+    key: `${query.id}-posting`,
+    fetchURL: '/api/posting',
+    fetchQuery: query,
+    postURL: '/api/posting',
+    updateURL: '/api/posting',
+    deleteURL: '/api/posting',
+  });
+}
diff --git a/app/composables/repositories.ts b/app/composables/repositories.ts
index 33bf9997..8175c795 100644
--- a/app/composables/repositories.ts
+++ b/app/composables/repositories.ts
@@ -47,6 +47,7 @@ export type LookupRepositoryOptions<T, FQ extends RecordAny = RecordAny> = {
   updateURL?: string;
   deleteURL?: string;
   initFn?: () => T;
+  immediate?: boolean;
 };
 
 /**
@@ -68,6 +69,8 @@ export async function useObjectRepository<
 >(
   options: LookupRepositoryOptions<T, FQ>
 ): Promise<LookupRepository<T, UB, UQ, PB, PQ, DQ>> {
+  const immediate =
+    typeof options.immediate === 'undefined' ? true : options.immediate;
   const { data, setData, firstFetched, fetching, changing } = useObjectState(
     options.key,
     options.initFn
@@ -91,7 +94,7 @@ export async function useObjectRepository<
     setFetchData();
   };
 
-  if (!firstFetched.value) {
+  if (!firstFetched.value && immediate) {
     firstFetched.value = true;
     await fetchExecute();
     setFetchData();
diff --git a/app/pages/admin/applications.vue b/app/pages/admin/applications.vue
index 693bcc04..7f52f1a0 100644
--- a/app/pages/admin/applications.vue
+++ b/app/pages/admin/applications.vue
@@ -16,8 +16,11 @@ const selectedPostings = ref<string[]>([]);
 const postingsById = ref<Record<string, string>>({}); // id <> title;
 
 const { applicants, applications, fetch: fetchApplicants } = useApplications();
-const { data: postings } =
-  useFetch<{ id: string; title: string }[]>('/api/postings');
+const { data: postings, refresh } = await usePostingsLiteRepository({
+  immediate: false,
+});
+
+onMounted(refresh);
 
 if (postingIdsQuery) {
   try {
diff --git a/app/pages/admin/postings/edit.vue b/app/pages/admin/postings/edit.vue
index b0aec95e..9e806edf 100644
--- a/app/pages/admin/postings/edit.vue
+++ b/app/pages/admin/postings/edit.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import {
-  createJobPostingSchema,
-  updateJobPostingSchema,
-} from '~~/shared/schemas/posting';
-import type { JobPosting } from '~~/server/db/schema';
+import { updateJobPostingSchema } from '~~/shared/schemas/posting';
 
 definePageMeta({
   layout: 'admin',
@@ -12,37 +8,25 @@ definePageMeta({
 
 const route = useRoute();
 
-const postingId = route.query.id as string | undefined;
-
-const isUpdating = !!postingId;
+if (!route.query.id) {
+  await navigateTo('/admin/postings/new');
+}
 
-// @ts-expect-error
-let posting: JobPosting = null;
+const { refresh } = await usePostingsRepository();
 
-if (isUpdating) {
-  posting = (
-    await useRequestFetch()('/api/posting', { query: { id: postingId } })
-  )[0] as unknown as JobPosting;
-  if (!posting) {
-    throw createError({
-      statusCode: 404,
-      message: 'Job Posting Not Found',
-    });
-  }
-}
+const q = { id: route.query.id as string };
+const { data, updateData, deleteData, changing } =
+  await usePostingRepository(q);
 
 useHead({
-  title: `${isUpdating ? 'Edit - ' : 'New Posting'} ${(isUpdating && posting.title) || ''}`,
+  title: `Edit - ${data.value.title}`,
 });
 
-const formSchema = toTypedSchema(
-  isUpdating ? updateJobPostingSchema : createJobPostingSchema
-);
-const { handleSubmit, errors, defineField, errorBag } = useForm({
+const formSchema = toTypedSchema(updateJobPostingSchema);
+const { handleSubmit, errors, defineField } = useForm({
   validationSchema: formSchema,
 });
 
-// @ts-expect-error
 const [id] = defineField('id');
 
 const [title] = defineField('title');
@@ -50,57 +34,22 @@ const [contents] = defineField('contents');
 const [tagsCSV] = defineField('tagsCSV');
 const [isPublished] = defineField('isPublished');
 
-if (isUpdating && posting) {
-  id.value = posting.id;
-  title.value = posting.title;
-  contents.value = posting.contents || undefined;
-  tagsCSV.value = posting.tagsCSV || undefined;
-  isPublished.value = posting.isPublished;
-} else {
-  isPublished.value = false;
-}
-
-const isSubmitting = ref(false);
+id.value = data.value.id;
+title.value = data.value.title;
+contents.value = data.value.contents || undefined;
+tagsCSV.value = data.value.tagsCSV || undefined;
+isPublished.value = data.value.isPublished;
 
 const onSubmit = handleSubmit(async (values) => {
-  try {
-    isSubmitting.value = true;
-    await $fetch('/api/posting', {
-      method: isUpdating ? 'PUT' : 'POST',
-      body: {
-        ...values,
-      },
-    });
-    await navigateTo('/admin/postings');
-  } catch (e) {
-    console.error(e);
-  } finally {
-    isSubmitting.value = false;
-  }
+  await updateData(values);
+  refresh();
+  await navigateTo('/admin/postings');
 });
 
-const isDeleting = ref(false);
 const onDelete = async () => {
-  if (!isUpdating) {
-    return;
-  }
-  try {
-    if (errorBag.value) {
-      console.log(errorBag.value);
-    }
-    isDeleting.value = true;
-    await $fetch('/api/posting', {
-      method: 'DELETE',
-      query: {
-        id: postingId,
-      },
-    });
-    await navigateTo('/admin/postings');
-  } catch (e) {
-    console.error(e);
-  } finally {
-    isDeleting.value = false;
-  }
+  await deleteData(q);
+  refresh();
+  await navigateTo('/admin/postings');
 };
 </script>
 
@@ -118,7 +67,8 @@ const onDelete = async () => {
           <Icon
             class="w-5 h-5 shrink-0 fill-current mr-2"
             name="iconamoon:edit"
-          />{{ isUpdating ? posting.title : 'New Posting' }}
+          />
+          {{ data.title }}
         </h2>
       </div>
       <!-- Right: Actions -->
@@ -127,29 +77,18 @@ const onDelete = async () => {
           title="Delete Posting?"
           content="You won't be able to undo this action. You will loose access to applicant list."
           @confirm="onDelete"
-          v-if="isUpdating"
         >
           <template #input="{ open }">
             <InputButton
               variant="destructive"
               size="icon"
               @click="open"
-              :disabled="isSubmitting"
+              :disabled="changing"
             >
               <Icon name="material-symbols:delete-outline" class="h-4 w-4" />
             </InputButton>
           </template>
         </AbstractConfirmationBox>
-        <!-- <div class="flex space-x-1 items-center border bg-zinc-100 p-2 rounded-xl">
-          <span class="text-sm">Publish?</span>
-          <div class="form-switch">
-            <input type="checkbox" id="toggle1" name="toggle1" class="sr-only" v-model="isPublished" :disabled="isSubmitting">
-            <label class="bg-zinc-400" for="toggle1">
-              <span class="bg-white shadow-sm" aria-hidden="true"></span>
-              <span class="sr-only">Publish/Draft</span>
-            </label>
-          </div>
-        </div> -->
         <InputSwitch label="Publish?" v-model="isPublished" />
         <AbstractConfirmationBox
           title="Save Posting?"
@@ -157,7 +96,7 @@ const onDelete = async () => {
           @confirm="onSubmit"
         >
           <template #input="{ open }">
-            <InputButton :disabled="isSubmitting" @click="open">
+            <InputButton :disabled="changing" @click="open">
               <div class="flex spece-x-2 items-center">
                 <Icon name="lets-icons:save" class="w-3 h-3 mr-1" />
                 <span>Save</span>
@@ -174,7 +113,7 @@ const onDelete = async () => {
           <InputText
             placeholder="Senior Software Engineer"
             label="Title"
-            :disabled="isSubmitting"
+            :disabled="changing"
             :error="errors.title"
             v-model="title"
           />
@@ -182,7 +121,7 @@ const onDelete = async () => {
             class="mt-4"
             placeholder="Remote, Full Time, San Fransisco"
             label="Tags (CSV)"
-            :disabled="isSubmitting"
+            :disabled="changing"
             v-model="tagsCSV"
           />
           <div class="mt-4">
diff --git a/app/pages/admin/postings/index.vue b/app/pages/admin/postings/index.vue
index bcd436a8..7439db50 100644
--- a/app/pages/admin/postings/index.vue
+++ b/app/pages/admin/postings/index.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import type { JobPosting } from '~~/server/db/schema';
-
 definePageMeta({
   layout: 'admin',
   middleware: 'admin-auth',
@@ -10,22 +8,19 @@ useHead({
   title: 'Postings | Admin Panel',
 });
 
-const postings = await useFetch<JobPosting[]>('/api/posting');
+const { data: postings } = await usePostingsRepository();
 </script>
 
 <template>
   <div class="w-full max-w-9xl mx-auto">
-    <!-- Page header -->
     <AdminPostingsHeader />
-
     <div class="mt-4">
-      <div class="max-w-2xl mx-auto mt-12" v-if="!postings.data.value?.length">
+      <div class="max-w-2xl mx-auto mt-12" v-if="!postings.length">
         <AdminPostingsEmptyState />
       </div>
-      <!-- <AdminPostingsTable :postings="postings.data.value" v-else/> -->
       <div class="grid grid-cols-12 gap-6 p-4">
         <AdminPostingsCard
-          v-for="posting in postings.data.value"
+          v-for="posting in postings"
           :key="posting.id"
           :posting="posting"
         />
diff --git a/app/pages/admin/postings/new.vue b/app/pages/admin/postings/new.vue
new file mode 100644
index 00000000..326d4f04
--- /dev/null
+++ b/app/pages/admin/postings/new.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { createJobPostingSchema } from '~~/shared/schemas/posting';
+
+definePageMeta({
+  layout: 'admin',
+  middleware: 'admin-auth',
+});
+
+useHead({
+  title: 'New Posting',
+});
+
+const { refresh } = await usePostingsRepository();
+
+const formSchema = toTypedSchema(createJobPostingSchema);
+const { handleSubmit, errors, defineField } = useForm({
+  validationSchema: formSchema,
+});
+
+const [title] = defineField('title');
+const [contents] = defineField('contents');
+const [tagsCSV] = defineField('tagsCSV');
+const [isPublished] = defineField('isPublished');
+
+const isSubmitting = ref(false);
+
+const onSubmit = handleSubmit(async (values) => {
+  try {
+    isSubmitting.value = true;
+    await $fetch('/api/posting', {
+      method: 'POST',
+      body: {
+        ...values,
+      },
+    });
+    refresh();
+    await navigateTo('/admin/postings');
+  } catch (e) {
+    console.error(e);
+  } finally {
+    isSubmitting.value = false;
+  }
+});
+</script>
+
+<template>
+  <div class="w-full max-w-9xl mx-auto">
+    <!-- Page header -->
+    <div
+      class="flex flex-col md:flex-row justify-between items-center mb-4 border-b border-zinc-200 p-4 bg-white"
+    >
+      <!-- Left: Title -->
+      <div class="mb-4 sm:mb-0">
+        <h2
+          class="text-md md:text-lg text-zinc-800 font-bold flex items-center"
+        >
+          <Icon
+            class="w-5 h-5 shrink-0 fill-current mr-2"
+            name="iconamoon:edit"
+          />New Posting
+        </h2>
+      </div>
+      <!-- Right: Actions -->
+      <div class="flex items-center space-x-3">
+        <InputSwitch label="Publish?" v-model="isPublished" />
+        <AbstractConfirmationBox
+          title="Save Posting?"
+          content="Are you sure you want to save the changes?"
+          @confirm="onSubmit"
+        >
+          <template #input="{ open }">
+            <InputButton :disabled="isSubmitting" @click="open">
+              <div class="flex spece-x-2 items-center">
+                <Icon name="lets-icons:save" class="w-3 h-3 mr-1" />
+                <span>Save</span>
+              </div>
+            </InputButton>
+          </template>
+        </AbstractConfirmationBox>
+      </div>
+    </div>
+    <!-- Input Section -->
+    <form @submit="onSubmit">
+      <div class="px-4">
+        <div class="mx-auto mt-4">
+          <InputText
+            placeholder="Senior Software Engineer"
+            label="Title"
+            :disabled="isSubmitting"
+            :error="errors.title"
+            v-model="title"
+          />
+          <InputText
+            class="mt-4"
+            placeholder="Remote, Full Time, San Fransisco"
+            label="Tags (CSV)"
+            :disabled="isSubmitting"
+            v-model="tagsCSV"
+          />
+          <div class="mt-4">
+            <label class="block text-sm font-medium mb-1" for="jobdescription"
+              >Job Description</label
+            >
+            <Editor
+              placeholder="We are looking for someone who can..."
+              v-model="contents"
+            />
+            <div class="text-xs mt-1 text-rose-500">{{ errors.contents }}</div>
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/server/api/posting/index.get.ts b/server/api/posting/index.get.ts
index 48e141f3..d197fc56 100644
--- a/server/api/posting/index.get.ts
+++ b/server/api/posting/index.get.ts
@@ -1,39 +1,20 @@
+import { eq } from 'drizzle-orm';
 import { jobPostingsTable } from '../../db/schema';
 import authenticateAdminRequest from '../../utils/admin';
-import { and, eq, or } from 'drizzle-orm';
-import { listJobPostingsFilterSchema } from '~~/shared/schemas/posting';
+import { fetchJobPostingFilterSchema } from '~~/shared/schemas/posting';
 
 export default defineEventHandler(async (event) => {
-  const database = await useDatabase();
-
-  const session = await authenticateAdminRequest(event);
-  const q = await getValidatedQuery(event, listJobPostingsFilterSchema.parse);
+  await authenticateAdminRequest(event);
+  const q = await getValidatedQuery(event, fetchJobPostingFilterSchema.parse);
 
-  const conditions = [];
-
-  if (q && q.id) {
-    conditions.push(eq(jobPostingsTable.id, q.id));
-  } else if (q && q.ownerId) {
-    // If owner specified, just return published postings.
-    conditions.push(
-      and(
-        eq(jobPostingsTable.owner, q.ownerId),
-        eq(jobPostingsTable.isPublished, true)
-      )
-    );
-  } else {
-    // If owner not specified, just return published postings + postings by admin himself
-    conditions.push(
-      or(
-        eq(jobPostingsTable.isPublished, true),
-        eq(jobPostingsTable.owner, session.user.id)
-      )
-    );
-  }
+  const database = await useDatabase();
 
-  return database
-    .select()
-    .from(jobPostingsTable)
-    .where(conditions.length ? and(...conditions) : undefined)
-    .orderBy(jobPostingsTable.createdAt);
+  return (
+    await database
+      .select()
+      .from(jobPostingsTable)
+      .where(eq(jobPostingsTable.id, q.id))
+      .orderBy(jobPostingsTable.createdAt)
+      .limit(1)
+  )[0];
 });
diff --git a/server/api/postings/index.get.ts b/server/api/postings/index.get.ts
index a5f63082..2871f1fe 100644
--- a/server/api/postings/index.get.ts
+++ b/server/api/postings/index.get.ts
@@ -1,18 +1,41 @@
-import { jobPostingsTable } from '~~/server/db/schema';
-import authenticateAdminRequest from '~~/server/utils/admin';
+import { jobPostingsTable } from '../../db/schema';
+import authenticateAdminRequest from '../../utils/admin';
+import { and, eq, getTableColumns, or } from 'drizzle-orm';
+import { listJobPostingsFilterSchema } from '~~/shared/schemas/posting';
 
 export default defineEventHandler(async (event) => {
-  await authenticateAdminRequest(event);
+  const database = await useDatabase();
 
-  const db = await useDatabase();
+  const session = await authenticateAdminRequest(event);
+  const q = await getValidatedQuery(event, listJobPostingsFilterSchema.parse);
 
-  const postings = await db
-    .select({ id: jobPostingsTable.id, title: jobPostingsTable.title })
-    .from(jobPostingsTable);
+  const { contents, ...columns } = getTableColumns(jobPostingsTable);
 
-  if (IS_DEV) {
-    console.log('[/api/postings] found', postings.length, 'postings');
+  const conditions = [];
+
+  if (q && q.id) {
+    conditions.push(eq(jobPostingsTable.id, q.id));
+  } else if (q && q.ownerId) {
+    // If owner specified, just return published postings.
+    conditions.push(
+      and(
+        eq(jobPostingsTable.owner, q.ownerId),
+        eq(jobPostingsTable.isPublished, true)
+      )
+    );
+  } else {
+    // If owner not specified, just return published postings + postings by admin himself
+    conditions.push(
+      or(
+        eq(jobPostingsTable.isPublished, true),
+        eq(jobPostingsTable.owner, session.user.id)
+      )
+    );
   }
 
-  return postings;
+  return database
+    .select(columns)
+    .from(jobPostingsTable)
+    .where(conditions.length ? and(...conditions) : undefined)
+    .orderBy(jobPostingsTable.createdAt);
 });
diff --git a/server/api/postings/lite.get.ts b/server/api/postings/lite.get.ts
new file mode 100644
index 00000000..294f9eba
--- /dev/null
+++ b/server/api/postings/lite.get.ts
@@ -0,0 +1,19 @@
+import { desc } from 'drizzle-orm';
+import { jobPostingsTable } from '~~/server/db/schema';
+import authenticateAdminRequest from '~~/server/utils/admin';
+
+export default defineEventHandler(async (event) => {
+  await authenticateAdminRequest(event);
+
+  const db = await useDatabase();
+
+  const postings = await db
+    .select({ id: jobPostingsTable.id, title: jobPostingsTable.title })
+    .from(jobPostingsTable)
+    .orderBy(desc(jobPostingsTable.createdAt));
+  if (IS_DEV) {
+    console.log('[/api/postings/lite] found', postings.length, 'postings');
+  }
+
+  return postings;
+});
diff --git a/shared/schemas/posting.ts b/shared/schemas/posting.ts
index 41ade040..9e784b2b 100644
--- a/shared/schemas/posting.ts
+++ b/shared/schemas/posting.ts
@@ -7,6 +7,10 @@ export const listJobPostingsFilterSchema = z
   })
   .optional();
 
+export const fetchJobPostingFilterSchema = z.object({
+  id: z.string().uuid(),
+});
+
 export const createJobPostingSchema = z.object({
   title: z.string().min(1).max(150),
   contents: z.string().optional(),