From 82e1a4ca5da59c17b3d694f28e61d9e98e4b8e62 Mon Sep 17 00:00:00 2001
From: nicolas-arnaud <nicolas.rr.arnaud@gmail.com>
Date: Thu, 23 Mar 2023 17:20:42 +0100
Subject: [PATCH] open profile after login; use appStates for profiles and
 histories

---
 back/src/auth/auth.controller.ts         |  2 +-
 front/src/App.svelte                     | 39 ++++++------
 front/src/components/Channels.svelte     |  4 +-
 front/src/components/Chat.svelte         |  6 +-
 front/src/components/Friends.svelte      |  8 +--
 front/src/components/MatchHistory.svelte | 41 +++++++-----
 front/src/components/Profile.svelte      | 81 +++++++++++++-----------
 7 files changed, 100 insertions(+), 81 deletions(-)

diff --git a/back/src/auth/auth.controller.ts b/back/src/auth/auth.controller.ts
index a0ea023..eabdd6d 100644
--- a/back/src/auth/auth.controller.ts
+++ b/back/src/auth/auth.controller.ts
@@ -42,7 +42,7 @@ export class AuthController {
 
   @Get('inReturn')
   @UseGuards(FtOauthGuard)
-  @Redirect(`http://${frontHost}:${frontPort}`)
+  @Redirect(`http://${frontHost}:${frontPort}/profile`)
   ftAuthCallback (
     @Res({ passthrough: true }) response: Response,
       @Req() request: Request
diff --git a/front/src/App.svelte b/front/src/App.svelte
index 5fe3a52..767d56a 100644
--- a/front/src/App.svelte
+++ b/front/src/App.svelte
@@ -3,13 +3,11 @@
     HOME = "/",
     PROFILE = "/profile",
     HISTORY = "/history",
-    HISTORY_ID = "/history_id",
     FRIENDS = "/friends",
     CHANNELS = "/channels",
     LEADERBOARD = "/leaderboard",
     CREATE_GAME = "/create-game",
     MATCHMAKING = "/matchmaking",
-    PROFILE_ID = "/profile_id",
   }
 </script>
 
@@ -90,7 +88,10 @@
   }
 
   onMount(() => {
-    history.replaceState({ appState: "" }, "", "/");
+    if (window.location.pathname === "/profile")
+      history.replaceState({ appState: APPSTATE.PROFILE }, "", APPSTATE.PROFILE);
+    else
+      history.replaceState({ appState: "" }, "", "/");
     window.onpopstate = (e: PopStateEvent) => {
       if (e.state) {
         appState = e.state.appState;
@@ -103,16 +104,17 @@
   }, 15000);
 
   function clickProfile() {
-    profileUsername = $store.username
     setAppState(APPSTATE.PROFILE);
   }
 
-  let profileUsername: string = $store?.username ?? "";
   async function openIdProfile(event: CustomEvent<string>) {
-    profileUsername = event.detail;
-    setAppState(APPSTATE.PROFILE_ID);
+    setAppState(APPSTATE.PROFILE + "#" + event.detail);
   }
-  $: console.log("New profileUsername:", profileUsername)
+  
+  async function openIdHistory(event: CustomEvent<string>) {
+    setAppState(APPSTATE.HISTORY + "#" + event.detail);
+  }
+
   async function clickHistory() {
     setAppState(APPSTATE.HISTORY);
   }
@@ -176,8 +178,7 @@
         {failedGameLogIn}
         {gamePlaying}
       />
-
-      {#if appState.includes(`${APPSTATE.CHANNELS}#`)}
+      {#if appState.includes(`${APPSTATE.CHANNELS}#`)} 
         {#key appState}
           <div
             on:click={() => setAppState(APPSTATE.CHANNELS)}
@@ -195,8 +196,8 @@
           </div>
         {/key}
       {/if}
-      {#if appState.includes(APPSTATE.CHANNELS)}
-        <div
+      {#if appState.includes(APPSTATE.CHANNELS)} 
+         <div
           class="{appState !== APPSTATE.CHANNELS ? 'hidden' : ''}"
           on:click={resetAppState}
           on:keydown={resetAppState}
@@ -219,32 +220,32 @@
       {/if}
       {#if appState === APPSTATE.HISTORY}
         <div on:click={resetAppState} on:keydown={resetAppState}>
-          <MatchHistory />
+          <MatchHistory {appState} />
         </div>
       {/if}
-      {#if appState === APPSTATE.HISTORY_ID}
+      {#if appState.includes(`${APPSTATE.HISTORY}#`)}
         <div
           on:click={() => setAppState(APPSTATE.PROFILE)}
           on:keydown={() => setAppState(APPSTATE.PROFILE)}
         >
-          <MatchHistory username={profileUsername} />
+          <MatchHistory {appState} />
         </div>
       {/if}
       {#if appState === APPSTATE.PROFILE}
         <div on:click={resetAppState} on:keydown={resetAppState}>
-          <Profile {resetGameConnection} {gamePlaying} bind:username={profileUsername} on:view-history={() => setAppState(APPSTATE.HISTORY_ID)} />
+          <Profile {appState} {resetGameConnection} {gamePlaying} on:view-history={openIdHistory} />
         </div>
       {/if}
-      {#if appState === APPSTATE.PROFILE_ID}
+      {#if appState.includes(`${APPSTATE.PROFILE}#`)}
         <div
           on:click={() => setAppState(history.state.prevState)}
           on:keydown={() => setAppState(history.state.prevState)}
         >
           <Profile
+            {appState}
             {gamePlaying}
-            bind:username={profileUsername}
             on:send-message={openDirectChat}
-            on:view-history={() => setAppState(APPSTATE.HISTORY_ID)}
+            on:view-history={openIdHistory}
             on:add-friend={addFriend}
             on:invite-to-game={pong.inviteToGame}
           />
diff --git a/front/src/components/Channels.svelte b/front/src/components/Channels.svelte
index 385d1c1..14385f9 100644
--- a/front/src/components/Channels.svelte
+++ b/front/src/components/Channels.svelte
@@ -1,6 +1,6 @@
 <script lang="ts" context="module">
-  import { content, popup, show_popup } from './Alert/content'
-  import { onMount, tick } from "svelte";
+  import { content, show_popup } from './Alert/content'
+  import { onMount } from "svelte";
   import { API_URL, store } from "../Auth";
   import type User from "./Profile.svelte";
   import type { CreateChannelDto } from './dtos/create-channel.dto';
diff --git a/front/src/components/Chat.svelte b/front/src/components/Chat.svelte
index 748da52..b9249ea 100644
--- a/front/src/components/Chat.svelte
+++ b/front/src/components/Chat.svelte
@@ -341,8 +341,8 @@
           {#if !message.hidden}
             <span
               class="message-name"
-              on:click={() => dispatch("view-profile", message.author.username)}
-              on:keydown={() => dispatch("view-profile", message.author.username)}
+              on:click={() => dispatch("view-profile", message.author.ftId)}
+              on:keydown={() => dispatch("view-profile", message.author.ftId)}
               style="cursor: pointer;"
             >
               {message.author.username}
@@ -374,7 +374,7 @@
           <li>
             <p>
               {member.username}
-              <button on:click={() => dispatch("view-profile", member.username)}> profile </button>
+              <button on:click={() => dispatch("view-profile", member.ftId)}> profile </button>
               <button on:click={() => banUser(member.username)}> ban </button>
               <button on:click={() => kickUser(member.username)}> kick </button>
               <button on:click={() => muteUser(member.username)}> mute </button>
diff --git a/front/src/components/Friends.svelte b/front/src/components/Friends.svelte
index 45f5651..fb7f4cc 100644
--- a/front/src/components/Friends.svelte
+++ b/front/src/components/Friends.svelte
@@ -78,8 +78,8 @@
           {#each friends as friend}
             <li>
               <span class="message-name" 
-              on:click={() => dispatch("view-profile", friend.username)}
-              on:keydown={() => dispatch("view-profile", friend.username)}
+              on:click={() => dispatch("view-profile", friend.ftId)}
+              on:keydown={() => dispatch("view-profile", friend.ftId)}
               style="cursor: pointer;"
             >{friend.username} is {friend.status}</span> 
             </li>
@@ -94,8 +94,8 @@
           {#each invits as invit}
             <li>
               <span class="message-name" 
-              on:click={() => dispatch("view-profile", invit.username)}
-              on:keydown={() => dispatch("view-profile", invit.username)}
+              on:click={() => dispatch("view-profile", invit.ftId)}
+              on:keydown={() => dispatch("view-profile", invit.ftId)}
               style="cursor: pointer;"
             >{invit.username} invited you to be friend.</span>
             </li>
diff --git a/front/src/components/MatchHistory.svelte b/front/src/components/MatchHistory.svelte
index 91832a8..0c38157 100644
--- a/front/src/components/MatchHistory.svelte
+++ b/front/src/components/MatchHistory.svelte
@@ -12,23 +12,33 @@
 <script lang="ts">
   import InfiniteScroll from "./infiniteScroll.svelte";
   import { onMount } from "svelte";
+    import { APPSTATE } from "../App.svelte";
 
-  export let username: string = "Global";
+  export let appState: string = APPSTATE.HISTORY
+  let username = "";
   let page: number = 1;
   let data: Array<Match> = [];
   let newBatch: Array<Match> = [];
 
+  onMount(() => {
+    fetchData();
+  });
+
+  $: data = [...data, ...newBatch];
+
   async function fetchData() {
     let response: Response;
-    if (username === "Global") {
+    if (appState === APPSTATE.HISTORY) {
       response = await fetch(`${API_URL}/results/global?page=${page}`, {
         credentials: "include",
         mode: "cors",
       });
     } else {
-      response = await fetch(`${API_URL}/users/${username}/byname`);
+      let userId = appState.split("#")[1];
+      response = await fetch(`${API_URL}/users/${userId}`);
       if (response.ok) {
         let user = await response.json();
+        username = user.username;
         response = await fetch(`${API_URL}/results/${user.ftId}?page=${page}`, {
           credentials: "include",
           mode: "cors",
@@ -53,23 +63,22 @@
     }
   }
 
-  onMount(() => {
-    fetchData();
-  });
-
-  $: data = [...data, ...newBatch];
 </script>
 
 <div class="overlay">
   <div class="history" on:click|stopPropagation on:keydown|stopPropagation>
     <div>
-      {#if data.length > 0}
-        <table>
-          <thead>
-            <tr>
-              <th colspan="3">{username}'s last matchs</th>
-            </tr>
-          </thead>
+      <table>
+        <thead>
+          <tr>
+            {#if username === ""}
+              <th colspan="3">Global history</th>
+            {:else}
+              <th colspan="3">History of {username}</th>
+            {/if}
+          </tr>
+        </thead>
+        {#if data.length > 0}
           <tbody>
             <tr>
               <td>Date</td>
@@ -89,10 +98,10 @@
               </tr>
             {/each}
           </tbody>
-        </table>
       {:else}
         <p>No matches to display</p>
       {/if}
+        </table>
     </div>
     <InfiniteScroll
       hasMore={newBatch.length > 0}
diff --git a/front/src/components/Profile.svelte b/front/src/components/Profile.svelte
index 2b2b033..fdcd68b 100644
--- a/front/src/components/Profile.svelte
+++ b/front/src/components/Profile.svelte
@@ -14,22 +14,49 @@
 
 <script lang="ts">
   import { createEventDispatcher, onMount } from "svelte";
-  import { bind } from 'svelte-simple-modal';
   import { API_URL, store, logout } from "../Auth";
-  import Alert from "./Alert/Alert.svelte";
-  import { popup } from "./Alert/content";
   import type { UserDto } from "./dtos/user.dto";
   import { show_popup } from "./Alert/content";
+  import { APPSTATE } from "../App.svelte";
 
-  export let username: string = $store.username;
-  export let email: string = $store.email;
   export let gamePlaying: boolean;
   export let resetGameConnection: () => void = () => {};
+  export let appState: string = APPSTATE.PROFILE;
 
   let edit: boolean = true;
   let user: Player = $store;
+  let userId: string = $store.ftId;
+  let username: string = $store.username;
+  let email: string = $store.email;
   let blockedUsers: Array<Player> = [];
   let avatarForm: HTMLFormElement;
+
+  async function getUser() {
+    if ( appState !== APPSTATE.PROFILE) {
+      edit = false;
+      userId = appState.split("#")[1]
+      let res = await fetch(API_URL + "/users/" + userId, {
+        mode: "cors",
+      });
+      if (res.ok) user = await res.json();
+    }
+  }
+  async function getBlockeds() {
+    let res = await fetch(API_URL + "/users/blocked/", {
+      credentials: "include",
+      mode: "cors",
+    });
+    if (res.ok) blockedUsers = await res.json();
+  }
+
+  onMount(() => {
+    getUser();
+    getBlockeds();
+  });
+
+  const dispatch = createEventDispatcher();
+
+  //--------------------------------------------------------------------------------//
   export const blockUser = async (username: string) => {
     let response = await fetch(API_URL + "/users/" + username + "/byname", {
       credentials: "include",
@@ -42,18 +69,19 @@
         credentials: "include",
         mode: "cors"
       });
-      dispatch("update-hiddens", username)
-    }
-    if (response.ok) await show_popup("User blocked", false);
-    else {
+      if (response.ok) {
+        blockedUsers.push(target);
+        await show_popup("User blocked", false);
+      } else {
+        const error = await response.json();
+        await show_popup(error.message, false);
+      }
+    } else {
       const error = await response.json();
       await show_popup(error.message, false);
     }
-    dispatch("close")
   };
 
-  //--------------------------------------------------------------------------------/
-
   export const unblockUser = async (username: string) => {
     let response = await fetch(API_URL + "/users/" + username + "/byname", {
       credentials: "include",
@@ -68,7 +96,10 @@
       });
       dispatch("update-hiddens", username)
     }
-    if (response.ok) await show_popup("User unblocked", false);
+    if (response.ok) {
+      await show_popup("User unblocked", false);
+      blockedUsers = blockedUsers.filter((user) => user.username !== username);
+    }
     else {
       const error = await response.json();
       await show_popup(error.message, false);
@@ -76,28 +107,6 @@
     dispatch("close")
   };
 
-
-  async function getUser() {
-    if (username !== $store.username) {
-      edit = false;
-      let res = await fetch(API_URL + "/users/" + username + "/byname", {
-        mode: "cors",
-      });
-      user = await res.json();
-      res = await fetch(API_URL + "/users/blocked/", {
-        credentials: "include",
-        mode: "cors",
-      });
-      if (res.ok) blockedUsers = await res.json();
-    }
-  }
-
-  onMount(() => {
-    getUser();
-  });
-
-  const dispatch = createEventDispatcher();
-
   async function handleSubmit() {
     if (gamePlaying) {
       await show_popup("Cannot change username while playing.", false)
@@ -202,7 +211,7 @@
         </p>
       {/if}
       <p>
-        <button on:click={() => dispatch("view-history")}
+        <button on:click={() => dispatch("view-history", user.ftId)}
           >View History</button
         >
       </p>