From 653239357874b24722ed8ce0abb1896224f6bb71 Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Mon, 27 Mar 2023 00:44:55 +0200
Subject: [PATCH] feat: show prompt to fill profile/members if profile/member
 list is empty

---
 frontend/src/routes/@[username]/+page.svelte  | 41 ++++++++++++++++---
 .../@[username]/[memberName]/+page.svelte     | 18 +++++++-
 2 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/frontend/src/routes/@[username]/+page.svelte b/frontend/src/routes/@[username]/+page.svelte
index 5d9c72e..265465f 100644
--- a/frontend/src/routes/@[username]/+page.svelte
+++ b/frontend/src/routes/@[username]/+page.svelte
@@ -83,6 +83,13 @@
 
   const favNames = data.names.filter((entry) => entry.status === WordStatus.Favourite);
   const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite);
+
+  let profileEmpty = false;
+  $: profileEmpty =
+    data.names.length === 0 &&
+    data.pronouns.length === 0 &&
+    data.fields.length === 0 &&
+    (!data.bio || data.bio.length === 0);
 </script>
 
 <div class="container">
@@ -106,7 +113,16 @@
         {:else}
           <h2>@{data.name}</h2>
         {/if}
-        {#if bio}
+        {#if profileEmpty && $userStore?.id === data.id}
+          <hr />
+          <p>
+            <em>
+              Your profile is empty! You can customize it by going to the <a href="/edit/profile"
+                >edit profile</a
+              > page.</em
+            > <span class="text-muted">(only you can see this)</span>
+          </p>
+        {:else if bio}
           <hr />
           <p>{@html bio}</p>
         {/if}
@@ -183,11 +199,24 @@
           </h2>
         </div>
       </div>
-      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 text-center">
-        {#each memberSlice as member}
-          <PartialMemberCard user={data} {member} />
-        {/each}
-      </div>
+      {#if data.members.length > 0}
+        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 text-center">
+          {#each memberSlice as member}
+            <PartialMemberCard user={data} {member} />
+          {/each}
+        </div>
+      {:else}
+        <div>
+          <p>
+            You don't have any members yet.
+            <br />
+            Members are sub-profiles that can have their own avatar,
+            names, pronouns, and preferred terms. <span class="text-muted"
+              >(only you can see this)</span
+            >
+          </p>
+        </div>
+      {/if}
     {/if}
     <Modal header="Create member" isOpen={modalOpen} toggle={toggleModal}>
       <ModalBody>
diff --git a/frontend/src/routes/@[username]/[memberName]/+page.svelte b/frontend/src/routes/@[username]/[memberName]/+page.svelte
index 70865d8..ff064ef 100644
--- a/frontend/src/routes/@[username]/[memberName]/+page.svelte
+++ b/frontend/src/routes/@[username]/[memberName]/+page.svelte
@@ -20,6 +20,13 @@
 
   const favNames = data.names.filter((entry) => entry.status === WordStatus.Favourite);
   const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite);
+
+  let profileEmpty = false;
+  $: profileEmpty =
+    data.names.length === 0 &&
+    data.pronouns.length === 0 &&
+    data.fields.length === 0 &&
+    (!data.bio || data.bio.length === 0);
 </script>
 
 <div class="container">
@@ -43,7 +50,16 @@
       <div class="col-md">
         <h2>{data.display_name ?? data.name}</h2>
         <h5 class="text-body-secondary">{data.name} (@{data.user.name})</h5>
-        {#if bio}
+        {#if profileEmpty && $userStore?.id === data.user.id}
+          <hr />
+          <p>
+            <em>
+              This member's profile is empty! You can customize it by going to the <a
+                href="/edit/member/{data.id}">edit member</a
+              > page.</em
+            > <span class="text-muted">(only you can see this)</span>
+          </p>
+        {:else if bio}
           <hr />
           <p>{@html bio}</p>
         {/if}