Merge Staging into Main (#144)

* Bring Staging up to date with Main (#143) * Merge Staging into Main (#139) * news carousel adjustments * adjust explore and tag pages * work header fixes * profile header updates * adjust profile home page * sizes down work stats on smaller displays * adjusting works and blogs lists * Update +layout.svelte * adding optimizations to section list * Update +page.svelte * Update +page.svelte * Feat/email and recovery (#136) * feat: password resets and email confirmations * updating controllers with confirmation guard * API routes for features now in place * password resets are in * email confirmations are now in * update readme * Feat/work and comments features (#138) * Feat/fixing profile forms (#142) * chore: add beta badge to nav * chore: fix display of beta badge * chore: update about panel and version * adding placeholder for messages panel * profile forms now work * fix: redirect approval/rejection notifications to their intended recipient * adding links form to profile setitngs * feat: adding links to profile pages * fix: address issue with layout of admin badge on mobile * chore: adds unique constraint to the approval queue (#123) adds a `UNIQUE` constraint to the approval queue table on `work_id`, guaranteeing that works can only ever be submitted to the queue once. closes #78 * fix: testing new method of obtaining client IP address * Update Functions.swift * Update Functions.swift * fix: addresses issues with pagination on profile pages * fix: address issue of width on mobile devices for profile pages * fix: remove more tags button when less than 2 tags * fix: one last fix for tags display * fix: make sure transactions are actually being committed
OffprintStudios · Feb 5, 2023 · ee23e66 · ee23e66
1 parent 487e070
commit ee23e66
Show file tree

Hide file tree

Showing 23 changed files with 166 additions and 96 deletions.
diff --git a/Client/src/lib/ui/content/WorkCard.svelte b/Client/src/lib/ui/content/WorkCard.svelte
@@ -99,13 +99,15 @@
 		{#each fandoms as tag, i}
 			{#if i === 0}
 				<TagBadge {tag} kind={tag.kind} size="small" />
-				<button
-					class="relative z-[2] text-sm top-1 lg:top-0.5 ml-2 text-zinc-400"
-					style="font-family: var(--header-text);"
-					on:click={openAllTags}
-				>
-					+ {fandoms.length - 1} more
-				</button>
+				{#if fandoms.length > 1}
+					<button
+						class="relative z-[2] text-sm top-1 lg:top-0.5 ml-2 text-zinc-400"
+						style="font-family: var(--header-text);"
+						on:click={openAllTags}
+					>
+						+ {fandoms.length - 1} more
+					</button>
+				{/if}
 			{/if}
 		{/each}
 	</div>

diff --git a/Client/src/routes/api/auth/log-in/+server.ts b/Client/src/routes/api/auth/log-in/+server.ts
@@ -3,14 +3,17 @@ import type { ClientPackage } from "$lib/models/accounts";
 import type { LoginForm } from "$lib/models/accounts/forms";
 import type { ServerResponseError } from "$lib/server";
 import { postReqServer } from "$lib/server";
+import { PUBLIC_ENV } from "$env/static/public";
 
 export const POST: RequestHandler = async ({ request, cookies, getClientAddress }) => {
 	const formInfo: LoginForm = await request.json();
 	const userAgent = request.headers.get("User-Agent") ?? "";
+	const ipAddress =
+		PUBLIC_ENV === "development" ? getClientAddress() : request.headers.get("CF-Connecting-IP");
 	const response = await postReqServer<ClientPackage>(`/auth/login`, formInfo, {
 		headers: {
 			"User-Agent": userAgent,
-			"X-Offprint-Client-IP": getClientAddress()
+			"X-Offprint-Client-IP": ipAddress
 		}
 	});
 	if ((response as ServerResponseError).statusCode) {

diff --git a/Client/src/routes/api/auth/sign-up/+server.ts b/Client/src/routes/api/auth/sign-up/+server.ts
@@ -2,14 +2,17 @@ import type { RequestHandler } from "./$types";
 import type { ClientPackage } from "$lib/models/accounts";
 import type { RegisterForm } from "$lib/models/accounts/forms";
 import { postReqServer, type ServerResponseError } from "$lib/server";
+import { PUBLIC_ENV } from "$env/static/public";
 
 export const POST: RequestHandler = async ({ request, cookies, getClientAddress }) => {
 	const formInfo: RegisterForm = await request.json();
 	const userAgent = request.headers.get("User-Agent") ?? "";
+	const ipAddress =
+		PUBLIC_ENV === "development" ? getClientAddress() : request.headers.get("CF-Connecting-IP");
 	const response = await postReqServer<ClientPackage>(`/auth/register`, formInfo, {
 		headers: {
 			"User-Agent": userAgent,
-			"X-Offprint-Client-IP": getClientAddress()
+			"X-Offprint-Client-IP": ipAddress
 		}
 	});
 	if ((response as ServerResponseError).statusCode) {

diff --git a/Client/src/routes/profile/[id]/[[username]]/+layout.svelte b/Client/src/routes/profile/[id]/[[username]]/+layout.svelte
@@ -289,7 +289,7 @@
 			<div
 				class="flex flex-col lg:flex-row px-3 py-2 my-4 lg:my-0 bg-zinc-300 dark:bg-zinc-600 lg:max-h-[85px] lg:max-w-[600px] rounded-xl"
 			>
-				<div class="lg:min-w-[250px] mb-2 lg:mb-0 lg:mr-4">
+				<div class="lg:min-w-[250px] mb-2 lg:mb-0">
 					<div class="flex items-center">
 						<InformationLine size="20px" class="mr-1" />
 						<span
@@ -303,7 +303,7 @@
 					</div>
 				</div>
 				{#if Object.keys(data.links).length !== 0}
-					<div>
+					<div class="lg:ml-2 lg:pl-2 lg:border-l-2 border-zinc-400 dark:border-zinc-500">
 						<div class="flex items-center">
 							<LinksFill size="20px" class="mr-1" />
 							<span class="all-small-caps font-bold tracking-wider text-lg">

diff --git a/Client/src/routes/profile/[id]/[[username]]/+page.svelte b/Client/src/routes/profile/[id]/[[username]]/+page.svelte
@@ -86,7 +86,7 @@
 			<p>Well this is rather empty, isn't it?</p>
 		</div>
 	{:else}
-		<div class="w-11/12 mx-auto grid grid-cols-1 lg:grid-cols-3 gap-4">
+		<div class="w-full lg:w-11/12 xl:w-full mx-auto grid grid-cols-1 lg:grid-cols-3 gap-4">
 			{#if blogs.items[0]}
 				<div class="lg:col-span-2">
 					<BlogCard blog={blogs.items[0]} hasDropdown={false} bigPreview={true} />

diff --git a/Client/src/routes/profile/[id]/[[username]]/blog/[blogId]/[[blogTitle]]/+layout.server.ts b/Client/src/routes/profile/[id]/[[username]]/blog/[blogId]/[[blogTitle]]/+layout.server.ts
@@ -4,19 +4,23 @@ import type { Blog } from "$lib/models/content";
 import type { Comment } from "$lib/models/comments";
 import type { Paginate } from "$lib/util/types";
 import { getReqServer, type ServerResponseError } from "$lib/server";
+import { PUBLIC_ENV } from "$env/static/public";
 
 export const load: LayoutServerLoad = async ({
 	params,
 	url,
-	getClientAddress
+	getClientAddress,
+	request
 }): Promise<{ blog: Blog; comments: Paginate<Comment> }> => {
 	const page = url.searchParams.has("page") ? url.searchParams.get("page") : 1;
 	const per = url.searchParams.has("per") ? url.searchParams.get("per") : 25;
+	const ipAddress =
+		PUBLIC_ENV === "development" ? getClientAddress() : request.headers.get("CF-Connecting-IP");
 	const response = await getReqServer<{ blog: Blog; comments: Paginate<Comment> }>(
 		`/blogs/${params.blogId}?page=${page}&per=${per}`,
 		{
 			headers: {
-				"X-Offprint-Client-IP": getClientAddress()
+				"X-Offprint-Client-IP": ipAddress
 			}
 		}
 	);

diff --git a/Client/src/routes/profile/[id]/[[username]]/blogs/+page.svelte b/Client/src/routes/profile/[id]/[[username]]/blogs/+page.svelte
@@ -1,15 +1,11 @@
 <script lang="ts">
-	import { page } from "$app/stores";
 	import { slugify } from "$lib/util/functions";
 	import { account } from "$lib/state/account.state";
 	import type { Profile } from "$lib/models/accounts";
 	import BlogsManagement from "./BlogsManagement.svelte";
 	import BlogsList from "./BlogsList.svelte";
 
 	export let data: Profile;
-
-	let pageNum = $page.url.searchParams.has("page") ? $page.url.searchParams.get("page") : 1;
-	let per = $page.url.searchParams.has("per") ? $page.url.searchParams.get("per") : 25;
 </script>
 
 <svelte:head>
@@ -20,31 +16,27 @@
 
 	<!-- Open Graph / Facebook -->
 	<meta property="og:type" content="website" />
-	<meta property="og:url" content="https://offprint.net/profile/{data.id}/{slugify(data.username)}/blogs" />
-	<meta property="og:title" content="{data.username}'s Blogs" />
 	<meta
-		property="og:description"
-		content="From the desk of {data.username}"
+		property="og:url"
+		content="https://offprint.net/profile/{data.id}/{slugify(data.username)}/blogs"
 	/>
-	<meta property="og:image" content="{data.avatar}" />
+	<meta property="og:title" content="{data.username}'s Blogs" />
+	<meta property="og:description" content="From the desk of {data.username}" />
+	<meta property="og:image" content={data.avatar} />
 
 	<!-- Twitter -->
 	<meta property="twitter:card" content="summary_large_image" />
-	<meta property="twitter:url" content="https://offprint.net/profile/{data.id}/{slugify(data.username)}/blogs" />
-	<meta property="twitter:title" content="{data.username}'s Blogs" />
 	<meta
-		property="twitter:description"
-		content="From the desk of {data.username}"
+		property="twitter:url"
+		content="https://offprint.net/profile/{data.id}/{slugify(data.username)}/blogs"
 	/>
-	<meta property="twitter:image" content="{data.avatar}" />
+	<meta property="twitter:title" content="{data.username}'s Blogs" />
+	<meta property="twitter:description" content="From the desk of {data.username}" />
+	<meta property="twitter:image" content={data.avatar} />
 </svelte:head>
 
 {#if $account.account && $account.currProfile && $account.currProfile.id === data.id}
 	<BlogsManagement profile={data} />
 {:else}
-	<BlogsList
-		profile={data}
-		page={pageNum}
-		per={per}
-	/>
+	<BlogsList profile={data} />
 {/if}
diff --git a/Client/src/routes/profile/[id]/[[username]]/blogs/BlogsList.svelte b/Client/src/routes/profile/[id]/[[username]]/blogs/BlogsList.svelte
@@ -21,14 +21,15 @@
 			total: 0
 		}
 	};
-	$: pageNum = +($page.url.searchParams.get("page") ?? "1");
-	$: perPage = +($page.url.searchParams.get("per") ?? "10");
+	let pageNum = +($page.url.searchParams.get("page") ?? "1");
+	let perPage = +($page.url.searchParams.get("per") ?? "10");
 
 	onMount(async () => {
 		await fetchBlogs(pageNum);
 	});
 
 	async function fetchBlogs(newPage: number) {
+		pageNum = newPage;
 		$page.url.searchParams.set("page", `${newPage}`);
 		const response = await getReq<Paginate<Blog>>(
 			`/blogs/fetch?` +
@@ -49,7 +50,7 @@
 
 <div class="my-6 w-11/12 lg:w-full mx-auto">
 	{#if blogs.metadata.total > 0}
-		<div class="w-11/12 xl:w-full mx-auto grid grid-cols-1 lg:grid-cols-2 gap-4">
+		<div class="w-full lg:w-11/12 xl:w-full mx-auto grid grid-cols-1 lg:grid-cols-2 gap-4">
 			{#each blogs.items as blog}
 				<BlogCard {blog} hasDropdown={false} />
 			{/each}

diff --git a/Client/src/routes/profile/[id]/[[username]]/blogs/DraftBlogsList.svelte b/Client/src/routes/profile/[id]/[[username]]/blogs/DraftBlogsList.svelte
@@ -24,8 +24,8 @@
 			total: 0
 		}
 	};
-	$: pageNum = +($page.url.searchParams.get("page") ?? "1");
-	$: perPage = +($page.url.searchParams.get("per") ?? "10");
+	let pageNum = +($page.url.searchParams.get("page") ?? "1");
+	let perPage = +($page.url.searchParams.get("per") ?? "10");
 	let loading = false;
 
 	onMount(async () => {
@@ -34,6 +34,7 @@
 
 	async function fetchDrafts(newPage: number) {
 		loading = true;
+		pageNum = newPage;
 		$page.url.searchParams.set("page", `${newPage}`);
 		const response = await getReq<Paginate<Blog>>(
 			"/blogs/fetch?" +
@@ -86,7 +87,7 @@
 {:else}
 	<div class="my-6 w-11/12 mx-auto">
 		{#if blogs.metadata.total > 0}
-			<div class="w-11/12 xl:w-full mx-auto grid grid-cols-1 lg:grid-cols-2 gap-4">
+			<div class="w-full lg:w-11/12 xl:w-full mx-auto grid grid-cols-1 lg:grid-cols-2 gap-4">
 				{#each blogs.items as blog}
 					<BlogCard {blog}>
 						<svelte:fragment slot="dropdown">

diff --git a/Client/src/routes/profile/[id]/[[username]]/blogs/PendingBlogsList.svelte b/Client/src/routes/profile/[id]/[[username]]/blogs/PendingBlogsList.svelte
@@ -13,17 +13,19 @@
 	import type { ResponseError } from "$lib/http";
 
 	let blogs: Blog[] = [];
-	let pageNum = $page.url.searchParams.has("page") ? $page.url.searchParams.get("page") : 1;
-	let per = $page.url.searchParams.has("per") ? $page.url.searchParams.get("per") : 10;
+	let pageNum = +($page.url.searchParams.get("page") ?? "1");
+	let perPage = +($page.url.searchParams.get("per") ?? "10");
 	let total = 1;
 	let loading = false;
 
 	onMount(async () => {
-		await fetchPending();
+		await fetchPending(pageNum);
 	});
 
-	async function fetchPending() {
+	async function fetchPending(newPage: number) {
 		loading = true;
+		pageNum = newPage;
+		$page.url.searchParams.set("page", `${newPage}`);
 		const response = await getReq<Paginate<Blog>>(
 			"/blogs/fetch?" +
 				"authorId=" +
@@ -39,7 +41,7 @@
 				pageNum +
 				"&" +
 				"per=" +
-				per
+				perPage
 		);
 		if ((response as ResponseError).error) {
 			const error = response as ResponseError;
@@ -48,7 +50,7 @@
 			const result = response as Paginate<Blog>;
 			blogs = result.items;
 			pageNum = result.metadata.page;
-			per = result.metadata.per;
+			perPage = result.metadata.per;
 			total = result.metadata.total;
 		}
 		loading = false;
@@ -62,7 +64,7 @@
 {:else}
 	<div class="my-6 w-11/12 mx-auto">
 		{#if blogs.length > 0}
-			<div class="w-11/12 xl:w-full mx-auto grid grid-cols-1 lg:grid-cols-2 gap-4">
+			<div class="w-full lg:w-11/12 xl:w-full mx-auto grid grid-cols-1 lg:grid-cols-2 gap-4">
 				{#each blogs as blog}
 					<BlogCard {blog} />
 				{/each}
@@ -74,7 +76,12 @@
 			</div>
 		{/if}
 		{#if blogs.length > 0}
-			<Paginator currPage={pageNum} perPage={per} totalItems={total} />
+			<Paginator
+				currPage={pageNum}
+				{perPage}
+				totalItems={total}
+				on:change={(event) => fetchPending(event.detail)}
+			/>
 		{/if}
 	</div>
 {/if}
diff --git a/Client/src/routes/profile/[id]/[[username]]/blogs/PublishedBlogsList.svelte b/Client/src/routes/profile/[id]/[[username]]/blogs/PublishedBlogsList.svelte
@@ -24,8 +24,8 @@
 			total: 0
 		}
 	};
-	$: pageNum = +($page.url.searchParams.get("page") ?? "1");
-	$: perPage = +($page.url.searchParams.get("per") ?? "10");
+	let pageNum = +($page.url.searchParams.get("page") ?? "1");
+	let perPage = +($page.url.searchParams.get("per") ?? "10");
 	let loading = false;
 
 	onMount(async () => {
@@ -34,6 +34,7 @@
 
 	async function fetchPublished(newPage: number) {
 		loading = true;
+		pageNum = newPage;
 		$page.url.searchParams.set("page", `${newPage}`);
 		const response = await getReq<Paginate<Blog>>(
 			"/blogs/fetch?" +
@@ -86,7 +87,7 @@
 {:else}
 	<div class="my-6 w-11/12 mx-auto">
 		{#if blogs.metadata.total > 0}
-			<div class="w-11/12 xl:w-full mx-auto grid grid-cols-1 lg:grid-cols-2 gap-4">
+			<div class="w-full lg:w-11/12 xl:w-full mx-auto grid grid-cols-1 lg:grid-cols-2 gap-4">
 				{#each blogs.items as blog}
 					<BlogCard {blog}>
 						<svelte:fragment slot="dropdown">

diff --git a/Client/src/routes/profile/[id]/[[username]]/followers/+page.svelte b/Client/src/routes/profile/[id]/[[username]]/followers/+page.svelte
@@ -14,12 +14,13 @@
 		items: data.items,
 		metadata: data.metadata
 	};
-	$: pageNum = +($page.url.searchParams.get("page") ?? "1");
-	$: perPage = +($page.url.searchParams.get("per") ?? "21");
+	let pageNum = +($page.url.searchParams.get("page") ?? "1");
+	let perPage = +($page.url.searchParams.get("per") ?? "21");
 	let loading = false;
 
 	async function fetchPage(newPage: number) {
 		loading = true;
+		pageNum = newPage;
 		$page.url.searchParams.set("page", `${newPage}`);
 		$page.url.searchParams.set("per", `${perPage}`);
 		const response = await getReq<Paginate<Profile>>(

diff --git a/Client/src/routes/profile/[id]/[[username]]/following/+page.svelte b/Client/src/routes/profile/[id]/[[username]]/following/+page.svelte
@@ -14,12 +14,13 @@
 		items: data.items,
 		metadata: data.metadata
 	};
-	$: pageNum = +($page.url.searchParams.get("page") ?? "1");
-	$: perPage = +($page.url.searchParams.get("per") ?? "21");
+	let pageNum = +($page.url.searchParams.get("page") ?? "1");
+	let perPage = +($page.url.searchParams.get("per") ?? "21");
 	let loading = false;
 
 	async function fetchPage(newPage: number) {
 		loading = true;
+		pageNum = newPage;
 		$page.url.searchParams.set("page", `${newPage}`);
 		$page.url.searchParams.set("per", `${perPage}`);
 		const response = await getReq<Paginate<Profile>>(

diff --git a/Client/src/routes/profile/[id]/[[username]]/shelves/+page.svelte b/Client/src/routes/profile/[id]/[[username]]/shelves/+page.svelte
@@ -14,7 +14,14 @@
 
 	export let data: Profile;
 	let loading = false;
-	let shelves: Paginate<Shelf> = null;
+	let shelves: Paginate<Shelf> = {
+		items: [],
+		metadata: {
+			page: 1,
+			per: 20,
+			total: 0
+		}
+	};
 
 	onMount(async () => {
 		try {
@@ -51,7 +58,7 @@
 			onConfirm: async () => {
 				let result = await toast.promise<void | ResponseError>(
 					delReq<void>(
-						`/shelves/delete?profileId=${$account.currProfile.id}&shelfId=${id}`
+						`/shelves/delete?profileId=${$account.currProfile?.id}&shelfId=${id}`
 					),
 					{
 						loading: "Deleting...",

diff --git a/Client/src/routes/profile/[id]/[[username]]/works/+page.svelte b/Client/src/routes/profile/[id]/[[username]]/works/+page.svelte
@@ -42,5 +42,5 @@
 {#if $account.account && $account.currProfile && $account.currProfile.id === data.id}
 	<WorksManagement profile={data} />
 {:else}
-	<WorksList profile={data} page={pageNum} {per} />
+	<WorksList profile={data} />
 {/if}