From b697f2d356ac8efa2a9e29647244314224a48f24 Mon Sep 17 00:00:00 2001
From: Ryan <ryan@websculptors.net>
Date: Wed, 14 Dec 2022 01:19:36 +0900
Subject: [PATCH] feat; Componentize tweet #118

---
 src/lib/components/tweet.svelte      | 238 +++++++++++++++++++++
 src/lib/components/tweet_list.svelte |  74 +++++++
 src/routes/home/+page.svelte         | 301 +--------------------------
 3 files changed, 314 insertions(+), 299 deletions(-)
 create mode 100644 src/lib/components/tweet.svelte
 create mode 100644 src/lib/components/tweet_list.svelte

diff --git a/src/lib/components/tweet.svelte b/src/lib/components/tweet.svelte
new file mode 100644
index 0000000..125199d
--- /dev/null
+++ b/src/lib/components/tweet.svelte
@@ -0,0 +1,238 @@
+<script lang="ts">
+	import Like from '$lib/icons/like.svelte'
+	import Reply from '$lib/icons/reply.svelte'
+	import Retweet from '$lib/icons/retweet.svelte'
+	import RetweetSmall from '$lib/icons/retweet_small.svelte'
+	import ThreeDot from '$lib/icons/three_dot.svelte'
+	import UpArrow from '$lib/icons/up_arrow.svelte'
+	import { Tweet } from '$lib/tweet'
+	import type { components } from 'twitter-api-sdk/dist/types'
+	import { _ } from 'svelte-i18n'
+
+	export let tweet_data: components['schemas']['Tweet']
+	export let user_data_map: Map<string, components['schemas']['User']>
+	export let referenced_tweets_data_map: Map<string, components['schemas']['Tweet']>
+	export let media_data_map: Map<string, components['schemas']['Media']>
+
+	let tweet: Tweet = new Tweet(
+		tweet_data,
+		user_data_map,
+		referenced_tweets_data_map,
+		media_data_map
+	)
+
+	function on_click_tweet(tweet: Tweet): void {
+		const selection = window.getSelection()
+
+		if (selection?.isCollapsed) {
+			location.href = tweet.status_url
+		}
+	}
+</script>
+
+<div class="flex_column tweet_container" on:click={() => on_click_tweet(tweet)} on:keypress>
+	{#if tweet.is_retweet}
+		<div class="flex_row align_items_center retweet_row">
+			<div class="flex_row align_items_center avatar_above">
+				<div class="retweet_icon"><RetweetSmall /></div>
+			</div>
+			{$_('name_retweeted', {
+				values: { name: tweet.retweet_user_name },
+			})}
+		</div>
+	{/if}
+	<div class="flex_row tweet_element">
+		<div class="avatar_container">
+			<a href={tweet.profile_url}>
+				<img class="avatar_icon" src={tweet.profile_image_url} alt="avatar" />
+			</a>
+		</div>
+		<div class="flex_column tweet_body">
+			<div class="flex_column text_column">
+				<div class="flex_row username_row">
+					<div class="name overflow_ellipsis">
+						<a href={tweet.profile_url}>{tweet.name}</a>
+					</div>
+					<div class="username overflow_ellipsis">
+						<a href={tweet.profile_url}>@{tweet.username}</a>
+					</div>
+					<div>·</div>
+					<div class="time">
+						<a href={tweet.status_url}>
+							<time datetime={tweet.created_at}>{tweet.elapsed_time}</time>
+						</a>
+					</div>
+					<div class="flex_auto" />
+					<div class="action_icon tap_area_container">
+						<div class="tap_area" />
+						<ThreeDot />
+					</div>
+				</div>
+				<div dir="auto">
+					{@html tweet.html_text}
+				</div>
+			</div>
+
+			{#if tweet.media_count === 1}
+				<div class="media_frame">
+					<img alt="画像" src={tweet.media_url_0} class="media" />
+				</div>
+			{:else if tweet.media_count === 2}
+				<div class="media_frame flex_column media_column media_frame_tile">
+					<div class="flex_row media_row">
+						<div class="media_cell">
+							<img alt="画像" src={tweet.media_url_0} class="media" />
+						</div>
+						<div class="media_cell">
+							<img alt="画像" src={tweet.media_url_1} class="media" />
+						</div>
+					</div>
+				</div>
+			{:else if tweet.media_count === 3}
+				<div class="media_frame media_row media_frame_tile">
+					<div class="media_cell">
+						<img alt="画像" src={tweet.media_url_0} class="media" />
+					</div>
+					<div class="flex_column media_column">
+						<div class="media_cell">
+							<img alt="画像" src={tweet.media_url_1} class="media" />
+						</div>
+						<div class="media_cell">
+							<img alt="画像" src={tweet.media_url_2} class="media" />
+						</div>
+					</div>
+				</div>
+			{:else if tweet.media_count === 4}
+				<div class="media_frame flex_column media_column media_frame_tile">
+					<div class="flex_row media_row">
+						<div class="media_cell">
+							<img alt="画像" src={tweet.media_url_0} class="media" />
+						</div>
+						<div class="media_cell">
+							<img alt="画像" src={tweet.media_url_1} class="media" />
+						</div>
+					</div>
+					<div class="flex_row media_row">
+						<div class="media_cell">
+							<img alt="画像" src={tweet.media_url_2} class="media" />
+						</div>
+						<div class="media_cell">
+							<img alt="画像" src={tweet.media_url_3} class="media" />
+						</div>
+					</div>
+				</div>
+			{/if}
+
+			<div class="flex_row align_items_center action_row">
+				<div class="flex_row align_items_center action">
+					<div class="action_icon tap_area_container">
+						<div class="tap_area" />
+						<Reply />
+					</div>
+					<div class="icon_text overflow_ellipsis">{tweet.reply_count}</div>
+				</div>
+				<div class="flex_row align_items_center action">
+					<div class="action_icon tap_area_container">
+						<div class="tap_area" />
+						<Retweet />
+					</div>
+					<div class="icon_text overflow_ellipsis">{tweet.retweet_count}</div>
+				</div>
+				<div class="flex_row align_items_center action">
+					<div class="action_icon tap_area_container">
+						<div class="tap_area" />
+						<Like />
+					</div>
+					<div class="icon_text overflow_ellipsis">{tweet.like_count}</div>
+				</div>
+				<div class="flex_row align_items_center action_up_arrow">
+					<div class="action_icon tap_area_container">
+						<div class="tap_area" />
+						<UpArrow />
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.tweet_container {
+		padding: 16px;
+		gap: 6px;
+		cursor: pointer;
+	}
+
+	.tweet_container:hover {
+		transition: 0.2s;
+		background-color: rgb(245, 248, 250);
+	}
+
+	.avatar_above {
+		min-width: 48px;
+		justify-content: flex-end;
+	}
+
+	.tweet_element {
+		gap: 12px;
+	}
+
+	.tweet_body {
+		gap: 12px;
+		min-width: 0;
+		flex: auto;
+
+		font-size: 16px;
+		line-height: 20px;
+		font-weight: 400;
+	}
+
+	.text_column {
+		gap: 8px;
+		min-width: 0;
+		overflow-wrap: break-word;
+	}
+
+	.username_row {
+		gap: 4px;
+
+		font-weight: 400;
+		font-size: 15px;
+		line-height: 20px;
+	}
+
+	.time {
+		white-space: nowrap;
+	}
+
+	.time a {
+		color: var(--gray-color);
+	}
+
+	.action_row {
+		gap: 10px;
+
+		color: var(--gray-color);
+		font-size: 13px;
+		line-height: 16px;
+	}
+
+	.action {
+		gap: 10px;
+		flex: 1;
+	}
+
+	.action_up_arrow {
+		flex: 0;
+	}
+
+	.icon_text {
+		font-size: 14px;
+	}
+
+	.action_icon {
+		width: 17.5px;
+		height: 17.5px;
+		fill: var(--gray-color);
+	}
+</style>
diff --git a/src/lib/components/tweet_list.svelte b/src/lib/components/tweet_list.svelte
new file mode 100644
index 0000000..c5ece5d
--- /dev/null
+++ b/src/lib/components/tweet_list.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import TweetComponent from '$lib/components/tweet.svelte'
+	import Loading from '$lib/icons/loading.svelte'
+	import { TweetUtil } from '$lib/tweet_util'
+	import { Util } from '$lib/util'
+	import { onMount } from 'svelte'
+	import type { components } from 'twitter-api-sdk/dist/types'
+	import '../../routes/app.css'
+
+	let tweets_data: components['schemas']['Tweet'][] = []
+	let users_data: components['schemas']['User'][] = []
+	let referenced_tweets_data: components['schemas']['Tweet'][] = []
+	let media_data: components['schemas']['Media'][] = []
+
+	export let api_path: string
+
+	let user_data_map: Map<string, components['schemas']['User']>
+	let referenced_tweets_data_map: Map<string, components['schemas']['Tweet']>
+	let media_data_map: Map<string, components['schemas']['Media']>
+
+	let is_loading = false
+
+	async function fetch_data(api_path: string): Promise<void> {
+		const tweets = await fetch(api_path)
+
+		if (tweets.status !== 200) {
+			console.log(tweets.body)
+			return
+		}
+
+		const home_data = await tweets.json()
+
+		tweets_data = home_data.data
+		users_data = home_data.includes.users ?? []
+		referenced_tweets_data = home_data.includes.tweets ?? []
+		media_data = home_data.includes.media ?? []
+
+		console.log(tweets_data.length)
+
+		user_data_map = Util.to_map_by_id(users_data)
+		referenced_tweets_data_map = Util.to_map_by_id(referenced_tweets_data)
+
+		const missing_media_data = await TweetUtil.get_missing_media_data(
+			tweets_data,
+			user_data_map,
+			referenced_tweets_data_map,
+			media_data
+		)
+
+		media_data = media_data.concat(missing_media_data)
+
+		media_data_map = Util.to_map_by_media_key(media_data)
+	}
+
+	onMount(async () => {
+		if (tweets_data.length === 0) {
+			is_loading = true
+			await fetch_data(api_path)
+			is_loading = false
+		}
+	})
+</script>
+
+{#if is_loading}
+	<div style="padding: 16px; display: flex; justify-content: center">
+		<Loading />
+	</div>
+{:else}
+	<div class="flex_column gap_border">
+		{#each tweets_data as tweet_data}
+			<TweetComponent {tweet_data} {user_data_map} {referenced_tweets_data_map} {media_data_map} />
+		{/each}
+	</div>
+{/if}
diff --git a/src/routes/home/+page.svelte b/src/routes/home/+page.svelte
index 0ad4e98..105c781 100644
--- a/src/routes/home/+page.svelte
+++ b/src/routes/home/+page.svelte
@@ -1,78 +1,12 @@
 <script lang="ts">
-	import Like from '$lib/icons/like.svelte'
-	import Loading from '$lib/icons/loading.svelte'
-	import Reply from '$lib/icons/reply.svelte'
-	import Retweet from '$lib/icons/retweet.svelte'
-	import RetweetSmall from '$lib/icons/retweet_small.svelte'
 	import ThreeDot from '$lib/icons/three_dot.svelte'
-	import UpArrow from '$lib/icons/up_arrow.svelte'
-	import { Tweet } from '$lib/tweet'
-	import { TweetUtil } from '$lib/tweet_util'
-	import { Util } from '$lib/util'
-	import { onMount } from 'svelte'
 	import { _, locale, locales } from 'svelte-i18n'
-	import type { components } from 'twitter-api-sdk/dist/types'
 	import '../app.css'
+	import TweetList from '$lib/components/tweet_list.svelte'
 
 	export let post_hint_element: HTMLElement
 	export let post_element: HTMLElement
 
-	let tweets_data: components['schemas']['Tweet'][] = []
-	let users_data: components['schemas']['User'][] = []
-	let referenced_tweets_data: components['schemas']['Tweet'][] = []
-	let media_data: components['schemas']['Media'][] = []
-
-	let user_data_map: Map<string, components['schemas']['User']>
-	let referenced_tweets_data_map: Map<string, components['schemas']['Tweet']>
-	let media_data_map: Map<string, components['schemas']['Media']>
-
-	let is_loading = false
-
-	async function fetch_home(): Promise<void> {
-		const tweets = await fetch('/api/home')
-
-		if (tweets.status !== 200) {
-			console.log(tweets.body)
-			return
-		}
-
-		const home_data = await tweets.json()
-
-		tweets_data = home_data.data
-		users_data = home_data.includes.users ?? []
-		referenced_tweets_data = home_data.includes.tweets ?? []
-		media_data = home_data.includes.media ?? []
-
-		console.log(tweets_data.length)
-
-		// console.log('home_data', home_data)
-		// console.log('tweets_data', tweets_data)
-		// console.log('referenced_tweets_data', referenced_tweets_data)
-		// console.log('media_data', media_data)
-
-		user_data_map = Util.to_map_by_id(users_data)
-		referenced_tweets_data_map = Util.to_map_by_id(referenced_tweets_data)
-
-		const missing_media_data = await TweetUtil.get_missing_media_data(
-			tweets_data,
-			user_data_map,
-			referenced_tweets_data_map,
-			media_data
-		)
-
-		media_data = media_data.concat(missing_media_data)
-
-		media_data_map = Util.to_map_by_media_key(media_data)
-	}
-
-	function on_click_tweet(tweet: Tweet): void {
-		const selection = window.getSelection()
-
-		if (selection?.isCollapsed) {
-			location.href = tweet.status_url
-		}
-	}
-
 	function on_input_post_tweet(): void {
 		const exists_post_tweet_text = post_element.innerText !== ''
 
@@ -86,14 +20,6 @@
 		localStorage.setItem('locale', $locale ?? '')
 	}
 
-	onMount(async () => {
-		if (tweets_data.length === 0) {
-			is_loading = true
-			await fetch_home()
-			is_loading = false
-		}
-	})
-
 	console.log($locale)
 </script>
 
@@ -161,151 +87,7 @@
 				</div>
 			</div>
 
-			{#if is_loading}
-				<div style="padding: 16px; display: flex; justify-content: center">
-					<Loading />
-				</div>
-			{:else}
-				<div class="flex_column gap_border">
-					{#each tweets_data as tweet_data}
-						{@const tweet = new Tweet(
-							tweet_data,
-							user_data_map,
-							referenced_tweets_data_map,
-							media_data_map
-						)}
-						<div
-							class="flex_column tweet_container"
-							on:click={() => on_click_tweet(tweet)}
-							on:keypress
-						>
-							{#if tweet.is_retweet}
-								<div class="flex_row align_items_center retweet_row">
-									<div class="flex_row align_items_center avatar_above">
-										<div class="retweet_icon"><RetweetSmall /></div>
-									</div>
-									{$_('name_retweeted', {
-										values: { name: tweet.retweet_user_name },
-									})}
-								</div>
-							{/if}
-							<div class="flex_row tweet_element">
-								<div class="avatar_container">
-									<a href={tweet.profile_url}>
-										<img class="avatar_icon" src={tweet.profile_image_url} alt="avatar" />
-									</a>
-								</div>
-								<div class="flex_column tweet_body">
-									<div class="flex_column text_column">
-										<div class="flex_row username_row">
-											<div class="name overflow_ellipsis">
-												<a href={tweet.profile_url}>{tweet.name}</a>
-											</div>
-											<div class="username overflow_ellipsis">
-												<a href={tweet.profile_url}>@{tweet.username}</a>
-											</div>
-											<div>·</div>
-											<div class="time">
-												<a href={tweet.status_url}>
-													<time datetime={tweet.created_at}>{tweet.elapsed_time}</time>
-												</a>
-											</div>
-											<div class="flex_auto" />
-											<div class="action_icon tap_area_container">
-												<div class="tap_area" />
-												<ThreeDot />
-											</div>
-										</div>
-										<div dir="auto">
-											{@html tweet.html_text}
-										</div>
-									</div>
-
-									{#if tweet.media_count === 1}
-										<div class="media_frame">
-											<img alt="画像" src={tweet.media_url_0} class="media" />
-										</div>
-									{:else if tweet.media_count === 2}
-										<div class="media_frame flex_column media_column media_frame_tile">
-											<div class="flex_row media_row">
-												<div class="media_cell">
-													<img alt="画像" src={tweet.media_url_0} class="media" />
-												</div>
-												<div class="media_cell">
-													<img alt="画像" src={tweet.media_url_1} class="media" />
-												</div>
-											</div>
-										</div>
-									{:else if tweet.media_count === 3}
-										<div class="media_frame media_row media_frame_tile">
-											<div class="media_cell">
-												<img alt="画像" src={tweet.media_url_0} class="media" />
-											</div>
-											<div class="flex_column media_column">
-												<div class="media_cell">
-													<img alt="画像" src={tweet.media_url_1} class="media" />
-												</div>
-												<div class="media_cell">
-													<img alt="画像" src={tweet.media_url_2} class="media" />
-												</div>
-											</div>
-										</div>
-									{:else if tweet.media_count === 4}
-										<div class="media_frame flex_column media_column media_frame_tile">
-											<div class="flex_row media_row">
-												<div class="media_cell">
-													<img alt="画像" src={tweet.media_url_0} class="media" />
-												</div>
-												<div class="media_cell">
-													<img alt="画像" src={tweet.media_url_1} class="media" />
-												</div>
-											</div>
-											<div class="flex_row media_row">
-												<div class="media_cell">
-													<img alt="画像" src={tweet.media_url_2} class="media" />
-												</div>
-												<div class="media_cell">
-													<img alt="画像" src={tweet.media_url_3} class="media" />
-												</div>
-											</div>
-										</div>
-									{/if}
-
-									<div class="flex_row align_items_center action_row">
-										<div class="flex_row align_items_center action">
-											<div class="action_icon tap_area_container">
-												<div class="tap_area" />
-												<Reply />
-											</div>
-											<div class="icon_text overflow_ellipsis">{tweet.reply_count}</div>
-										</div>
-										<div class="flex_row align_items_center action">
-											<div class="action_icon tap_area_container">
-												<div class="tap_area" />
-												<Retweet />
-											</div>
-											<div class="icon_text overflow_ellipsis">{tweet.retweet_count}</div>
-										</div>
-										<div class="flex_row align_items_center action">
-											<div class="action_icon tap_area_container">
-												<div class="tap_area" />
-												<Like />
-											</div>
-											<div class="icon_text overflow_ellipsis">{tweet.like_count}</div>
-										</div>
-										<div class="flex_row align_items_center action_up_arrow">
-											<div class="action_icon tap_area_container">
-												<div class="tap_area" />
-												<UpArrow />
-											</div>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					{/each}
-				</div>
-			{/if}
+			<TweetList api_path="/api/home" />
 		</div>
 	</div>
 	<div />
@@ -338,83 +120,4 @@
 	.post_element {
 		position: relative;
 	}
-
-	.tweet_container {
-		padding: 16px;
-		gap: 6px;
-		cursor: pointer;
-	}
-
-	.tweet_container:hover {
-		transition: 0.2s;
-		background-color: rgb(245, 248, 250);
-	}
-
-	.avatar_above {
-		min-width: 48px;
-		justify-content: flex-end;
-	}
-
-	.tweet_element {
-		gap: 12px;
-	}
-
-	.tweet_body {
-		gap: 12px;
-		min-width: 0;
-		flex: auto;
-
-		font-size: 16px;
-		line-height: 20px;
-		font-weight: 400;
-	}
-
-	.text_column {
-		gap: 8px;
-		min-width: 0;
-		overflow-wrap: break-word;
-	}
-
-	.username_row {
-		gap: 4px;
-
-		font-weight: 400;
-		font-size: 15px;
-		line-height: 20px;
-	}
-
-	.time {
-		white-space: nowrap;
-	}
-
-	.time a {
-		color: var(--gray-color);
-	}
-
-	.action_row {
-		gap: 10px;
-
-		color: var(--gray-color);
-		font-size: 13px;
-		line-height: 16px;
-	}
-
-	.action {
-		gap: 10px;
-		flex: 1;
-	}
-
-	.action_up_arrow {
-		flex: 0;
-	}
-
-	.icon_text {
-		font-size: 14px;
-	}
-
-	.action_icon {
-		width: 17.5px;
-		height: 17.5px;
-		fill: var(--gray-color);
-	}
 </style>