From 75b18759d6044d474d553697ef301ed6f294305c Mon Sep 17 00:00:00 2001
From: Valentyne Stigloher <pixunil@posteo.eu>
Date: Wed, 16 Oct 2024 11:06:46 +0200
Subject: [PATCH] (refactor) accept pronoun usages by string in <PronounGroup>

---
 components/PronounGroup.vue      | 26 ++++++++----------------
 components/SimplePronounList.vue | 35 +++++++++++++++++++-------------
 pages/pronouns/any.vue           |  3 ++-
 pages/pronouns/ask.vue           | 17 +---------------
 pages/pronouns/pronoun.vue       |  6 +++++-
 5 files changed, 38 insertions(+), 49 deletions(-)

diff --git a/components/PronounGroup.vue b/components/PronounGroup.vue
index 6347dc662..73108637d 100644
--- a/components/PronounGroup.vue
+++ b/components/PronounGroup.vue
@@ -1,32 +1,24 @@
 <script setup lang="ts">
 import type { PronounGroup, Pronoun } from '~/src/classes.ts';
 
-const props = defineProps<{
-    pronounGroup: { group: PronounGroup, groupPronouns: Record<string, Pronoun> | Pronoun[] };
+defineProps<{
+    pronounGroup?: PronounGroup;
+    pronouns: Record<string, Pronoun> | Pronoun[] | string[];
 }>();
-
-const pronouns = computed(() => {
-    if (Array.isArray(props.pronounGroup.groupPronouns)) {
-        return props.pronounGroup.groupPronouns;
-    }
-    return Object.values(props.pronounGroup.groupPronouns);
-});
 </script>
 
 <template>
-    <section v-if="pronounGroup && pronounGroup.group.name">
+    <section>
         <ul class="list-group mt-4">
             <li class="list-group-item">
-                <p class="h5">
-                    <Spelling :text="pronounGroup.group.name" />
+                <p v-if="pronounGroup?.name" class="h5">
+                    <Spelling :text="pronounGroup.name" />
                 </p>
-                <p v-if="pronounGroup.group.description" class="small my-1">
+                <p v-if="pronounGroup?.description" class="small my-1">
                     <Icon v="info-circle" />
-                    <LinkedText :text="pronounGroup.group.description" />
+                    <LinkedText :text="pronounGroup.description" />
                 </p>
-                <ul class="list-unstyled">
-                    <SimplePronounList :pronouns="pronouns" />
-                </ul>
+                <SimplePronounList :pronouns="Array.isArray(pronouns) ? pronouns : Object.values(pronouns)" />
             </li>
             <nuxt-link :to="{ name: 'pronouns' }" class="list-group-item list-group-item-action text-center">
                 <Icon v="ellipsis-h-alt" />
diff --git a/components/SimplePronounList.vue b/components/SimplePronounList.vue
index d8a78cbc4..11091054f 100644
--- a/components/SimplePronounList.vue
+++ b/components/SimplePronounList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { buildPronoun } from '~/src/buildPronoun.ts';
+import { buildPronounUsage } from '~/src/buildPronoun.ts';
 import type { Pronoun } from '~/src/classes.ts';
-import { pronouns as pronounsData } from '~/src/data.ts';
+import { pronounLibrary } from '~/src/data.ts';
 
 const props = defineProps<{
     pronouns: Pronoun[] | string[];
@@ -10,25 +10,32 @@ const props = defineProps<{
 const { $translator: translator } = useNuxtApp();
 const config = useConfig();
 
+const glue = ` ${translator.translate('pronouns.or')} `;
+
 const visiblePronouns = computed(() => {
     return props.pronouns
-        .map((pronoun): Pronoun | undefined => {
+        .map((pronoun) => {
             if (typeof pronoun === 'string') {
-                const parsed = buildPronoun(pronounsData, pronoun, config, translator);
-                if (parsed) {
-                    parsed.canonicalName = pronoun;
-                    parsed.description = '';
-                    return parsed;
+                const usage = buildPronounUsage(pronounLibrary, pronoun, config, translator);
+                if (usage) {
+                    return {
+                        path: pronoun,
+                        short: usage.short.options.join(usage.short.glue),
+                    };
                 }
             } else if (!pronoun.hidden) {
-                return pronoun;
+                return {
+                    path: pronoun.canonicalName,
+                    short: pronoun.name(glue),
+                    description: pronoun.description,
+                    normative: pronoun.normative,
+                    smallForm: pronoun.smallForm ? pronoun.morphemes[pronoun.smallForm] : undefined,
+                };
             }
         })
         .filter((entry) => entry !== undefined);
 });
 
-const glue = ` ${translator.translate('pronouns.or')} `;
-
 const addSlash = (link: string): string => {
     return link + (['*', '\''].includes(link.substring(link.length - 1)) ? '/' : '');
 };
@@ -36,9 +43,9 @@ const addSlash = (link: string): string => {
 
 <template>
     <ul>
-        <li v-for="pronoun in visiblePronouns" :key="pronoun.canonicalName">
-            <nuxt-link :to="addSlash(`${config.pronouns.prefix || ''}/${pronoun.canonicalName}`)">
-                <strong><Spelling :text="pronoun.name(glue)" /></strong><small v-if="pronoun.smallForm">/<Spelling :text="pronoun.morphemes[pronoun.smallForm] ?? undefined" /></small>
+        <li v-for="pronoun in visiblePronouns" :key="pronoun.path">
+            <nuxt-link :to="addSlash(`${config.pronouns.prefix || ''}/${pronoun.path}`)">
+                <strong><Spelling :text="pronoun.short" /></strong><small v-if="pronoun.smallForm">/<Spelling :text="pronoun.smallForm" /></small>
                 <template v-if="pronoun.description">
                     –
                     <small><Spelling :text="pronoun.description as string" /></small>
diff --git a/pages/pronouns/any.vue b/pages/pronouns/any.vue
index 86bb7b629..d6cbc8b2d 100644
--- a/pages/pronouns/any.vue
+++ b/pages/pronouns/any.vue
@@ -127,7 +127,8 @@ const pronounsChoice = computed(() => {
             <PronounGroup
                 v-for="pronounGroup in pronounGroups"
                 :key="pronounGroup.group.name"
-                :pronoun-group="pronounGroup"
+                :pronoun-group="pronounGroup.group"
+                :pronouns="pronounGroup.groupPronouns"
             />
 
             <AdPlaceholder :phkey="['content-0', 'content-mobile-0']" />
diff --git a/pages/pronouns/ask.vue b/pages/pronouns/ask.vue
index 5f290f0de..54a171250 100644
--- a/pages/pronouns/ask.vue
+++ b/pages/pronouns/ask.vue
@@ -57,22 +57,7 @@ useSimpleHead({
 
         <AdPlaceholder :phkey="['content-0', 'content-mobile-0']" />
 
-        <section>
-            <ul class="list-group mt-4">
-                <li class="list-group-item">
-                    <ul>
-                        <li v-for="otherVariant in config.pronouns.ask.routes" :key="otherVariant">
-                            <nuxt-link :to="{ name: `pronouns-${otherVariant}` }">
-                                <strong><T>pronouns.ask.short.{{ otherVariant }}</T></strong>
-                            </nuxt-link>
-                        </li>
-                    </ul>
-                </li>
-                <nuxt-link :to="{ name: 'pronouns' }" class="list-group-item list-group-item-action text-center">
-                    <Icon v="ellipsis-h-alt" />
-                </nuxt-link>
-            </ul>
-        </section>
+        <PronounGroup :pronouns="config.pronouns.ask.routes" />
 
         <section>
             <Share :title="`${$t('pronouns.intro')}: ${$t('pronouns.ask.description')}`" />
diff --git a/pages/pronouns/pronoun.vue b/pages/pronouns/pronoun.vue
index d10b00eb1..67cd6f45b 100644
--- a/pages/pronouns/pronoun.vue
+++ b/pages/pronouns/pronoun.vue
@@ -97,7 +97,11 @@
 
             <AdPlaceholder :phkey="['content-1', 'content-mobile-1']" />
 
-            <PronounGroup :pronoun-group="pronounGroup" />
+            <PronounGroup
+                v-if="pronounGroup"
+                :pronoun-group="pronounGroup.group"
+                :pronouns="pronounGroup.groupPronouns"
+            />
 
             <Avoiding v-if="isNull" />