Skip to content

Commit

Permalink
allow quick add friend from link
Browse files Browse the repository at this point in the history
  • Loading branch information
Flemmli97 committed Dec 3, 2024
1 parent bddc4fd commit a4c0a9c
Show file tree
Hide file tree
Showing 5 changed files with 147 additions and 27 deletions.
74 changes: 74 additions & 0 deletions src/lib/components/friends/AddFriendPopup.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<script lang="ts">
import { Icon, Label, Text } from "$lib/elements"
import Button from "$lib/elements/Button.svelte"
import { Store } from "$lib/state/Store"
import { createEventDispatcher } from "svelte"
import { _ } from "svelte-i18n"
import ProfilePicture from "../profile/ProfilePicture.svelte"
import { Appearance, Shape, Size } from "$lib/enums"
import { MultipassStoreInstance } from "$lib/wasm/MultipassStore"
import type { WarpError } from "$lib/wasm/HandleWarpErrors"
import { ToastMessage } from "$lib/state/ui/toast"
export let friend: string
$: user = Store.getUser(friend)
const dispatcher = createEventDispatcher()
function close() {
dispatcher("close")
}
async function add() {
let res = await MultipassStoreInstance.sendFriendRequest(friend)
res.fold(
(e: WarpError) => {
Store.addToastNotification(new ToastMessage("", e, 3, Shape.XMark, Appearance.Error))
},
() => {
Store.addToastNotification(new ToastMessage("", `Your request is making it's way!`, 3, Shape.CheckMark, Appearance.Success))
}
)
close()
}
</script>

<div class="add-friend-popup">
<Label hook="label-create-group-name" text={$_("settings.profile.addFriend")} />
<div class="user">
<ProfilePicture id={$user.key} image={$user.profile.photo.image} noIndicator size={Size.Medium} loading={$user.key === "0x0"} />
<div class="username">
<Text singleLine class="username">{$user.name}</Text>
<Text singleLine class="status">{$user.profile.status_message}</Text>
</div>
</div>
<div class="button-group">
<Button text={$_("generic.add")} appearance={Appearance.Default} on:click={add}>
<Icon icon={Shape.Plus} />
</Button>
<Button text={$_("generic.cancel")} appearance={Appearance.Default} on:click={close}>
<Icon icon={Shape.NoSymbol} />
</Button>
</div>
</div>

<style lang="scss">
.add-friend-popup {
display: flex;
flex-direction: column;
padding: var(--padding);
border-radius: var(--border-radius);
gap: var(--gap);
.user {
display: flex;
width: 100%;
gap: var(--gap);
}
.button-group {
justify-content: center;
display: flex;
gap: var(--gap);
margin-top: var(--padding-less);
}
}
</style>
17 changes: 17 additions & 0 deletions src/lib/state/page/PageStates.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { writable, type Writable } from "svelte/store"

export enum FriendPage {
ALL,
ACTIVE,
BLOCKED,
}

export type PageStateStruct = {
friends: Writable<FriendPage>
addFriend: Writable<string>
}

export const PageState: PageStateStruct = {
friends: writable(FriendPage.ALL),
addFriend: writable(""),
}
59 changes: 32 additions & 27 deletions src/routes/friends/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import Fuse from "fuse.js"
import Friend from "$lib/components/friends/Friend.svelte"
import { Store } from "$lib/state/Store"
import { FriendPage, PageState, type PageStateStruct } from "$lib/state/page/PageStates"
import { get } from "svelte/store"
import { goto } from "$app/navigation"
import { UIStore } from "$lib/state/ui"
Expand All @@ -19,7 +20,7 @@
import { ToastMessage } from "$lib/state/ui/toast"
import { CommonInputRules } from "$lib/utils/CommonInputRules"
import CreateGroup from "$lib/components/group/CreateGroup.svelte"
import { onDestroy } from "svelte"
import AddFriendPopup from "$lib/components/friends/AddFriendPopup.svelte"
let loading: boolean = false
$: sidebarOpen = UIStore.state.sidebarOpen
Expand All @@ -31,20 +32,8 @@
let isValidFriendDid: boolean = false
let newGroup: boolean = false
let tab: "all" | "active" | "blocked" = "all"
let unsub = Store.state.pageState.subscribe(s => {
function isTab(value: string): value is "all" | "active" | "blocked" {
return value === "all" || value === "active" || value === "blocked"
}
if (isTab(s)) {
tab = s
}
})
onDestroy(() => {
unsub()
})
$: tab = PageState.friends
$: addFriend = PageState.addFriend
function toggleSidebar(): void {
UIStore.toggleSidebar()
Expand Down Expand Up @@ -160,9 +149,25 @@
await navigator.clipboard.writeText(updatedKey)
}
}
function validDid(did: string) {
return did !== get(Store.state.user).key.replace("did:key:", "")
}
</script>

<div id="page">
{#if $addFriend && validDid($addFriend)}
<Modal
on:close={_ => {
$addFriend = ""
}}>
<AddFriendPopup
friend={$addFriend}
on:close={_ => {
$addFriend = ""
}}></AddFriendPopup>
</Modal>
{/if}
<Sidebar loading={loading} on:toggle={toggleSidebar} open={$sidebarOpen} activeRoute={Route.Friends}>
<!--
<Button hook="button-marketplace" outline appearance={Appearance.Alt} text={$_("market.market")}>
Expand Down Expand Up @@ -206,38 +211,38 @@
<div class="content">
<Topbar>
<svelte:fragment slot="controls">
{#if tab === "all"}
<Button hook="button-friends-all" appearance={Appearance.Alt} text={$_("friends.all")} on:click={_ => (tab = "all")}>
{#if $tab === FriendPage.ALL}
<Button hook="button-friends-all" appearance={Appearance.Alt} text={$_("friends.all")} on:click={_ => ($tab = FriendPage.ALL)}>
<Icon icon={Shape.Users} alt />
</Button>
{:else}
<Button hook="button-friends-all" appearance={Appearance.Alt} text={$_("friends.all")} on:click={_ => (tab = "all")}>
<Button hook="button-friends-all" appearance={Appearance.Alt} text={$_("friends.all")} on:click={_ => ($tab = FriendPage.ALL)}>
<Icon icon={Shape.Users} />
</Button>
{/if}
{#if tab === "active"}
<Button badge={incomingRequests.length} hook="button-friends-active" appearance={Appearance.Primary} text={$_("friends.active")} on:click={_ => (tab = "active")} hideTextOnMobile>
{#if $tab === FriendPage.ACTIVE}
<Button badge={incomingRequests.length} hook="button-friends-active" appearance={Appearance.Primary} text={$_("friends.active")} on:click={_ => ($tab = FriendPage.ACTIVE)} hideTextOnMobile>
<Icon icon={Shape.ArrowsLeftRight} alt />
</Button>
{:else}
<Button badge={incomingRequests.length} hook="button-friends-active" appearance={Appearance.Alt} text={$_("friends.active")} on:click={_ => (tab = "active")} hideTextOnMobile>
<Button badge={incomingRequests.length} hook="button-friends-active" appearance={Appearance.Alt} text={$_("friends.active")} on:click={_ => ($tab = FriendPage.ACTIVE)} hideTextOnMobile>
<Icon icon={Shape.ArrowsLeftRight} />
</Button>
{/if}
{#if tab === "blocked"}
<Button hook="button-friends-blocked" appearance={Appearance.Primary} text={$_("friends.blocked")} on:click={_ => (tab = "blocked")} hideTextOnMobile>
{#if $tab === FriendPage.BLOCKED}
<Button hook="button-friends-blocked" appearance={Appearance.Primary} text={$_("friends.blocked")} on:click={_ => ($tab = FriendPage.BLOCKED)} hideTextOnMobile>
<Icon icon={Shape.NoSymbol} alt />
</Button>
{:else}
<Button hook="button-friends-blocked" appearance={Appearance.Alt} text={$_("friends.blocked")} on:click={_ => (tab = "blocked")} hideTextOnMobile>
<Button hook="button-friends-blocked" appearance={Appearance.Alt} text={$_("friends.blocked")} on:click={_ => ($tab = FriendPage.BLOCKED)} hideTextOnMobile>
<Icon icon={Shape.NoSymbol} />
</Button>
{/if}
</svelte:fragment>
</Topbar>

<div class="body">
{#if tab === "all"}
{#if $tab === FriendPage.ALL}
<Label hook="label-add-someone" text={$_("friends.add_someone")} />
<div class="section" data-cy="friends-section-all">
<Input
Expand Down Expand Up @@ -397,7 +402,7 @@
{/each}
</div>
</div>
{:else if tab === "active"}
{:else if FriendPage.ACTIVE}
<div class="section column" data-cy="friends-section-requests">
<Label hook="label-outgoing-requests" text={$_("friends.outgoing_requests")} />
{#each outgoingRequests as request}
Expand Down Expand Up @@ -429,7 +434,7 @@
<Text hook="text-no-incoming-requests">{$_("friends.noIncoming")}</Text>
{/if}
</div>
{:else if tab === "blocked"}
{:else if $tab === FriendPage.BLOCKED}
<div class="section column" data-cy="friends-section-blocked">
<Label hook="label-blocked-users" text={$_("friends.blocked_users")} />
{#each $blocked as user}
Expand Down
19 changes: 19 additions & 0 deletions src/routes/friends/add/[user]/+page.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<script lang="ts">
import { goto } from "$app/navigation"
import { page } from "$app/stores"
import { Route } from "$lib/enums"
import { PageState } from "$lib/state/page/PageStates"
import { onMount } from "svelte"
let { key } = $page.data
onMount(() => {
PageState.addFriend.set(key)
goto(Route.Friends)
})
</script>

<div></div>

<style lang="scss">
</style>
5 changes: 5 additions & 0 deletions src/routes/friends/add/[user]/+page.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
export async function load({ params }) {
return {
key: params.user,
}
}

0 comments on commit a4c0a9c

Please sign in to comment.