From 6a23af98e09d76df89a776855a0d6bcb328d0a3c Mon Sep 17 00:00:00 2001
From: amandesai01 <amandesai01@gmail.com>
Date: Sat, 7 Sep 2024 16:27:33 +0530
Subject: [PATCH] feat(settings)!: settings now config + merged with public
 settings

---
 app/components/SiteHeader.vue                 | 24 +++++-----
 app/components/admin/Sidebar.vue              |  8 ++--
 .../admin/settings/CareerSite/Frame.vue       | 48 ++++++-------------
 app/components/admin/settings/Seo/Frame.vue   | 34 +++----------
 app/composables/public-settings.ts            | 19 --------
 app/composables/site-config.ts                |  4 +-
 app/composables/state.ts                      | 22 +++++++--
 app/pages/index.vue                           | 33 +++++--------
 app/pages/postings/[id].vue                   | 15 +++---
 app/plugins/setup-state.ts                    | 30 ++++--------
 server/api/public/config.get.ts               | 15 +++++-
 server/api/settings/career-site.get.ts        | 10 ----
 server/api/settings/career-site.put.ts        |  5 +-
 server/api/settings/seo.get.ts                |  8 ----
 server/api/settings/seo.put.ts                | 10 ++--
 server/utils/tasks/seed-cache.ts              |  6 +--
 16 files changed, 114 insertions(+), 177 deletions(-)
 delete mode 100644 app/composables/public-settings.ts
 delete mode 100644 server/api/settings/career-site.get.ts
 delete mode 100644 server/api/settings/seo.get.ts

diff --git a/app/components/SiteHeader.vue b/app/components/SiteHeader.vue
index 3a368bd..bc9aa58 100644
--- a/app/components/SiteHeader.vue
+++ b/app/components/SiteHeader.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-const site = usePublicCareerSiteSettings();
+const { data: careerSiteConfig } = useCareerSiteConfigObjectState();
 
-const logoURL = useRemoteAsset(site.value.logo).url;
+const logoURL = useRemoteAsset(careerSiteConfig.value.logo).url;
 </script>
 
 <template>
@@ -12,31 +12,33 @@ const logoURL = useRemoteAsset(site.value.logo).url;
       <img
         class="w-20 rounded-2xl border border-zinc-600"
         :src="logoURL"
-        :alt="`${site.name}'s Avatar`"
+        :alt="`${careerSiteConfig.name}'s Avatar`"
       />
     </div>
     <div class="p-1 flex flex-col">
-      <span class="font-bold font-noto text-2xl">{{ site.name }}</span>
-      <span class="text-lg font-zinc-600 font-lato text-zinc-600">{{
-        site.bio
-      }}</span>
+      <span class="font-bold font-noto text-2xl">
+        {{ careerSiteConfig.name }}
+      </span>
+      <span class="text-lg font-zinc-600 font-lato text-zinc-600">
+        {{ careerSiteConfig.bio }}
+      </span>
       <div
         class="inline-flex flex-wrap justify-center sm:justify-start space-x-4 mt-2 text-zinc-600"
       >
-        <div class="flex items-center" v-if="site.location">
+        <div class="flex items-center" v-if="careerSiteConfig.location">
           <Icon
             class="w-4 h-4 fill-current shrink-0"
             name="grommet-icons:location"
           />
           <span class="text-sm font-medium whitespace-nowrap ml-1">
-            {{ site.location }}
+            {{ careerSiteConfig.location }}
           </span>
         </div>
         <div
-          v-for="link in site.links.slice(0, 3)"
+          v-for="link in careerSiteConfig.links.slice(0, 3)"
           :key="link.href"
           class="flex items-center"
-          v-if="site.links"
+          v-if="careerSiteConfig.links"
         >
           <Icon name="tdesign:link" class="w-4 h-4 fill-current shrink-0" />
           <a
diff --git a/app/components/admin/Sidebar.vue b/app/components/admin/Sidebar.vue
index 5f8d477..324b8b1 100644
--- a/app/components/admin/Sidebar.vue
+++ b/app/components/admin/Sidebar.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-const careerSiteSettings = usePublicCareerSiteSettings();
-const logoURL = computed(
-  () => useRemoteAsset(careerSiteSettings.value.logo).url
-);
+const { data: careerSiteConfig } = useCareerSiteConfigObjectState();
+const logoURL = computed(() => useRemoteAsset(careerSiteConfig.value.logo).url);
 
 const publicConfig = useRuntimeConfig().public;
 </script>
@@ -20,7 +18,7 @@ const publicConfig = useRuntimeConfig().public;
           alt="avatar"
         />
         <span class="font-bold ml-2 truncate font-noto">{{
-          careerSiteSettings.name
+          careerSiteConfig.name
         }}</span>
       </div>
       <!-- Home -->
diff --git a/app/components/admin/settings/CareerSite/Frame.vue b/app/components/admin/settings/CareerSite/Frame.vue
index c1def57..6bb7258 100644
--- a/app/components/admin/settings/CareerSite/Frame.vue
+++ b/app/components/admin/settings/CareerSite/Frame.vue
@@ -1,13 +1,7 @@
 <script setup lang="ts">
 import { careerSiteConfigSchema } from '~~/shared/schemas/setting';
 
-const emits = defineEmits<{
-  saved: [];
-}>();
-
-const generalSettings = useGeneralSettings();
-const { updateGeneralSettings, generalSettings: generalSettingsPublic } =
-  usePublicGeneralSettings();
+const { data, setData } = useCareerSiteConfigObjectState();
 
 // Define form schema and use it in the form handling
 const formSchema = toTypedSchema(careerSiteConfigSchema);
@@ -46,40 +40,26 @@ const removeSocialHandle = (index: number) => {
 };
 
 // Initialize fields with data from settings
-let stopWatching: () => void;
-stopWatching = watchEffect(() => {
-  if (generalSettings.data.value) {
-    const gs = generalSettings.data.value;
-
-    name.value = gs.careerSite.name;
-    bio.value = gs.careerSite.bio;
-    description.value = gs.careerSite.description;
-    location.value = gs.careerSite.location;
-    links.value = gs.careerSite.links;
-    logo.value = gs.careerSite.logo;
-    overviewSocials.value = gs.careerSite.overview.socials;
-    overviewCompanySize.value = gs.careerSite.overview.companySize;
-    overviewTotalRaised.value = gs.careerSite.overview.totalRaised;
-    overviewMarkets.value = gs.careerSite.overview.markets;
-
-    stopWatching && stopWatching();
-  }
-});
+name.value = data.value.name;
+bio.value = data.value.bio;
+description.value = data.value.description;
+location.value = data.value.location;
+links.value = data.value.links;
+logo.value = data.value.logo;
+overviewSocials.value = data.value.overview.socials;
+overviewCompanySize.value = data.value.overview.companySize;
+overviewTotalRaised.value = data.value.overview.totalRaised;
+overviewMarkets.value = data.value.overview.markets;
 
 const isSubmitting = ref(false);
 const onSubmit = handleSubmit(async (values) => {
   try {
     isSubmitting.value = true;
-    const updatedSettings = {
-      careerSite: values,
-      seo: generalSettingsPublic.value.seo,
-    };
-    await $fetch('/api/settings/general', {
+    await $fetch('/api/settings/career-site', {
       method: 'PUT',
-      body: updatedSettings,
+      body: values,
     });
-    updateGeneralSettings(updatedSettings);
-    emits('saved');
+    setData(values);
   } catch (error) {
     console.error('Error saving settings', error);
   } finally {
diff --git a/app/components/admin/settings/Seo/Frame.vue b/app/components/admin/settings/Seo/Frame.vue
index e35c329..1c1d3a7 100644
--- a/app/components/admin/settings/Seo/Frame.vue
+++ b/app/components/admin/settings/Seo/Frame.vue
@@ -1,13 +1,7 @@
 <script setup lang="ts">
 import { seoConfigSchema } from '~~/shared/schemas/setting';
 
-const emits = defineEmits<{
-  saved: [];
-}>();
-
-const generalSettings = useGeneralSettings();
-const { updateGeneralSettings, generalSettings: generalSettingsPublic } =
-  usePublicGeneralSettings();
+const { data, setData } = useSeoConfigObjectState();
 
 // Define form schema and use it in the form handling
 const formSchema = toTypedSchema(seoConfigSchema);
@@ -21,33 +15,19 @@ const [description] = defineField('description');
 const [twitter] = defineField('twitter');
 
 // Initialize fields with data from settings
-let stopWatching: () => void;
-stopWatching = watchEffect(() => {
-  if (generalSettings.data.value) {
-    const gs = generalSettings.data.value;
-
-    title.value = gs.seo.title;
-    description.value = gs.seo.description;
-    twitter.value = gs.seo.twitter;
-
-    stopWatching && stopWatching();
-  }
-});
+title.value = data.value.title;
+description.value = data.value.description;
+twitter.value = data.value.twitter;
 
 const isSubmitting = ref(false);
 const onSubmit = handleSubmit(async (values) => {
-  const updatedSettings = {
-    seo: values,
-    careerSite: generalSettingsPublic.value.careerSite,
-  };
   try {
     isSubmitting.value = true;
-    await $fetch('/api/settings/general', {
+    await $fetch('/api/settings/seo', {
       method: 'PUT',
-      body: updatedSettings,
+      body: values,
     });
-    updateGeneralSettings(updatedSettings);
-    emits('saved');
+    setData(values);
   } catch (error) {
     console.error('Error saving settings', error);
   } finally {
diff --git a/app/composables/public-settings.ts b/app/composables/public-settings.ts
deleted file mode 100644
index fcc012d..0000000
--- a/app/composables/public-settings.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { GeneralSettings } from '~~/shared/schemas/setting';
-
-export function usePublicGeneralSettings() {
-  const generalSettings = useState<GeneralSettings>('public-general-settings');
-  const updateGeneralSettings = (gs: GeneralSettings) => {
-    generalSettings.value = gs;
-  };
-  return { generalSettings, updateGeneralSettings };
-}
-
-export function usePublicCareerSiteSettings() {
-  const { generalSettings } = usePublicGeneralSettings();
-  return computed(() => generalSettings.value.careerSite);
-}
-
-export function usePublicSeoSettings() {
-  const { generalSettings } = usePublicGeneralSettings();
-  return computed(() => generalSettings.value.seo);
-}
diff --git a/app/composables/site-config.ts b/app/composables/site-config.ts
index 2cc18bb..bd5d604 100644
--- a/app/composables/site-config.ts
+++ b/app/composables/site-config.ts
@@ -1,10 +1,10 @@
 export function useRemoteAsset(slug: string) {
-  const remoteAssetBase = useState<string>('remote-asset-base-url');
+  const remoteAssetBase = useRemoteAssetBaseState();
   const url = remoteAssetBase.value + '/' + slug;
 
   return { url };
 }
 
 export function useOnboardingStatus() {
-  return useState<boolean>('onboarding-status', () => false);
+  return useOnboardingStatusState();
 }
diff --git a/app/composables/state.ts b/app/composables/state.ts
index 53630bc..ae9e9dd 100644
--- a/app/composables/state.ts
+++ b/app/composables/state.ts
@@ -1,12 +1,27 @@
-import type { Hook } from '~~/server/db/schema';
+import {
+  type CareerSiteConfig,
+  type SEOConfig,
+} from '~~/shared/schemas/setting';
 import type { Session } from '~~/shared/types/profile-types';
 
 export function useSessionState() {
   return useState<Session>('oauth_session');
 }
 
-export function useHooksState() {
-  return useObjectState<Hook[]>('integration-hooks', () => []);
+export function useRemoteAssetBaseState() {
+  return useState<string>('remote-asset-base-url');
+}
+
+export function useOnboardingStatusState() {
+  return useState<boolean>('onboarding-status', () => false);
+}
+
+export function useCareerSiteConfigObjectState() {
+  return useObjectState<CareerSiteConfig>('career-site-config');
+}
+
+export function useSeoConfigObjectState() {
+  return useObjectState<SEOConfig>('seo-config');
 }
 
 export function useObjectState<T>(key: string, initFn?: () => T) {
@@ -16,6 +31,7 @@ export function useObjectState<T>(key: string, initFn?: () => T) {
   const changing = useState<boolean>(`${key}-changing`);
 
   const setData = (d: T) => {
+    firstFetched.value = true;
     data.value = d;
   };
 
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 12d2559..520c4b6 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,26 +1,19 @@
 <script setup lang="ts">
-const { data: postings } = await usePublicPostings();
-const { generalSettings } = usePublicGeneralSettings();
+const { data: postings } = await usePublicPostingsRepository();
+const { data: careerSiteConfig } = useCareerSiteConfigObjectState();
+const { data: seoConfig } = useSeoConfigObjectState();
 
 let title: string = 'Careers'; // TODO: need better defaults (this will hardly be the case);
 let description: string = 'Career Site'; // TODO: need better defaults (this will hardly be the case);
-if (generalSettings.value) {
-  const seoTitle = generalSettings.value.seo.title;
-  const generalName = generalSettings.value.careerSite.name;
-
-  const seoDescription = generalSettings.value.seo.description;
-  const generalBio = generalSettings.value.careerSite.bio;
-
-  if (seoTitle) {
-    title = seoTitle;
-  } else if (generalName) {
-    title = `Careers @ ${generalName}`;
-  }
-  if (seoDescription) {
-    description = seoDescription;
-  } else if (generalBio) {
-    description = generalBio;
-  }
+if (seoConfig.value.title) {
+  title = seoConfig.value.title;
+} else if (careerSiteConfig.value.name) {
+  title = `Careers @ ${careerSiteConfig.value.name}`;
+}
+if (seoConfig.value.description) {
+  description = seoConfig.value.description;
+} else if (careerSiteConfig.value.bio) {
+  description = careerSiteConfig.value.bio;
 }
 
 useHead({
@@ -39,7 +32,7 @@ useSeoMeta({
   twitterCard: 'summary',
   twitterTitle: title,
   twitterDescription: description,
-  twitterCreator: generalSettings.value?.seo.twitter,
+  twitterCreator: seoConfig.value.twitter,
 });
 </script>
 
diff --git a/app/pages/postings/[id].vue b/app/pages/postings/[id].vue
index 46cd3ce..e6eadfc 100644
--- a/app/pages/postings/[id].vue
+++ b/app/pages/postings/[id].vue
@@ -6,11 +6,12 @@ const { data: applicationStatus, refresh: refreshApplicationStatus } =
   useApplicationStatus(id);
 const { data: posting } = usePublicPosting(id);
 
-const careerSite = usePublicCareerSiteSettings();
-const companyLogo = useRemoteAsset(careerSite.value.logo).url;
+const { data: careerSiteConfig } = useCareerSiteConfigObjectState();
+const companyLogo = useRemoteAsset(careerSiteConfig.value.logo).url;
 
 useHead({
-  title: () => `${posting.value?.title + ' | ' || ''}${careerSite.value.name}`,
+  title: () =>
+    `${posting.value?.title + ' | ' || ''}${careerSiteConfig.value.name}`,
 });
 
 const tags = computed<string[]>(() => {
@@ -86,11 +87,11 @@ if (route.query.fromOnboard) {
                   :src="companyLogo"
                   width="64"
                   height="64"
-                  :alt="`${careerSite.name}'s logo'`"
+                  :alt="`${careerSiteConfig.name}'s logo'`"
                 />
               </div>
               <div class="text-lg font-bold text-zinc-800 mb-1">
-                {{ careerSite.name }}
+                {{ careerSiteConfig.name }}
               </div>
             </div>
             <div class="space-y-4 sm:flex sm:space-y-0 sm:space-x-2">
@@ -142,11 +143,11 @@ if (route.query.fromOnboard) {
                   :src="companyLogo"
                   width="64"
                   height="64"
-                  :alt="`${careerSite.name}'s logo'`"
+                  :alt="`${careerSiteConfig.name}'s logo'`"
                 />
               </div>
               <div class="text-lg font-bold text-zinc-800 mb-1">
-                {{ careerSite.name }}
+                {{ careerSiteConfig.name }}
               </div>
             </div>
             <div class="space-y-2">
diff --git a/app/plugins/setup-state.ts b/app/plugins/setup-state.ts
index 3334c7a..2d24f2e 100644
--- a/app/plugins/setup-state.ts
+++ b/app/plugins/setup-state.ts
@@ -1,8 +1,9 @@
-import type { GeneralSettings } from '~~/shared/schemas/setting';
-
 export default defineNuxtPlugin(async () => {
-  const remoteAssetBase = useState('remote-asset-base-url', () => '');
-  const onboardingStatus = useState('onboarding-status', () => false);
+  const remoteAssetBase = useRemoteAssetBaseState();
+  const onboardingStatus = useOnboardingStatusState();
+  const careerSiteConfigObjectState = useCareerSiteConfigObjectState();
+  const seoConfigObjectState = useSeoConfigObjectState();
+
   try {
     const publicConfigRequest = await useFetch('/api/public/config');
     if (!publicConfigRequest.data.value) {
@@ -14,24 +15,11 @@ export default defineNuxtPlugin(async () => {
 
     remoteAssetBase.value = pubicConfig.remoteAssetBase;
     onboardingStatus.value = pubicConfig.onboardingStatus;
-  } catch (error) {
-    console.error('error fetching remote-asset-config', error);
-  }
+    careerSiteConfigObjectState.setData(pubicConfig.settings.careerSite);
+    seoConfigObjectState.setData(pubicConfig.settings.seo);
 
-  const publicGeneralSettings = useState<GeneralSettings>(
-    'public-general-settings'
-  );
-  try {
-    const publicGeneralSettingsResponse = await useFetch(
-      '/api/public/settings'
-    );
-    if (!publicGeneralSettingsResponse.data.value) {
-      throw new Error(
-        'Invalid response ' + publicGeneralSettingsResponse.data.value
-      );
-    }
-    publicGeneralSettings.value = publicGeneralSettingsResponse.data.value;
+    console.log(pubicConfig);
   } catch (error) {
-    console.error('error fetching public-general-settings', error);
+    console.error('error fetching remote-asset-config', error);
   }
 });
diff --git a/server/api/public/config.get.ts b/server/api/public/config.get.ts
index 4d494c7..1abfb47 100644
--- a/server/api/public/config.get.ts
+++ b/server/api/public/config.get.ts
@@ -1,4 +1,5 @@
 import { general_memoryStorage } from '~~/server/utils/storage';
+import type { CareerSiteConfig, SEOConfig } from '~~/shared/schemas/setting';
 
 export default defineEventHandler(async () => {
   const remoteAssetBase = (await general_memoryStorage.getItem(
@@ -8,5 +9,17 @@ export default defineEventHandler(async () => {
     'firstSetupAccessKey'
   )) as string);
 
-  return { remoteAssetBase, onboardingStatus };
+  const settings = {
+    careerSite: {},
+    seo: {},
+  } as { careerSite: CareerSiteConfig; seo: SEOConfig };
+
+  settings.seo = (await settings_memoryStorage.getItem(
+    'seoConfig'
+  )) as SEOConfig;
+  settings.careerSite = (await settings_memoryStorage.getItem(
+    'careerSiteConfig'
+  )) as CareerSiteConfig;
+
+  return { remoteAssetBase, onboardingStatus, settings };
 });
diff --git a/server/api/settings/career-site.get.ts b/server/api/settings/career-site.get.ts
deleted file mode 100644
index 955cb0d..0000000
--- a/server/api/settings/career-site.get.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { type CareerSiteConfig } from '~~/shared/schemas/setting';
-import authenticateAdminRequest from '~~/server/utils/admin';
-
-export default defineEventHandler(async (event) => {
-  await authenticateAdminRequest(event);
-
-  return (await settings_memoryStorage.getItem(
-    'careerSiteConfig'
-  )) as CareerSiteConfig;
-});
diff --git a/server/api/settings/career-site.put.ts b/server/api/settings/career-site.put.ts
index 6c246ae..d8e09bf 100644
--- a/server/api/settings/career-site.put.ts
+++ b/server/api/settings/career-site.put.ts
@@ -23,5 +23,8 @@ export default defineEventHandler(async (event) => {
     .update(metaDataTable)
     .set({ value: careerSiteString, updatedAt: new Date() })
     .where(eq(metaDataTable.key, 'careerSiteConfig'));
-  settings_memoryStorage.setItem('careerSiteConfig', settingsUpdateRequest);
+  await settings_memoryStorage.setItem(
+    'careerSiteConfig',
+    settingsUpdateRequest
+  );
 });
diff --git a/server/api/settings/seo.get.ts b/server/api/settings/seo.get.ts
deleted file mode 100644
index 322607e..0000000
--- a/server/api/settings/seo.get.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { type SEOConfig } from '~~/shared/schemas/setting';
-import authenticateAdminRequest from '~~/server/utils/admin';
-
-export default defineEventHandler(async (event) => {
-  await authenticateAdminRequest(event);
-
-  return (await settings_memoryStorage.getItem('seoConfig')) as SEOConfig;
-});
diff --git a/server/api/settings/seo.put.ts b/server/api/settings/seo.put.ts
index 46c36d7..c424959 100644
--- a/server/api/settings/seo.put.ts
+++ b/server/api/settings/seo.put.ts
@@ -1,5 +1,5 @@
 import { eq } from 'drizzle-orm';
-import { careerSiteConfigSchema } from '~~/shared/schemas/setting';
+import { seoConfigSchema } from '~~/shared/schemas/setting';
 import { metaDataTable } from '~~/server/db/schema';
 import authenticateAdminRequest from '~~/server/utils/admin';
 import { settings_memoryStorage } from '~~/server/utils/storage';
@@ -13,15 +13,15 @@ export default defineEventHandler(async (event) => {
 
   const settingsUpdateRequest = await readValidatedBody(
     event,
-    careerSiteConfigSchema.parse
+    seoConfigSchema.parse
   );
 
   const db = await useDatabase();
 
-  const careerSiteString = JSON.stringify(settingsUpdateRequest);
+  const seoConfigString = JSON.stringify(settingsUpdateRequest);
   await db
     .update(metaDataTable)
-    .set({ value: careerSiteString, updatedAt: new Date() })
+    .set({ value: seoConfigString, updatedAt: new Date() })
     .where(eq(metaDataTable.key, 'seoConfig'));
-  settings_memoryStorage.setItem('seoConfig', settingsUpdateRequest);
+  await settings_memoryStorage.setItem('seoConfig', settingsUpdateRequest);
 });
diff --git a/server/utils/tasks/seed-cache.ts b/server/utils/tasks/seed-cache.ts
index 1064b93..0317f97 100644
--- a/server/utils/tasks/seed-cache.ts
+++ b/server/utils/tasks/seed-cache.ts
@@ -1,6 +1,6 @@
 import { desc, inArray } from 'drizzle-orm';
-import type { GeneralSettings } from '~~/shared/schemas/setting';
 import { jobPostingsTable, metaDataTable } from '~~/server/db/schema';
+import type { CareerSiteConfig, SEOConfig } from '~~/shared/schemas/setting';
 
 export async function seedCache() {
   console.log('Seeding Cache');
@@ -26,10 +26,10 @@ export async function seedCache() {
       .orderBy(desc(jobPostingsTable.createdAt))
   ).map((p) => ({ ...p, totalApplicants: -1 }));
 
-  const settings: GeneralSettings = {
+  const settings = {
     careerSite: {},
     seo: {},
-  } as GeneralSettings; // Ignore validation errors here.
+  } as { careerSite: CareerSiteConfig; seo: SEOConfig }; // Ignore validation errors here.
 
   let firstSetupAccessKey: string | null = null;