From d691d4b151a2cbaa285816777008aac165952170 Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Thu, 20 Apr 2023 09:12:44 +0200
Subject: [PATCH] feat(frontend): show favourite preferences in user and member
 page descriptions

---
 frontend/src/routes/@[username]/+page.svelte  | 30 +++++++++++++---
 .../@[username]/[memberName]/+page.svelte     | 35 +++++++++++++++----
 2 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/frontend/src/routes/@[username]/+page.svelte b/frontend/src/routes/@[username]/+page.svelte
index 6d7cb2c..07d072c 100644
--- a/frontend/src/routes/@[username]/+page.svelte
+++ b/frontend/src/routes/@[username]/+page.svelte
@@ -20,10 +20,12 @@
     MAX_MEMBERS,
     pronounDisplay,
     userAvatars,
-    WordStatus,
     type APIError,
     type Member,
     type PartialMember,
+    type CustomPreferences,
+    type FieldEntry,
+    type Pronoun,
   } from "$lib/api/entities";
   import { PUBLIC_BASE_URL } from "$env/static/public";
   import { apiFetchClient } from "$lib/api/fetch";
@@ -34,6 +36,7 @@
   import ProfileLink from "./ProfileLink.svelte";
   import { memberNameRegex } from "$lib/api/regex";
   import StatusLine from "$lib/components/StatusLine.svelte";
+  import defaultPreferences from "$lib/api/default_preferences";
 
   export let data: PageData;
 
@@ -84,8 +87,17 @@
     }
   };
 
-  const favNames = data.names.filter((entry) => entry.status === WordStatus.Favourite);
-  const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite);
+  let mergedPreferences: CustomPreferences;
+  $: mergedPreferences = Object.assign(defaultPreferences, data.custom_preferences);
+
+  let favNames: FieldEntry[];
+  $: favNames = data.names.filter(
+    (entry) => (mergedPreferences[entry.status] || { favourite: false }).favourite,
+  );
+  let favPronouns: Pronoun[];
+  $: favPronouns = data.pronouns.filter(
+    (entry) => (mergedPreferences[entry.status] || { favourite: false }).favourite,
+  );
 
   let profileEmpty = false;
   $: profileEmpty =
@@ -146,7 +158,11 @@
           <h3>Names</h3>
           <ul class="list-unstyled fs-5">
             {#each data.names as name}
-              <li><StatusLine preferences={data.custom_preferences} status={name.status}>{name.value}</StatusLine></li>
+              <li>
+                <StatusLine preferences={data.custom_preferences} status={name.status}
+                  >{name.value}</StatusLine
+                >
+              </li>
             {/each}
           </ul>
         </div>
@@ -156,7 +172,11 @@
           <h3>Pronouns</h3>
           <ul class="list-unstyled fs-5">
             {#each data.pronouns as pronouns}
-              <li><StatusLine preferences={data.custom_preferences} status={pronouns.status}><PronounLink {pronouns} /></StatusLine></li>
+              <li>
+                <StatusLine preferences={data.custom_preferences} status={pronouns.status}
+                  ><PronounLink {pronouns} /></StatusLine
+                >
+              </li>
             {/each}
           </ul>
         </div>
diff --git a/frontend/src/routes/@[username]/[memberName]/+page.svelte b/frontend/src/routes/@[username]/[memberName]/+page.svelte
index 7ef25d9..a90ff5e 100644
--- a/frontend/src/routes/@[username]/[memberName]/+page.svelte
+++ b/frontend/src/routes/@[username]/[memberName]/+page.svelte
@@ -2,25 +2,40 @@
   import FieldCard from "$lib/components/FieldCard.svelte";
 
   import type { PageData } from "./$types";
-  import StatusIcon from "$lib/components/StatusIcon.svelte";
   import PronounLink from "$lib/components/PronounLink.svelte";
   import FallbackImage from "$lib/components/FallbackImage.svelte";
   import { Alert, Button, Icon } from "sveltestrap";
-  import { memberAvatars, pronounDisplay, WordStatus } from "$lib/api/entities";
+  import {
+    memberAvatars,
+    pronounDisplay,
+    type CustomPreferences,
+    type FieldEntry,
+    type Pronoun,
+  } from "$lib/api/entities";
   import { PUBLIC_BASE_URL } from "$env/static/public";
   import { userStore } from "$lib/store";
   import { renderMarkdown } from "$lib/utils";
   import ReportButton from "../ReportButton.svelte";
   import ProfileLink from "../ProfileLink.svelte";
   import StatusLine from "$lib/components/StatusLine.svelte";
+  import defaultPreferences from "$lib/api/default_preferences";
 
   export let data: PageData;
 
   let bio: string | null;
   $: bio = renderMarkdown(data.bio);
 
-  const favNames = data.names.filter((entry) => entry.status === WordStatus.Favourite);
-  const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite);
+  let mergedPreferences: CustomPreferences;
+  $: mergedPreferences = Object.assign(defaultPreferences, data.user.custom_preferences);
+
+  let favNames: FieldEntry[];
+  $: favNames = data.names.filter(
+    (entry) => (mergedPreferences[entry.status] || { favourite: false }).favourite,
+  );
+  let favPronouns: Pronoun[];
+  $: favPronouns = data.pronouns.filter(
+    (entry) => (mergedPreferences[entry.status] || { favourite: false }).favourite,
+  );
 
   let profileEmpty = false;
   $: profileEmpty =
@@ -81,7 +96,11 @@
           <h3>Names</h3>
           <ul class="list-unstyled fs-5">
             {#each data.names as name}
-              <li><StatusLine preferences={data.user.custom_preferences} status={name.status}>{name.value}</StatusLine></li>
+              <li>
+                <StatusLine preferences={data.user.custom_preferences} status={name.status}
+                  >{name.value}</StatusLine
+                >
+              </li>
             {/each}
           </ul>
         </div>
@@ -91,7 +110,11 @@
           <h3>Pronouns</h3>
           <ul class="list-unstyled fs-5">
             {#each data.pronouns as pronouns}
-              <li><StatusLine preferences={data.user.custom_preferences} status={pronouns.status}><PronounLink {pronouns} /></StatusLine></li>
+              <li>
+                <StatusLine preferences={data.user.custom_preferences} status={pronouns.status}
+                  ><PronounLink {pronouns} /></StatusLine
+                >
+              </li>
             {/each}
           </ul>
         </div>