From aad2f1102c69827d7abc8da2de849fdd62de88aa Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Tue, 20 Jun 2023 14:18:28 +0800
Subject: [PATCH] Added frontend CreatePost modal

---
 frontend/app.config.ts                   |  1 +
 frontend/assets/css/tailwind.css         | 10 ++--
 frontend/components/modal/CreatePost.vue | 58 ++++++++++++++++++++++++
 frontend/pages/index.vue                 | 16 +++++++
 4 files changed, 82 insertions(+), 3 deletions(-)
 create mode 100644 frontend/components/modal/CreatePost.vue

diff --git a/frontend/app.config.ts b/frontend/app.config.ts
index 620cd88..dbf0fbb 100644
--- a/frontend/app.config.ts
+++ b/frontend/app.config.ts
@@ -7,6 +7,7 @@ export default defineAppConfig({
             loading: 'svg-spinners:90-ring-with-bg',
             twitter: 'logos:twitter',
             github: 'mdi:github',
+            plus: 'mdi:plus',
         },
     },
 })
diff --git a/frontend/assets/css/tailwind.css b/frontend/assets/css/tailwind.css
index f639b5c..7531f33 100644
--- a/frontend/assets/css/tailwind.css
+++ b/frontend/assets/css/tailwind.css
@@ -5,13 +5,17 @@
 html,
 body,
 #__nuxt {
-	@apply text-light h-full w-full bg-primary;
+	@apply h-full w-full bg-primary text-light;
 }
 
 input {
-	@apply bg-darkgray outline-none focus:outline-none;
+	@apply border border-lightgray bg-darkgray p-2 outline-none focus:outline-none;
 }
 
 textarea {
-	@apply bg-darkgray outline-none focus:outline-none;
+	@apply resize-none bg-transparent py-4 outline-none focus:outline-none;
+}
+
+textarea::placeholder {
+	@apply text-[#71767b];
 }
diff --git a/frontend/components/modal/CreatePost.vue b/frontend/components/modal/CreatePost.vue
new file mode 100644
index 0000000..d92f29c
--- /dev/null
+++ b/frontend/components/modal/CreatePost.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { MaybeElement } from '@vueuse/core'
+
+const emits = defineEmits(['close'])
+
+const newPost = reactive({
+    title: '',
+    description: '',
+})
+
+const modal = ref<MaybeElement>()
+const isSubmitting = ref<Boolean>(false)
+
+const { textarea: descriptionTextArea, triggerResize } = useTextareaAutosize()
+
+const closeModal = () => {
+    emits('close')
+}
+
+const submitPost = async () => {
+    isSubmitting.value = true
+
+    await createNewPost(newPost)
+
+    isSubmitting.value = false
+    closeModal()
+}
+
+onClickOutside(modal, (event) => {
+    closeModal()
+})
+
+watch(
+    () => newPost.description,
+    () => {
+        triggerResize()
+    }
+)
+</script>
+
+<template>
+    <div class="fixed top-0 flex h-screen w-screen justify-center">
+        <div ref="modal"
+            class="relative mt-20 flex h-fit max-h-[1000px] min-h-[500px] w-2/3 flex-col items-center border border-lightgray bg-secondary p-4">
+            <label class="mt-2 w-full"> Title </label>
+            <input type="text" v-model="newPost.title" class="mt-2 w-full rounded-md" />
+
+            <textarea ref="descriptionTextArea" v-model="newPost.description" placeholder="Enter Description"
+                class="mb-16 mt-8 w-full rounded-md"></textarea>
+
+            <button @click="submitPost()"
+                class="absolute bottom-6 flex gap-2 rounded-full border border-lightgray bg-blue-500 px-6 py-2">
+                <Icon v-if="isSubmitting" name="loading" />
+                <div> Tweet </div>
+            </button>
+        </div>
+    </div>
+</template>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 59f41fa..1a40290 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -7,6 +7,7 @@ import { z } from 'zod'
 
 const posts = usePosts()
 const lastPost = ref<Number>(0)
+const openCreatePostModal = ref<Boolean>(false)
 
 const responseValidator = z.object({
     status: z.number(),
@@ -33,6 +34,14 @@ const logout = async () => {
     useRouter().push('/login')
 }
 
+const toggleCreatePostModal = () => {
+    openCreatePostModal.value = !openCreatePostModal.value
+}
+
+const createPost = () => {
+    toggleCreatePostModal()
+}
+
 onMounted(() => {
     getPosts()
 })
@@ -43,11 +52,18 @@ onMounted(() => {
         <Header />
         <div class="mt-16 flex w-full items-center justify-center">
             <div class="flex w-1/2 flex-col gap-4 px-4 pb-10 pt-4 2xl:w-1/3">
+                <button @click="getUserPosts()"> User Posts </button>
                 <div v-if="posts" v-for="post in posts">
                     <PostCard :title="post.title" :description="post.description" />
                 </div>
                 <button @click="getPosts()">More {{ lastPost }}</button>
             </div>
         </div>
+        <button @click="createPost()"
+            class="fixed bottom-12 right-12 flex items-center justify-center gap-2 rounded-full bg-blue-500 p-4">
+            <Icon name="plus" />
+            Create Post
+        </button>
+        <ModalCreatePost v-if="openCreatePostModal" @close="toggleCreatePostModal()" />
     </div>
 </template>