whattheduck: Cleanup

apps/web/src/App.vue

@@ -26,11 +26,11 @@ getCurrentInstance()!.appContext.app.provide(
     },
   }),
 );
-console.log("provided");
+
 const { loadUser } = collection();
 const { isLoadingUser, user } = storeToRefs(collection());
 
-// loadUser();
+loadUser();
 </script>
 
 <style lang="scss">

apps/web/src/components/BookcasePopover.vue

@@ -4,7 +4,7 @@
     <template #content>
       <Bookcase
         :bookcase-textures="bookcaseTextures"
-        :sorted-bookcase="issuecodes"
+        :sorted-bookcase="issuecodes.map((issuecode) => ({ issuecode }))"
         embedded
       />
       <b-row>

apps/web/src/components/IssueList.story.vue

@@ -16,7 +16,7 @@ import dayjs from "dayjs";
 
 import type { issue } from "~prisma-schemas/schemas/dm";
 
-const customIssues: issue[] = [
+const customIssues: (issue & { issuecode: string })[] = [
   {
     id: 167808,
     publicationcode: "fr/MP",

apps/web/src/components/IssueList.vue

@@ -399,9 +399,13 @@ switch (contextMenuComponentName) {
     break;
 }
 
-const { fetchPublicationNames, fetchIssueNumbersWithTitles } = coa();
-const { publicationNames, coverUrls, issuesWithTitles, issuecodeDetails } =
-  storeToRefs(coa());
+const { fetchPublicationNames, fetchIssuecodesByPublicationcode } = coa();
+const {
+  publicationNames,
+  coverUrls,
+  issuecodesByPublicationcode,
+  issuecodeDetails,
+} = storeToRefs(coa());
 
 let hoveredIndex = $ref<number | null>(null);
 let loading = $ref(true);
@@ -470,7 +474,9 @@ const publicationName = $computed(
   () => publicationNames.value[publicationcode],
 );
 const isTouchScreen = window.matchMedia("(pointer: coarse)").matches;
-const coaIssues = $computed(() => issuesWithTitles.value[publicationcode]);
+const coaIssuecodes = $computed(
+  () => issuecodesByPublicationcode.value[publicationcode],
+);
 const filteredIssues = $computed(
   () =>
     issues
@@ -580,29 +586,27 @@ const loadIssues = async () => {
         ).dbValue,
       }));
 
-    await fetchIssueNumbersWithTitles([publicationcode]);
+    await fetchIssuecodesByPublicationcode([publicationcode]);
 
     if (groupUserCopies) {
-      issues = coaIssues.map((issue) => ({
-        ...issue,
+      issues = coaIssuecodes.map((issuecode) => ({
+        issuecode,
         userCopies: userIssuesForPublication!
-          .filter(
-            ({ issuecode: userIssuecode }) => userIssuecode === issue.issuecode,
-          )
+          .filter(({ issuecode: userIssuecode }) => userIssuecode === issuecode)
           .map((issue, copyIndex) => ({
             ...issue,
             copyIndex,
           })),
-        key: issue.issuecode,
+        key: issuecode,
       }));
     } else {
       const userIssuecodes = [
         ...new Set(userIssuesForPublication!.map(({ issuecode }) => issuecode)),
       ];
-      issues = coaIssues
-        .filter(({ issuecode }) => userIssuecodes.includes(issuecode))
+      issues = coaIssuecodes
+        .filter((issuecode) => userIssuecodes.includes(issuecode))
         .reduce<issueWithCopies[]>(
-          (acc, { issuecode }) => [
+          (acc, issuecode) => [
             ...acc,
             ...userIssuesForPublication!
               .filter(
@@ -646,9 +650,6 @@ const loadIssues = async () => {
       );
     }
 
-    const coaIssuecodes = issuesWithTitles.value[publicationcode].map(
-      ({ issuecode }) => issuecode,
-    );
     userIssuecodesNotFoundForPublication = userIssuesForPublication!
       .filter(({ issuecode }) => !coaIssuecodes.includes(issuecode))
       .map(({ issuecode }) => issuecode);

apps/web/src/stores/coa.ts

@@ -53,12 +53,11 @@ export const coa = defineStore("coa", () => {
       CoaServices["getAuthorList"]
     > | null>(null),
     issuecodes = ref<string[]>([]),
-    issuesWithTitles = ref<EventReturnType<CoaServices["getIssuesWithTitles"]>>(
-      {},
-    ),
     issueDetails = ref<{ [issuecode: string]: InducksIssueDetails }>({}),
     isLoadingCountryNames = ref(false),
-    issuecodeDetails = ref<EventReturnType<CoaServices["getIssues"]>>({}),
+    issuecodeDetails = ref<
+      Exclude<EventReturnType<CoaServices["getIssues"]>, "error">
+    >({}),
     issuePopularities = ref<
       EventReturnType<CoaServices["getIssuePopularities"]>
     >({}),
@@ -171,26 +170,19 @@ export const coa = defineStore("coa", () => {
         })
       );
     },
-    fetchIssueNumbersWithTitles = async (publicationcodes: string[]) => {
-      const results = await coaServices.getIssuesWithTitles(
-        publicationcodes.filter(
-          (publicationcode) =>
-            !Object.keys(issuesWithTitles.value).includes(publicationcode),
-        ),
-      );
-      Object.assign(issuesWithTitles.value, results);
-    },
-    fetchIssuecodeDetails = async (issuecodes: string[]) => {
-      const existingIssuecodes = new Set(
-        Object.keys(issuecodeDetails.value || {}),
-      );
-      const newIssuecodes = issuecodes.filter(
-        (issuecode) => !existingIssuecodes.has(issuecode),
+    fetchIssuecodeDetails = async (
+      issuecodes: string[],
+      withTitles: boolean = false,
+    ) => {
+      const newIssuecodes = issuecodes.filter((issuecode) =>
+        withTitles
+          ? !("title" in (issuecodeDetails.value[issuecode] || {}))
+          : !issuecodeDetails.value[issuecode],
       );
       if (newIssuecodes.length) {
         Object.assign(
           issuecodeDetails.value,
-          await coaServices.getIssues(newIssuecodes),
+          await coaServices.getIssues(newIssuecodes, withTitles),
         );
       }
     },
@@ -274,7 +266,6 @@ export const coa = defineStore("coa", () => {
     fetchCoverUrlsByIssuecodes,
     fetchIssuecodeDetails,
     fetchIssuecodesByPublicationcode,
-    fetchIssueNumbersWithTitles,
     fetchIssuePopularities,
     fetchIssueQuotations,
     fetchIssueUrls,
@@ -291,7 +282,6 @@ export const coa = defineStore("coa", () => {
     issuePopularities: issuePopularities,
     issuecodes,
     issueQuotations,
-    issuesWithTitles,
     personNames,
     publicationNames,
     publicationNamesFullCountries,

apps/whattheduck/src/components/Collection.vue

@@ -26,7 +26,7 @@
         >
       </ion-toolbar>
       <Navigation v-if="!isCameraPreviewShown" />
-      <template v-if="list?.hasItems && !isCameraPreviewShown">
+      <template v-if="(list?.hasItems || filterText || currentFilter.id !== 'all') && !isCameraPreviewShown">
         <ion-searchbar inputmode="text" autocapitalize="sentences" v-model="filterText" placeholder="Filter" />
         <FilterButton v-if="filterText.length < 1" />
       </template>
@@ -54,13 +54,21 @@ const { t } = useI18n();
 const list = ref<InstanceType<typeof CountryList | typeof PublicationList | typeof IssueList> | null>(null);
 
 const { total, ownedCountries, ownedPublications } = storeToRefs(wtdcollection());
-const { filterText, isCoaView, isCameraPreviewShown, countrycode, publicationcode, issuecodes, currentNavigationItem } =
-  storeToRefs(app());
+const {
+  filterText,
+  isCoaView,
+  isCameraPreviewShown,
+  countrycode,
+  publicationcode,
+  issuecodes,
+  currentNavigationItem,
+  currentFilter,
+} = storeToRefs(app());
 
 const { issuecodeDetails } = storeToRefs(coa());
 
 const componentName = computed(() =>
-  !currentNavigationItem.value
+  currentNavigationItem.value.type === 'all'
     ? CountryList
     : currentNavigationItem.value.type === 'countrycode'
       ? PublicationList
@@ -83,7 +91,7 @@ const backToCollection = () => {
       if (ownedCountries.value?.includes(countrycode.value!)) {
         currentNavigationItem.value = { type: 'countrycode', value: countrycode.value! };
       } else {
-        currentNavigationItem.value = null;
+        currentNavigationItem.value = { type: 'all', value: 'all' };
       }
     }
   }

apps/whattheduck/src/components/Navigation.vue

@@ -1,13 +1,19 @@
 <template>
-  <ion-segment :model-value="currentNavigationItem?.type">
+  <ion-segment
+    :model-value="JSON.stringify(shownParts[shownParts.length - 1])"
+    @update:model-value="currentNavigationItem = JSON.parse($event)"
+  >
     <ion-col
       @click.stop="() => {}"
       :class="{ 'non-clickable': partIdx >= shownParts.length, scrollable: partIdx === 3 }"
       :size="[1, maxParts].includes(partIdx) ? '2' : '4'"
       v-for="partIdx in maxParts"
       v-show="partIdx <= shownParts.length"
     >
-      <ion-segment-button :value="shownParts[partIdx - 1]?.type" @click="">
+      <ion-segment-button
+        :value="JSON.stringify(shownParts[partIdx - 1])"
+        @click="currentNavigationItem = shownParts[partIdx] as typeof currentNavigationItem"
+      >
         <globe-icon v-if="partIdx === 1" />
         <Country
           v-if="partIdx === 2 && countrycode"
@@ -47,14 +53,14 @@ const { countryNames, publicationNames } = storeToRefs(stores.coa());
 const maxParts = 4;
 
 const shownParts = computed(() => [
-  null,
-  ...Object.entries({
+  { type: 'all', value: 'all' },
+  ...(Object.entries({
     countrycode: countrycode.value,
     publicationcode: publicationcode.value,
     issuecodes: issuecodes.value,
   })
     .map(([type, value]) => (value ? { type, value } : null))
-    .filter(Boolean),
+    .filter(Boolean) as (typeof currentNavigationItem)['value'][]),
 ]);
 </script>
 

apps/whattheduck/src/components/OwnedIssueCopies.vue

@@ -85,8 +85,9 @@ watch(
   issuecodes,
   async (newValue) => {
     if (newValue) {
-      const covers = await fetchCoverUrlsByIssuecodes(newValue);
-      fullUrl.value = covers.covers![newValue[0]]?.fullUrl;
+      const newIssuecodes = [...newValue];
+      const covers = await fetchCoverUrlsByIssuecodes(newIssuecodes);
+      fullUrl.value = covers.covers![newIssuecodes[0]]?.fullUrl;
     }
   },
   { immediate: true },

apps/whattheduck/src/stores/app.ts

@@ -34,15 +34,17 @@ export const app = defineStore('app', () => {
   const isCameraPreviewShown = ref(false);
 
   const currentNavigationItem = ref<
-    null | { type: 'countrycode' | 'publicationcode'; value: string } | { type: 'issuecodes'; value: string[] }
-  >(null);
+    | { type: 'all'; value: 'all' }
+    | { type: 'countrycode' | 'publicationcode'; value: string }
+    | { type: 'issuecodes'; value: string[] }
+  >({ type: 'all', value: 'all' });
 
   watch(
     () => route.hash,
     (newValue) => {
       const parts = newValue.replace('#', '').replaceAll('_', ' ').split('=');
       if (parts.length === 1) {
-        currentNavigationItem.value = null;
+        currentNavigationItem.value = { type: 'all', value: 'all' };
       } else {
         const [type, value] = parts as ['countrycode' | 'publicationcode' | 'issuecodes', string];
         if (type === 'issuecodes') {

apps/whattheduck/src/theme/global.scss

@@ -131,4 +131,8 @@ ion-checkbox {
 
 .searchbar-clear-button { 
    right: 1.5rem !important;
+}
+
+.flex {
+  display: flex !important
 }

apps/whattheduck/src/views/About.vue

@@ -1,27 +1,27 @@
 <template>
   <ion-page>
-    <ion-header>
-      <ion-title>{{ t('A propos') }}</ion-title>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button color="primary" />
+        </ion-buttons>
+        <ion-title>{{ t('A propos') }}</ion-title>
+      </ion-toolbar>
     </ion-header>
-    <ion-content>
-      <ion-item>{{ t('What The Duck version {version}', { version: getCurrentAppVersion() }) }}</ion-item>
-      <ion-item class="flex">
-        <ion-item>
-          <a :href="discordUrl"><img src="/icons/discord.png" /></a>
-        </ion-item>
-        <ion-item>
-          <a :href="facebookUrl"><img src="/icons/facebook.png" /></a>
-        </ion-item>
-        <ion-item>
-          <a :href="instagramUrl"><img src="/icons/instagram.png" /></a>
-        </ion-item>
-        <ion-item>
-          <a :href="youtubeUrl"><img src="/icons/youtube.png" /></a>
-        </ion-item>
-      </ion-item>
-      <ion-item style="border-bottom: 1px solid white">
-        {{ t('Notez What The Duck sur le Play Store :-)') }}
-      </ion-item>
+    <ion-content v-if="currentAppVersion">
+      <div>
+        <b>{{ t('What The Duck version {version}', { version: currentAppVersion }) }}</b>
+      </div>
+      <div>
+        <a :href="discordUrl"><img src="/icons/discord.png" /></a>
+        <a :href="facebookUrl"><img src="/icons/facebook.png" /></a>
+        <a :href="dmUrl"><img src="/icons/ducksmanager.png" /></a>
+        <a :href="instagramUrl"><img src="/icons/instagram.png" /></a>
+        <a :href="youtubeUrl"><img src="/icons/youtube.png" /></a>
+      </div>
+      <ion-button id="link-to-dm" expand="full" color="white" @click.prevent="() => {}">
+        <a :href="playStoreUrl"> {{ t("Notez What The Duck sur le Play Store si vous appréciez l'utiliser :-)") }}</a>
+      </ion-button>
     </ion-content></ion-page
   >
 </template>
@@ -32,17 +32,39 @@ import { AppUpdate } from '@capawesome/capacitor-app-update';
 
 const { t } = useI18n();
 
-const getCurrentAppVersion = async () => {
-  const result = await AppUpdate.getAppUpdateInfo();
-  if (Capacitor.getPlatform() === 'android') {
-    return result.currentVersionCode;
-  } else {
-    return result.currentVersionName;
-  }
-};
+const dmUrl = 'https://ducksmanager.net';
+const playStoreUrl = 'https://play.google.com/store/apps/details?id=net.ducksmanager.whattheduck';
+
+const currentAppVersion = ref<string | null>(null);
+
+AppUpdate.getAppUpdateInfo()
+  .then((result) => {
+    if (Capacitor.getPlatform() === 'android') {
+      currentAppVersion.value = result.currentVersionCode;
+    } else {
+      currentAppVersion.value = result.currentVersionName;
+    }
+  })
+  .catch(() => {
+    currentAppVersion.value = 'web';
+  });
 
 const discordUrl = import.meta.env.VITE_DISCORD_URL;
 const facebookUrl = import.meta.env.VITE_FACEBOOK_URL;
 const instagramUrl = import.meta.env.VITE_INSTAGRAM_URL;
 const youtubeUrl = import.meta.env.VITE_YOUTUBE_URL;
 </script>
+
+<style lang="scss" scoped>
+ion-content::part(scroll) {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+div {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+</style>