feat: implement API cache for the project groups page (#3036)

Author: Sameh16

.cursorrules .cursor/rule/.cursorrules.cursorrules renamed to .cursor/rule/.cursorrules

@@ -34,6 +34,8 @@
     "@nangohq/frontend": "^0.9.0",
     "@nangohq/frontend-v2": "npm:@nangohq/frontend@^0.52.4",
     "@tailwindcss/line-clamp": "^0.4.2",
+    "@tanstack/vue-query": "^5.75.1",
+    "@tanstack/vue-query-devtools": "^5.75.1",
     "@vitejs/plugin-vue": "^4.2.3",
     "@vue/eslint-config-airbnb": "^7.0.0",
     "@vuelidate/core": "^2.0.1",

frontend/package-lock.json

@@ -15,6 +15,7 @@
       <app-resize-page />
     </div>
     <lf-globals />
+    <VueQueryDevtools />
   </div>
 </template>
 
@@ -28,13 +29,15 @@ import { useAuthStore } from '@/modules/auth/store/auth.store';
 import useSessionTracking from '@/shared/modules/monitoring/useSessionTracking';
 import { useLfSegmentsStore } from '@/modules/lf/segments/store';
 import LfGlobals from '@/shared/components/globals.vue';
+import { VueQueryDevtools } from '@tanstack/vue-query-devtools';
 
 export default {
   name: 'App',
 
   components: {
     LfGlobals,
     AppResizePage,
+    VueQueryDevtools,
   },
 
   setup() {

frontend/package.json

@@ -17,6 +17,7 @@ import { vueSanitizeOptions } from '@/shared/plugins/sanitize';
 import marked from '@/shared/plugins/marked';
 import { useLogRocket } from '@/utils/logRocket';
 import { initRUM } from '@/utils/datadog/rum';
+import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query';
 
 declare module 'vue' {
   interface ComponentCustomProperties {
@@ -34,6 +35,16 @@ declare module 'vue' {
   const app = createApp(App);
   app.use(pinia);
 
+  // Create a client
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { staleTime: 1000 * 60 * 5 } },
+  });
+
+  // Install the VueQuery plugin
+  app.use(VueQueryPlugin, {
+    queryClient,
+  });
+
   const { captureException } = useLogRocket();
 
   const router = await createRouter();

frontend/src/app.vue

@@ -8,8 +8,8 @@
   >
     <template #content>
       <div
-        v-if="loading"
-        v-loading="loading"
+        v-if="isLoading"
+        v-loading="isLoading"
         class="app-page-spinner h-16 !relative !min-h-5"
       />
       <div v-else>
@@ -41,10 +41,7 @@
             required: 'Slug is required',
           }"
         >
-          <el-input
-            v-model="form.slug"
-            placeholder="E.g. kubernetes"
-          />
+          <el-input v-model="form.slug" placeholder="E.g. kubernetes" />
         </app-form-item>
 
         <!-- Source ID -->
@@ -57,9 +54,7 @@
             required: 'Source ID is required',
           }"
         >
-          <el-input
-            v-model="form.sourceId"
-          />
+          <el-input v-model="form.sourceId" />
         </app-form-item>
 
         <!-- Status -->
@@ -85,7 +80,10 @@
               :value="status.value"
             >
               <div class="flex items-center gap-3">
-                <span class="w-1.5 h-1.5 rounded-full" :class="status.color" />{{ status.label }}
+                <span
+                  class="w-1.5 h-1.5 rounded-full"
+                  :class="status.color"
+                />{{ status.label }}
               </div>
             </el-option>
           </el-select>
@@ -104,58 +102,50 @@
       <lf-button
         type="primary"
         size="medium"
-        :disabled="!hasFormChanged || $v.$invalid || loading"
+        :disabled="!hasFormChanged || $v.$invalid || isLoading"
         @click="onSubmit"
       >
-        {{ isEditForm ? 'Update' : 'Add project' }}
+        {{ isEditForm ? "Update" : "Add project" }}
       </lf-button>
     </template>
   </app-drawer>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import formChangeDetector from '@/shared/form/form-change';
 import useVuelidate from '@vuelidate/core';
 import { required, maxLength } from '@vuelidate/validators';
 import {
-  computed, onMounted, reactive, ref,
+  computed, onMounted, reactive, ref, watch,
 } from 'vue';
 import AppFormItem from '@/shared/form/form-item.vue';
 import statusOptions from '@/modules/lf/config/status';
-import { useLfSegmentsStore } from '@/modules/lf/segments/store';
 import { useRoute } from 'vue-router';
 import useProductTracking from '@/shared/modules/monitoring/useProductTracking';
-import { EventType, FeatureEventKey } from '@/shared/modules/monitoring/types/event';
+import {
+  EventType,
+  FeatureEventKey,
+} from '@/shared/modules/monitoring/types/event';
 import LfButton from '@/ui-kit/button/Button.vue';
+import { Project } from '@/modules/lf/segments/types/Segments';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
+import { TanstackKey } from '@/shared/types/tanstack';
+import { segmentService } from '@/modules/lf/segments/segments.service';
+import Message from '@/shared/message/message';
 
-const emit = defineEmits(['update:modelValue']);
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    required: true,
-  },
-  id: {
-    type: String,
-    default: () => null,
-  },
-  parentSlug: {
-    type: String,
-    default: () => null,
-  },
-});
+const emit = defineEmits<{(e: 'update:modelValue', v: boolean): void;
+}>();
+
+const props = defineProps<{
+  modelValue: boolean;
+  id?: string | null;
+  parentSlug: string;
+}>();
 
 const route = useRoute();
 
 const { trackEvent } = useProductTracking();
 
-const lsSegmentsStore = useLfSegmentsStore();
-const {
-  createProject,
-  updateProject,
-  findProject,
-} = lsSegmentsStore;
-
-const loading = ref(false);
 const submitLoading = ref(false);
 const form = reactive({
   name: '',
@@ -191,30 +181,69 @@ const model = computed({
 
 const isEditForm = computed(() => !!props.id);
 
-const fillForm = (record) => {
+const fillForm = (record?: Project) => {
   if (record) {
     Object.assign(form, record);
   }
 
   formSnapshot();
 };
 
-onMounted(() => {
-  if (props.id) {
-    loading.value = true;
+const { isLoading, isSuccess, data } = useQuery({
+  queryKey: [TanstackKey.ADMIN_PROJECT_GROUPS, props.id],
+  queryFn: () => {
+    if (!props.id) {
+      return Promise.resolve(null);
+    }
+    return segmentService.getSegmentById(props.id);
+  },
+  enabled: !!props.id,
+});
 
-    findProject(props.id)
-      .then((response) => {
-        fillForm(response);
-      })
-      .finally(() => {
-        loading.value = false;
-      });
-  } else {
+watch(
+  data,
+  () => {
+    if (isSuccess.value && data.value) {
+      fillForm(data.value as Project);
+    }
+  },
+  { immediate: true },
+);
+
+onMounted(() => {
+  if (!props.id) {
     fillForm();
   }
 });
 
+const queryClient = useQueryClient();
+const onSuccess = () => {
+  submitLoading.value = false;
+  model.value = false;
+  queryClient.invalidateQueries({
+    queryKey: [TanstackKey.ADMIN_PROJECT_GROUPS],
+  });
+  Message.success(`Project ${props.id ? 'updated' : 'created'} successfully`);
+};
+
+const onError = () => {
+  Message.error(
+    `Something went wrong while ${props.id ? 'updating' : 'creating'} the project`,
+  );
+};
+
+const updateMutation = useMutation({
+  mutationFn: ({ id, form }: { id: string; form: Project }) => segmentService.updateSegment(id, form),
+  onSuccess,
+  onError,
+});
+
+const createMutation = useMutation({
+  mutationFn: (req: { project: Project; segments: string[] }) => segmentService.createProject(req),
+  onSuccess,
+  onError,
+});
+
 const onCancel = () => {
   model.value = false;
 };
@@ -227,31 +256,25 @@ const onSubmit = () => {
       key: FeatureEventKey.EDIT_PROJECT,
       type: EventType.FEATURE,
     });
-
-    updateProject(props.id, form)
-      .finally(() => {
-        submitLoading.value = false;
-        model.value = false;
-      });
+    updateMutation.mutate({
+      id: props.id!,
+      form: form as Project,
+    });
   } else {
     trackEvent({
       key: FeatureEventKey.ADD_PROJECT,
       type: EventType.FEATURE,
     });
 
-    createProject({
-      ...form,
-      segments: [route.params.id],
-    })
-      .finally(() => {
-        submitLoading.value = false;
-        model.value = false;
-      });
+    createMutation.mutate({
+      project: form as Project,
+      segments: [route.params.id as string],
+    });
   }
 };
 </script>
 
-<script>
+<script lang="ts">
 export default {
   name: 'AppLfProjectForm',
 };