fix: reactive fetched-once settings

src/components/admin/Sidebar.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
-const { data: orgSettings } = useGeneralSettings('organizationConfig');
-const url = computed(() => {
-  if (orgSettings.value?.organization.logo) {
-    return useRemoteAsset(orgSettings.value?.organization.logo).url;
-  }
-})
+const orgSettings = usePublicOrganizationSettings();
+const logoURL = computed(() => useRemoteAsset(orgSettings.value.logo).url);
 </script>
 
 <template>
@@ -15,8 +11,8 @@ const url = computed(() => {
       <div
         class="flex px-2 py-2 justify-between rounded-xl text-zinc-600 border hover:bg-zinc-50 hover:border-zinc-200 space-x-2">
         <div class="flex items-center">
-          <img class="rounded-lg w-6 border border-zinc-200" :src="url" alt="avatar" />
-          <span class="text-xs ml-2 truncate font-noto">{{ orgSettings?.organization.name }}</span>
+          <img class="rounded-lg w-6 border border-zinc-200" :src="logoURL" alt="avatar" />
+          <span class="text-xs ml-2 truncate font-noto">{{ orgSettings.name }}</span>
         </div>
         <div class="flex items-center text-zinc-600">
           <Icon class="w-5 h-5 fill-current" name="icon-park-outline:down" />

src/components/admin/settings/general/Update.vue

@@ -10,6 +10,7 @@ const emits = defineEmits<{
 }>();
 
 const generalSettings = useGeneralSettings();
+const { updateGeneralSettings } = usePublicGeneralSettings();
 
 // Define form schema and use it in the form handling
 const formSchema = toTypedSchema(generalSettingsSchema);
@@ -61,7 +62,7 @@ const onSubmit = handleSubmit(async values => {
       method: 'PUT',
       body: { ...values },
     });
-
+    updateGeneralSettings(values);
     emits('saved');
   } catch (error) {
     console.error("Error saving settings", error);

src/composables/api.ts

@@ -9,14 +9,6 @@ export function useGeneralSettings(config?: string) {
   });
 }
 
-export function usePublicGeneralSettings(config?: string) {
-  return useFetch<GeneralSettings>('/api/public/settings', {
-    query: {
-      config,
-    }
-  });
-}
-
 export function usePublicPostings() {
   return useFetch<JobPosting[]>('/api/public/postings');
 }

src/composables/public-settings.ts

@@ -0,0 +1,19 @@
+import type { GeneralSettings } from '~/schemas/setting';
+
+export function usePublicGeneralSettings() {
+  const generalSettings = useState<GeneralSettings>('public-general-settings');
+  const updateGeneralSettings = (gs: GeneralSettings) => {
+    generalSettings.value = gs;
+  };
+  return { generalSettings, updateGeneralSettings };
+}
+
+export function usePublicOrganizationSettings() {
+  const { generalSettings } = usePublicGeneralSettings();
+  return computed(() => generalSettings.value.organization);
+}
+
+export function usePublicSeoSettings() {
+  const { generalSettings } = usePublicGeneralSettings();
+  return computed(() => generalSettings.value.seo);
+}

src/pages/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { data: postings } = await usePublicPostings();
-const { data: generalSettings } = await usePublicGeneralSettings();
+const { generalSettings } = usePublicGeneralSettings();
 
 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);
@@ -42,7 +42,7 @@ useSeoMeta({
   twitterCreator: generalSettings.value?.seo.twitter,
 })
 
-const logoURL = useRemoteAsset(generalSettings.value?.organization.logo as string).url;
+const logoURL = useRemoteAsset(generalSettings.value.organization.logo).url;
 </script>
 
 <template>
@@ -65,19 +65,19 @@ const logoURL = useRemoteAsset(generalSettings.value?.organization.logo as strin
 
           <!-- Company name and info -->
           <div class="mb-4">
-            <h2 class="text-2xl text-zinc-800 font-bold mb-2">{{ generalSettings?.organization.name }}</h2>
-            <p>{{ generalSettings?.organization.description }}</p>
+            <h2 class="text-2xl text-zinc-800 font-bold mb-2">{{ generalSettings.organization.name }}</h2>
+            <p>{{ generalSettings.organization.description }}</p>
           </div>
           <!-- Meta -->
           <div class="inline-flex flex-wrap justify-center sm:justify-start space-x-4">
-            <div class="flex items-center" v-if="generalSettings?.organization.location">
+            <div class="flex items-center" v-if="generalSettings.organization.location">
               <Icon class="w-4 h-4 fill-current shrink-0 text-zinc-400" name="grommet-icons:location" />
               <span class="text-sm font-medium whitespace-nowrap text-zinc-400 ml-1">
-                {{ generalSettings?.organization.location }}
+                {{ generalSettings.organization.location }}
               </span>
             </div>
             <div v-for="link in (generalSettings.organization.links.slice(0, 3))" :key="link.href"
-              class="flex items-center" v-if="generalSettings?.organization.links">
+              class="flex items-center" v-if="generalSettings.organization.links">
               <Icon name="tdesign:link" class="w-4 h-4 fill-current shrink-0 text-zinc-400" />
               <a class="text-sm font-medium whitespace-nowrap text-blue-500 hover:text-blue-600 ml-1"
                 :href="link.href">{{ link.title }}</a>
@@ -89,7 +89,7 @@ const logoURL = useRemoteAsset(generalSettings.value?.organization.logo as strin
     <div class="px-4 sm:px-6 lg:px-8 py-8 w-full">
       <div class="max-w-3xl mx-auto">
         <h3 class="text-xl leading-snug text-zinc-800 font-bold mb-6">
-          Open Positions at Nirvana Labs
+          Open Positions at {{ generalSettings.organization.name }}
         </h3>
         <div class="space-y-2" v-if="postings">
           <PostingCard v-for="posting in postings" :key="posting.id" :posting="posting" />

src/plugins/setup-state.ts

@@ -0,0 +1,29 @@
+import type { GeneralSettings } from '~/schemas/setting';
+
+export default defineNuxtPlugin(async () => {
+  const remoteAssetBase = useState('remote-asset-base-url', () => '');
+  try {
+    const remoteAssetConfig = await useAsyncData('remove-asset-base-url-fetch', () =>
+      $fetch('/api/public/remote-assets-config'),
+    );
+    if (!remoteAssetConfig.data.value?.base) {
+      throw new Error('base url not found in response ' + remoteAssetConfig.data.value);
+    }
+    remoteAssetBase.value = remoteAssetConfig.data.value?.base;
+  } catch (error) {
+    console.error('error fetching remote-asset-config', error);
+  }
+
+  const publicGeneralSettings = useState<GeneralSettings>('public-general-settings');
+  try {
+    const publicGeneralSettingsResponse = await useAsyncData('public-general-settings-fetch', () =>
+      $fetch('/api/public/settings'),
+    );
+    if (!publicGeneralSettingsResponse.data.value) {
+      throw new Error('Invalid response ' + publicGeneralSettingsResponse.data.value);
+    }
+    publicGeneralSettings.value = publicGeneralSettingsResponse.data.value;
+  } catch (error) {
+    console.error('error fetching public-general-settings', error);
+  }
+});

src/schemas/setting.ts

@@ -15,7 +15,7 @@ export const organizationConfigSchema = z
     name: z.string().max(36).min(1),
     description: z.string().nullable().optional(),
     location: z.string().max(24).nullable().optional(),
-    logo: z.string().uuid().nullable().optional(),
+    logo: z.string().uuid(),
     links: z
       .array(
         z.object({