refactor: move salary compare logic to useDashboard

components/content/dashboard/Dashboard.vue

@@ -27,28 +27,15 @@
   })
 
   // Salary Comment for the user to know how he ranks among the participants
+  const { compareSalaryWithParticipants } = useDashboard()
   const salaryComment = computed(() => {
     if (!data.value?.stats) return ''
 
     const salary = +filters.value.personal.salary
-    const { median, p20Compensation, p75Compensation, p90Compensation } =
-      data.value.stats
-
-    if (!salary) {
-      return `Enter your salary to see how you rank among the participants.`
-    } else if (salary < p20Compensation) {
-      return `You are in the lower range of salaries. 80% of the participants earn more than you. Try using more filters to narrow the result to participants with the same criteria as you 🔍`
-    } else if (salary < median) {
-      return `You are in the lower range of salaries. 50% of the participants earn more than you. Try using more filters to narrow the result to participants with the same criteria as you 🔍`
-    } else if (salary < p75Compensation) {
-      return `You are in the upper range of salaries, earning more than 50% of the participants. Good job! 👏`
-    } else if (salary < p90Compensation) {
-      return `You are in the upper range of salaries, earning more than 75% of the participants. Great job! 👏`
-    } else if (salary >= p90Compensation) {
-      return `You earn more than 90% of the participants who took the survey. Bravo! 🚀`
-    } else {
-      return ''
-    }
+    if (!salary)
+      return 'Enter your salary to see how you rank among the participants.'
+
+    return compareSalaryWithParticipants(salary, data.value.stats)
   })
 </script>
 

composables/useDashboard.ts

@@ -152,6 +152,7 @@ export default function () {
     'cached-dashboard-data',
     () => ({}),
   )
+
   function getDashboardData(baseUrl: string) {
     return useAsyncData(
       'dashboard-data',
@@ -204,13 +205,37 @@ export default function () {
     )
   }
 
+  function compareSalaryWithParticipants(
+    salary: number,
+    stats: DashboardData['stats'],
+  ) {
+    const { median, p20Compensation, p75Compensation, p90Compensation } = stats
+
+    if (!salary) {
+      return `Enter your salary to see how you rank among the participants.`
+    } else if (salary < p20Compensation) {
+      return `You are in the lower range of salaries. 80% of the participants earn more than you. Try using more filters to narrow the result to participants with the same criteria as you 🔍`
+    } else if (salary < median) {
+      return `You are in the lower range of salaries. 50% of the participants earn more than you. Try using more filters to narrow the result to participants with the same criteria as you 🔍`
+    } else if (salary < p75Compensation) {
+      return `You are in the upper range of salaries, earning more than 50% of the participants. Good job! 👏`
+    } else if (salary < p90Compensation) {
+      return `You are in the upper range of salaries, earning more than 75% of the participants. Great job! 👏`
+    } else if (salary >= p90Compensation) {
+      return `You earn more than 90% of the participants who took the survey. Bravo! 🚀`
+    } else {
+      return ''
+    }
+  }
+
   return {
     filters,
     filtersParams,
     getInitialFilters,
     readFiltersFromUrl,
     storeFiltersToUrlWatcher,
     getDashboardData,
+    compareSalaryWithParticipants,
   }
 }