From f1392ba8e5d90cb424237304ccbb061b1d94d166 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Tue, 5 Apr 2022 17:45:40 -0700
Subject: [PATCH] Post Tweets using a post shadow endpoint.

---
 src/components/compose.svelte | 65 +++++++++++++++++++++++++++++++++++
 src/routes/home/index.svelte  |  3 ++
 src/routes/home/index.ts      | 25 ++++++++++++++
 3 files changed, 93 insertions(+)
 create mode 100644 src/components/compose.svelte

diff --git a/src/components/compose.svelte b/src/components/compose.svelte
new file mode 100644
index 0000000..d6c34c1
--- /dev/null
+++ b/src/components/compose.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+  let tweet = ''
+  let maxCharacters = 140
+
+  $: charactersLeft = maxCharacters - tweet.length
+</script>
+
+<div class="compose">
+  <img src="/profile/matia/avatar.webp" alt="Avatar">
+
+  <form action="/home" method="post" autocomplete="off">
+    <input 
+      aria-label="Enter your tweet"
+      bind:value={tweet}
+      name="tweet"
+      placeholder="What's you hot take?"
+      type="text"
+    />
+    <button
+      class="btn"
+      class:error={charactersLeft < 0}
+      disabled={charactersLeft < 0}
+      type="submit">
+        {charactersLeft === maxCharacters ? 'Tweet' : charactersLeft}
+    </button>
+  </form>
+</div>
+
+<style>
+	.compose {
+		display: grid;
+		grid-template-columns: min-content 1fr;
+		align-items: center;
+		gap: var(--spacing-16);
+		padding: var(--spacing-16) var(--spacing-24);
+		border-bottom: 1px solid var(--color-border-primary);
+	}
+
+	img {
+		width: 48px;
+		height: 48px;
+		border-radius: 50%;
+	}
+
+	form {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-16);
+	}
+
+	input {
+		color: var(--color-text-primary);
+		background-color: transparent;
+	}
+
+	button {
+		min-width: 80px;
+		font-size: var(--font-16);
+		padding: var(--spacing-16);
+	}
+
+	.error {
+		color: tomato;
+	}
+</style>
\ No newline at end of file
diff --git a/src/routes/home/index.svelte b/src/routes/home/index.svelte
index b9ed7c1..0c71006 100644
--- a/src/routes/home/index.svelte
+++ b/src/routes/home/index.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Compose from '$root/components/compose.svelte'
 	import Tweet from '$root/components/tweet.svelte'
 	import type { TweetType } from '$root/types'
 
@@ -11,6 +12,8 @@
 
 <h1>Feed</h1>
 
+<Compose />
+
 {#each tweets as tweet (tweet.id)}
 	<Tweet {tweet} />
 {/each}
diff --git a/src/routes/home/index.ts b/src/routes/home/index.ts
index 0cc692b..ea19b7c 100644
--- a/src/routes/home/index.ts
+++ b/src/routes/home/index.ts
@@ -40,4 +40,29 @@ export const get: RequestHandler = async () => {
     status: 200,
     body: { tweets }
   }
+}
+
+export const post: RequestHandler = async ({ request }) => {
+  const form = await request.formData()
+  const tweet = String(form.get('tweet'))
+
+  if (tweet.length > 140) {
+    return {
+      status: 400,
+      body: 'Maximum Tweet length exceeded.',
+      headers: { location: '/home' }
+    }
+  }
+
+  await prisma.tweet.create({
+    data: {
+      posted: new Date(),
+      url: Math.random().toString(16).slice(2),
+      content: tweet,
+      likes: 0,
+      user: { connect: { id: 1 } }
+    }
+  })
+
+  return {}
 }
\ No newline at end of file