Remove props drilling (#61)

claudiabdm · Jun 27, 2024 · fe22ef5 · fe22ef5
1 parent dd537a8
commit fe22ef5
Show file tree

Hide file tree

Showing 19 changed files with 130 additions and 228 deletions.
diff --git a/components/CvPreview.vue b/components/CvPreview.vue
@@ -33,17 +33,11 @@ const { formSettings, isLoading } = useCvState()
         ]"
       >
         <template v-if="formSettings.layout === 'one-column'">
-          <CvPreviewOneColumn
-            :form-settings="formSettings"
-            :is-loading="isLoading"
-          />
+          <CvPreviewOneColumn />
         </template>
 
         <template v-if="formSettings.layout === 'two-column'">
-          <CvPreviewTwoColumn
-            :form-settings="formSettings"
-            :is-loading="isLoading"
-          />
+          <CvPreviewTwoColumn />
         </template>
       </div>
     </div>

diff --git a/components/CvPreviewAbout.vue b/components/CvPreviewAbout.vue
@@ -1,22 +1,20 @@
 <script lang="ts" setup>
-import type { Cv } from '~/types/cvfy'
+import { useCvState } from '~/data/useCvState'
 
-defineProps<Pick<Cv, 'aboutme' | 'layout'>>()
+const { formSettings } = useCvState()
 </script>
 
 <template>
-  <section
-    class="cv__section cv__section--main"
-  >
+  <section class="cv__section cv__section--main">
     <h4
       class="cv__section-title cv__section-title--main"
-      :class="layout === 'one-column' && 'sr-only'"
+      :class="formSettings.layout === 'one-column' && 'sr-only'"
     >
       {{ $t("about-me") }}
     </h4>
     <p class="font-light">
       <!-- Avoids unnecessary spaces at the begging while still allowing break lines -->
-      <span class="whitespace-pre-wrap">{{ aboutme }}</span>
+      <span class="whitespace-pre-wrap">{{ formSettings.aboutme }}</span>
     </p>
   </section>
 </template>
diff --git a/components/CvPreviewContact.vue b/components/CvPreviewContact.vue
@@ -1,33 +1,33 @@
 <script lang="ts" setup>
-import type { Cv } from '~/types/cvfy'
+import { useCvState } from '~/data/useCvState'
 
-const props = defineProps<Pick<Cv, 'email' | 'phoneNumber' | 'location' | 'layout'>>()
+const { formSettings } = useCvState()
 
 const emailHref = computed(() => {
-  return `mailto:${props.email}`
+  return `mailto:${formSettings.value.email}`
 })
 const phoneNumberHref = computed(() => {
-  return `tel:${props.phoneNumber}`
+  return `tel:${formSettings.value.phoneNumber}`
 })
 </script>
 
 <template>
   <section
     class="cv__section"
-    :class="layout === 'one-column' && 'mt-0'"
+    :class="formSettings.layout === 'one-column' && 'mt-0'"
   >
     <h4
       class="cv__section-title"
-      :class="[{ 'sr-only': layout === 'one-column' }]"
+      :class="[{ 'sr-only': formSettings.layout === 'one-column' }]"
     >
       {{ $t("contact") }}
     </h4>
     <div
       class="flex"
-      :class="layout === 'one-column' ? 'flex-wrap gap-2' : 'flex-col'"
+      :class="formSettings.layout === 'one-column' ? 'flex-wrap gap-2' : 'flex-col'"
     >
       <div
-        v-if="email"
+        v-if="formSettings.email"
         class="cv__icon-wrapper"
       >
         <svg class="cv__icon">
@@ -36,10 +36,10 @@ const phoneNumberHref = computed(() => {
         <a
           :href="emailHref"
           rel="noopener"
-        >{{ email }}</a>
+        >{{ formSettings.email }}</a>
       </div>
       <div
-        v-if="phoneNumber"
+        v-if="formSettings.phoneNumber"
         class="cv__icon-wrapper"
       >
         <svg class="cv__icon">
@@ -49,17 +49,17 @@ const phoneNumberHref = computed(() => {
           :href="phoneNumberHref"
           rel="noopener"
         >{{
-          phoneNumber
+          formSettings.phoneNumber
         }}</a>
       </div>
       <div
-        v-if="location"
+        v-if="formSettings.location"
         class="cv__icon-wrapper"
       >
         <svg class="cv__icon">
           <use href="@/assets/sprite.svg#location" />
         </svg>
-        <span tabindex="0">{{ location }}</span>
+        <span tabindex="0">{{ formSettings.location }}</span>
       </div>
     </div>
   </section>

diff --git a/components/CvPreviewEducation.vue b/components/CvPreviewEducation.vue
@@ -1,19 +1,22 @@
 <script lang="ts" setup>
-import type { Cv } from '~/types/cvfy'
 import useFormatDate from '~/composables/useFormatDate'
 import { orderEvents } from '~/utils/functions'
+import { useCvState } from '~/data/useCvState'
 
-const props = defineProps<Pick<Cv, 'education' | 'layout'>>()
+const { formSettings } = useCvState()
 
 const formatDate = useFormatDate()
 
 const educationSorted = computed(() => {
-  return orderEvents(props.education)
+  return orderEvents(formSettings.value.education)
 })
 </script>
 
 <template>
-  <section class="cv__section cv__section--main w-full">
+  <section
+    v-if="formSettings.displayEducation"
+    class="cv__section cv__section--main w-full"
+  >
     <h4 class="cv__section-title cv__section-title--main">
       {{ $t("education") }}
     </h4>

diff --git a/components/CvPreviewExperience.vue b/components/CvPreviewExperience.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import type { Cv } from '~/types/cvfy'
 import useFormatDate from '~/composables/useFormatDate'
 import { orderEvents } from '~/utils/functions'
+import { useCvState } from '~/data/useCvState'
 
-const props = defineProps<Pick<Cv, 'work' | 'layout'>>()
+const { formSettings } = useCvState()
 
 const formatDate = useFormatDate()
 
 const workSorted = computed(() => {
-  return orderEvents(props.work)
+  return orderEvents(formSettings.value.work)
 })
 </script>
 

diff --git a/components/CvPreviewLanguages.vue b/components/CvPreviewLanguages.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { Cv } from '~/types/cvfy'
+import { useCvState } from '~/data/useCvState'
 
-defineProps<Pick<Cv, 'languages'>>()
+const { formSettings } = useCvState()
 </script>
 
 <template>
@@ -11,7 +11,7 @@ defineProps<Pick<Cv, 'languages'>>()
     </h4>
     <ul>
       <li
-        v-for="lang in languages"
+        v-for="lang in formSettings.languages"
         :key="`preview${lang.lang}`"
         class="flex justify-between pr-4"
       >

diff --git a/components/CvPreviewName.vue b/components/CvPreviewName.vue
@@ -1,13 +1,11 @@
 <script lang="ts" setup>
-import type { Cv } from '~/types/cvfy'
+import { useCvState } from '~/data/useCvState'
 
-defineProps<Pick<Cv, 'name' | 'lastName'>>()
+const { formSettings } = useCvState()
 </script>
 
 <template>
-  <h2
-    class="text-primary text-xl/normal uppercase font-bold tracking-wide"
-  >
-    {{ name }} {{ lastName }}
+  <h2 class="text-primary text-xl/normal uppercase font-bold tracking-wide">
+    {{ formSettings.name }} {{ formSettings.lastName }}
   </h2>
 </template>
diff --git a/components/CvPreviewOneColumn.vue b/components/CvPreviewOneColumn.vue
@@ -1,75 +1,29 @@
 <script lang="ts" setup>
-import type { Cv } from '~/types/cvfy'
-
-defineProps<{ formSettings: Cv, isLoading: boolean }>()
 </script>
 
 <template>
   <div class="flex justify-between gap-1">
     <div class="flex flex-col gap-1 justify-between">
       <div class="flex flex-col justify-center">
-        <CvPreviewName
-          :name="formSettings.name"
-          :last-name="formSettings.lastName"
-        />
-        <CvPreviewTitle :job-title="formSettings.jobTitle" />
-        <CvPreviewAbout
-          class="mt-0"
-          :layout="formSettings.layout"
-          :aboutme="formSettings.aboutme"
-        />
+        <CvPreviewName />
+        <CvPreviewTitle />
+        <CvPreviewAbout class="mt-0" />
       </div>
       <div class="flex gap-2">
-        <CvPreviewContact
-          :layout="formSettings.layout"
-          :email="formSettings.email"
-          :phone-number="formSettings.phoneNumber"
-          :location="formSettings.location"
-        />
-        <CvPreviewSocial
-          :layout="formSettings.layout"
-          :linkedin="formSettings.linkedin"
-          :twitter="formSettings.twitter"
-          :website="formSettings.website"
-          :github="formSettings.github"
-          :display-social="formSettings.displaySocial"
-        />
+        <CvPreviewContact />
+        <CvPreviewSocial />
       </div>
     </div>
-    <CvProfileImageViewer
-      v-if="formSettings.profileImageDataUri"
-      class="rounded ml-2"
-      :profile-image-data-uri="formSettings.profileImageDataUri"
-    />
+    <CvProfileImageViewer class="rounded ml-2" />
   </div>
 
-  <CvPreviewSkills
-    :layout="formSettings.layout"
-    :job-skills="formSettings.jobSkills"
-    :display-job-skills="formSettings.displayJobSkills"
-    :soft-skills="formSettings.softSkills"
-    :display-soft-skills="formSettings.displaySoftSkills"
-    :languages="formSettings.languages"
-    :display-languages="formSettings.displayLanguages"
-    :interests="formSettings.interests"
-    :display-interests="formSettings.displayInterests"
-  />
+  <CvPreviewSkills />
 
-  <CvPreviewExperience
-    :layout="formSettings.layout"
-    :work="formSettings.work"
-  />
+  <CvPreviewExperience />
 
-  <CvPreviewEducation
-    v-if="formSettings.displayEducation"
-    :layout="formSettings.layout"
-    :education="formSettings.education"
-  />
+  <CvPreviewEducation />
 
-  <CvPreviewProjects
-    v-if="formSettings.displayProjects"
-    :projects="formSettings.projects"
-  />
+  <CvPreviewProjects />
 </template>
 
 <style lang="postcss" scoped>

diff --git a/components/CvPreviewProjects.vue b/components/CvPreviewProjects.vue
@@ -1,19 +1,22 @@
 <script lang="ts" setup>
-import type { Cv } from '~/types/cvfy'
 import useFormatDate from '~/composables/useFormatDate'
 import { orderEvents } from '~/utils/functions'
+import { useCvState } from '~/data/useCvState'
 
-const props = defineProps<Pick<Cv, 'projects'>>()
+const { formSettings } = useCvState()
 
 const projectsSorted = computed(() => {
-  return orderEvents(props.projects)
+  return orderEvents(formSettings.value.projects)
 })
 
 const formatDate = useFormatDate()
 </script>
 
 <template>
-  <section class="cv__section cv__section--main w-full">
+  <section
+    v-if="formSettings.displayProjects"
+    class="cv__section cv__section--main w-full"
+  >
     <h4 class="cv__section-title cv__section-title--main">
       {{ $t("projects") }}
     </h4>

diff --git a/components/CvPreviewSkill.vue b/components/CvPreviewSkill.vue
@@ -1,35 +1,36 @@
 <script lang="ts" setup>
-import type { Cv } from '~/types/cvfy'
+import { useCvState } from '~/data/useCvState'
 
 defineProps<{
   display?: boolean
   skills: string[]
   skillName: string
-  layout: Cv['layout']
   withTags?: boolean
 }>()
+
+const { formSettings } = useCvState()
 </script>
 
 <template>
   <section
     v-if="display"
     class="cv__section"
-    :class="layout === 'one-column' && 'flex gap-1 mb-1'"
+    :class="formSettings.layout === 'one-column' && 'flex gap-1 mb-1'"
   >
     <h3
       class="capitalize"
-      :class="layout === 'one-column' ? 'two-dots inline flex-shrink-0' : 'cv__section-title'"
+      :class="formSettings.layout === 'one-column' ? 'two-dots inline flex-shrink-0' : 'cv__section-title'"
     >
       {{ skillName }}
     </h3>
     <ul
       class="font-light"
-      :class="[{ 'flex flex-wrap': layout === 'one-column' }, { cv__list: layout !== 'one-column' && !withTags }, { cv__tags: withTags }]"
+      :class="[{ 'flex flex-wrap': formSettings.layout === 'one-column' }, { cv__list: formSettings.layout !== 'one-column' && !withTags }, { cv__tags: withTags }]"
     >
       <li
         v-for="skill in skills"
         :key="`preview${skill}`"
-        :class="[{ comma: layout === 'one-column' }, { cv__tag: withTags }]"
+        :class="[{ comma: formSettings.layout === 'one-column' }, { cv__tag: withTags }]"
       >
         {{ skill }}
       </li>