Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

move follow button under the avatar #45

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

move follow button under the avatar #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
91d242f
move follow button under the avatar
plrcgrss Oct 16, 2024
a858938
fix size from the follow buttons
plrcgrss Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions .env.example
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions src/lib/components/FollowButton.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@

{#if isFollowed}
<button
class="btn btn-secondary min-w-fit rounded-full px-4 text-lg text-white shadow-lg"
class="btn btn-secondary min-w-fit rounded-full px-4 text-sm text-white shadow-lg"
in:fade
>
<Icon data={check} />
Following
</button>
{:else}
<button
class="btn btn-primary min-w-fit rounded-full px-4 text-lg text-white shadow-lg"
class="btn btn-primary min-w-fit rounded-full px-4 text-sm text-white shadow-lg"
on:click={clickCallback}
in:fade
>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/LoginButton.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@

<a
href={loginRoute}
class="btn btn-primary btn-md min-w-52 rounded-full px-4 text-lg font-bold text-white shadow-lg"
class="btn btn-primary btn-sm min-w-52 rounded-full px-4 text-lg font-bold text-white shadow-lg"
>Open Holopass</a
>
59 changes: 50 additions & 9 deletions src/lib/components/PassCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,17 @@
import { htmlifyLinks } from '../../html';
import * as profiles from '../../profiles';
import Oshi from './Oshi.svelte';
import {profileRedirectURL} from "../../profiles";
import LoginButton from "$lib/components/LoginButton.svelte";
import FollowButton from "$lib/components/FollowButton.svelte";
import {invalidateAll} from "$app/navigation";

export let profile: Tables<'profiles'>;
export let pass: Tables<'profiles'>;
export let oshi: Promise<Tables<'talents'>[]>;
export let badges: Promise<Tables<'badges'>[]>;
export let isFollowed: boolean;
export let myPass: boolean;
export let following: Promise<{ following: Tables<'profiles'>[]; count: number }> = {
following: [],
count: 0
Expand All @@ -20,16 +27,31 @@
count: 0
};

let nickname = profile.nickname ?? '';
let nicknameJP = profile.nickname_jp ?? '';
$: avatarURL = profile.avatar_url ?? '';
let location = profile.location ?? '';
let bio = profile.bio ?? '';
let favStream = profile.fav_stream ?? '';
if (!pass) pass = profile;

let nickname = pass.nickname ?? '';
let nicknameJP = pass.nickname_jp ?? '';
$: avatarURL = pass.avatar_url ?? '';
let location = pass.location ?? '';
let bio = pass.bio ?? '';
let favStream = pass.fav_stream ?? '';

async function handleFollow(profile: Tables<'profiles'>, pass: Tables<'profiles'>) {
const resp = await fetch(`/pass/${pass?.id}/follow`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ profile })
});
if (resp.ok) {
invalidateAll();
} else {
console.error('Failed to follow user with status:', resp.status);
}
}
</script>

<div
class={profiles.isDaniru(profile.id)
class={profiles.isDaniru(pass.id)
? 'card bg-gradient-to-br from-primary/50 to-secondary/50 p-4 shadow-2xl shadow-primary/60'
: 'card bg-slate-50 p-4 shadow-lg'}
id="pass-card"
Expand All @@ -38,6 +60,25 @@
<section class="w-3/5 flex-1" id="profile-pic">
<Avatar {avatarURL} />
<p class="mb-4 text-center align-middle text-slate-600">holopass</p>
{#if !myPass}
<div class="flex justify-center">
{#if profile && pass}
<FollowButton
{isFollowed}
clickCallback={() => profile && pass && handleFollow(profile, pass)}
/>
{:else}
<div class="flex flex-col gap-4">
<p class="text-center text-2xl font-semibold tracking-tight text-secondary">
Login or Signup to follow
</p>
<LoginButton
loginRoute={`/login?redirectAfterLoginURL=${profileRedirectURL(pass?.id || '')}`}
/>
</div>
{/if}
</div>
{/if}
</section>

<section class="flex-2 w-2/3 space-y-4 p-4">
Expand Down Expand Up @@ -78,11 +119,11 @@

<section class="flex flex-row place-content-evenly p-4" id="connections">
{#await following then { count }}
<Counter {count} url={`/pass/${profile.id}/connections?type=following`} text="Following" />
<Counter {count} url={`/pass/${pass.id}/connections?type=following`} text="Following" />
{/await}

{#await followers then { count }}
<Counter {count} url={`/pass/${profile.id}/connections?type=followers`} text="Followers" />
<Counter {count} url={`/pass/${pass.id}/connections?type=followers`} text="Followers" />
{/await}
</section>

Expand Down
38 changes: 1 addition & 37 deletions src/routes/pass/[id]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,14 @@
import { MetaTags } from 'svelte-meta-tags';

import PassCard from '$lib/components/PassCard.svelte';
import FollowButton from '$lib/components/FollowButton.svelte';

import type { PageData } from './$types';
import type { Tables } from '$lib/database.types';
import { invalidateAll } from '$app/navigation';
import LoginButton from '$lib/components/LoginButton.svelte';
import { profileRedirectURL } from '../../../profiles';

export let data: PageData;

// in this context pass is another user's "profile"
// and profile is the current user's profile
$: ({ pass, oshi, badges, profile, following, followers, isFollowed } = data);

async function handleFollow(profile: Tables<'profiles'>, pass: Tables<'profiles'>) {
const resp = await fetch(`/pass/${pass?.id}/follow`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ profile })
});
if (resp.ok) {
invalidateAll();
} else {
console.error('Failed to follow user with status:', resp.status);
}
}
</script>

<MetaTags
Expand All @@ -48,23 +30,5 @@
class="mx-4 space-y-6 pb-36 pt-4"
transition:fade={{ delay: 0, duration: 200 }}
>
<PassCard profile={pass} {oshi} {badges} {followers} {following} />

<div class="flex justify-center">
{#if profile && pass}
<FollowButton
{isFollowed}
clickCallback={() => profile && pass && handleFollow(profile, pass)}
/>
{:else}
<div class="flex flex-col gap-4">
<p class="text-center text-2xl font-semibold tracking-tight text-secondary">
Login or Signup to follow
</p>
<LoginButton
loginRoute={`/login?redirectAfterLoginURL=${profileRedirectURL(pass?.id || '')}`}
/>
</div>
{/if}
</div>
<PassCard {pass} {profile} {oshi} {badges} {followers} {following} {isFollowed} />
</div>