Merge pull request #51 from web3privacy/dw/bug-fixes

Project publish fix

components/Project/Create/Components/DatePicker.vue

@@ -78,20 +78,20 @@ const days = computed(() => {
       >
         <ProjectCreateComponentsSelect
           v-model="day"
-          class="lg:w-full!"
+          class="w-full!"
           :options="days.map(day => ({ label: day.toString(), value: day }))"
           placeholder="Day"
         />
         <ProjectCreateComponentsSelect
           v-model="month"
-          class="lg:w-full!"
+          class="w-full!"
           ml--2px
           :options="months.map(month => ({ label: month.label, value: month.value }))"
           placeholder="Month"
         />
         <ProjectCreateComponentsSelect
           v-model="year"
-          class="lg:w-full!"
+          class="w-full!"
           ml--2px
           :options="years.map(year => ({ label: year.toString(), value: year }))"
           placeholder="Year"

composables/useProject.ts

@@ -4,12 +4,10 @@ import type { Project } from '~/types'
 export const useProject = defineStore('project', () => {
   const project = ref<Partial<Project>>()
   const projectImage = ref<File>()
-  const isPublishing = ref(false)
 
   const { getProjectById } = useData()
 
   function setProject(id: string) {
-    clearProject()
     project.value = getProjectById(id, { shallow: false }) as Project
     delete project.value.ratings
   }
@@ -30,7 +28,6 @@ export const useProject = defineStore('project', () => {
   }
 
   async function publishProject() {
-    isPublishing.value = true
     try {
       let imageBuffer: Buffer | undefined
       let base64Image: string | undefined
@@ -58,14 +55,10 @@ export const useProject = defineStore('project', () => {
     catch (e) {
       console.error(e)
     }
-    finally {
-      isPublishing.value = false
-    }
   }
 
   return {
     project,
-    isPublishing,
     setProject,
     clearProject,
     saveProject,

composables/useProjectForm.ts

@@ -11,11 +11,10 @@ import ProjectCreateCategoriesHistory from '~/components/Project/Create/Categori
 
 export const useProjectForm = defineStore('useProjectForm', () => {
   const { saveProject, publishProject } = useProject()
-  const { project, isPublishing } = storeToRefs(useProject())
+  const { project } = storeToRefs(useProject())
 
   const isEditingName = ref(false)
   const { value: name, errorMessage: nameError } = useField<string>('name', yup.string().required().notOneOf(['Untitled', 'Undefined', 'Create', 'create']))
-  name.value = project.value?.name || 'Untitled'
 
   function toggleEditName() {
     isEditingName.value = !isEditingName.value
@@ -45,10 +44,9 @@ export const useProjectForm = defineStore('useProjectForm', () => {
   const currentComponent = ref()
 
   async function next() {
-    if (selectedTab.value === 0) {
-      if (!(await currentComponent.value.isFormValid()) || nameError.value)
-        return
-    }
+    const isFormValid = selectedTab.value === 0 ? await currentComponent.value.isFormValid() : true
+    if (!isFormValid || nameError.value)
+      return
 
     saveName()
     currentComponent.value.save()
@@ -59,12 +57,9 @@ export const useProjectForm = defineStore('useProjectForm', () => {
   }
 
   async function jumpTo(index: number) {
-    if (selectedTab.value === 0) {
-      if (!(await currentComponent.value.isFormValid()) || nameError.value)
-        return
-      if (nameError.value)
-        return
-      else saveName()
+    const isFormValid = selectedTab.value === 0 ? await currentComponent.value.isFormValid() : true
+    if (!isFormValid || nameError.value) {
+      return
     }
 
     saveName()
@@ -73,25 +68,29 @@ export const useProjectForm = defineStore('useProjectForm', () => {
     selectedTab.value = index
   }
 
+  const isPublishing = ref(false)
   async function publish(isNew?: boolean) {
-    if (selectedTab.value === 0) {
-      if (!(await currentComponent.value.isFormValid()) || nameError.value)
-        return
-    }
-    else if (isPublishing) {
+    isPublishing.value = true
+    const isFormValid = selectedTab.value === 0 ? await currentComponent.value.isFormValid() : true
+    if (!isFormValid || nameError.value)
       return
-    }
 
     saveName()
     currentComponent.value?.save()
 
     await publishProject()
+    isPublishing.value = false
     if (isNew)
       navigateTo('/')
     else
       navigateTo(`/project/${project.value?.id || project.value?.name?.toLowerCase().replace(/\s+/g, '-')}`)
   }
 
+  function initForm() {
+    selectedTab.value = 0
+    name.value = 'Untitled'
+  }
+
   return {
     isEditingName,
     name,
@@ -104,5 +103,7 @@ export const useProjectForm = defineStore('useProjectForm', () => {
     next,
     publish,
     jumpTo,
+    isPublishing,
+    initForm,
   }
 })

pages/project/[id]/edit.vue

@@ -5,10 +5,12 @@ definePageMeta({
 
 const { projects } = useData()
 const { setProject, saveProjectImage } = useProject()
-const { project, isPublishing } = storeToRefs(useProject())
+const { project } = storeToRefs(useProject())
+const { initForm } = useProjectForm()
 
 const route = useRoute()
 await until(projects).toMatch(p => p?.length > 0)
+initForm()
 setProject(route.params.id as string)
 
 if (!project.value) {
@@ -38,7 +40,7 @@ onChange((files) => {
 })
 
 const { next, jumpTo, publish, toggleEditName } = useProjectForm()
-const { currentComponent, selectedTab, tabsArray, isEditingName, name, nameError } = storeToRefs(useProjectForm())
+const { currentComponent, selectedTab, tabsArray, isEditingName, name, nameError, isPublishing } = storeToRefs(useProjectForm())
 name.value = project.value?.name || 'Untitled'
 
 const projectNameInput = ref<HTMLInputElement | null>(null)
@@ -299,7 +301,7 @@ const transitionDone = ref(false)
             w-full
             lg="w-fit"
             inverted-color
-            @click="publish()"
+            @click="isPublishing ? null : publish()"
           >
             <UnoIcon
               v-if="isPublishing"

pages/project/create.vue

@@ -3,8 +3,8 @@ definePageMeta({
   layout: 'create',
 })
 
-const { saveProjectImage } = useProject()
-const { project, isPublishing } = storeToRefs(useProject())
+const { saveProjectImage, clearProject } = useProject()
+const { project } = storeToRefs(useProject())
 
 const { open, onChange } = useFileDialog({
   accept: 'image/*', // Set to accept only image files
@@ -24,8 +24,8 @@ onChange((files) => {
   saveProjectImage(file)
 })
 
-const { next, jumpTo, publish, toggleEditName } = useProjectForm()
-const { currentComponent, selectedTab, tabsArray, isEditingName, name, nameError } = storeToRefs(useProjectForm())
+const { next, jumpTo, publish, toggleEditName, initForm } = useProjectForm()
+const { currentComponent, selectedTab, tabsArray, isEditingName, name, nameError, isPublishing } = storeToRefs(useProjectForm())
 
 const projectNameInput = ref<HTMLInputElement | null>(null)
 watch(isEditingName, () => {
@@ -37,6 +37,11 @@ watch(isEditingName, () => {
 })
 
 const transitionDone = ref(false)
+
+onBeforeMount(() => {
+  clearProject()
+  initForm()
+})
 </script>
 
 <template>
@@ -284,7 +289,7 @@ const transitionDone = ref(false)
             w-full
             lg="w-fit"
             inverted-color
-            @click="publish(true)"
+            @click="isPublishing ? null : publish(true)"
           >
             <UnoIcon
               v-if="isPublishing"