From e1ce5455beb79db88cb7a0bd4207c8a156a06c4e Mon Sep 17 00:00:00 2001
From: AmosChong <amoschong0820@gmail.com>
Date: Thu, 10 Nov 2022 12:41:39 +0800
Subject: [PATCH 1/3] Added leave a comment component

---
 .../ui/components/comment/Comment.stories.tsx | 18 +++++
 packages/ui/components/comment/Comment.tsx    | 68 +++++++++++++++++++
 packages/ui/components/comment/index.tsx      |  1 +
 packages/ui/package.json                      |  5 +-
 yarn.lock                                     | 10 +++
 5 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/components/comment/Comment.stories.tsx
 create mode 100644 packages/ui/components/comment/Comment.tsx
 create mode 100644 packages/ui/components/comment/index.tsx

diff --git a/packages/ui/components/comment/Comment.stories.tsx b/packages/ui/components/comment/Comment.stories.tsx
new file mode 100644
index 00000000..7c6eaba7
--- /dev/null
+++ b/packages/ui/components/comment/Comment.stories.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { Comment } from "./Comment";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+export default {
+    title: 'Components/Comment',
+    component: Comment,
+    argTypes: {
+
+    }
+} as ComponentMeta<typeof Comment>;
+
+const Template: ComponentStory<typeof Comment> = (args) => <Comment {...args}/>
+
+export const Default = Template.bind({});
+Default.args = {
+
+};
\ No newline at end of file
diff --git a/packages/ui/components/comment/Comment.tsx b/packages/ui/components/comment/Comment.tsx
new file mode 100644
index 00000000..29192a0e
--- /dev/null
+++ b/packages/ui/components/comment/Comment.tsx
@@ -0,0 +1,68 @@
+import {
+    FormControl,
+    FormLabel,
+    Heading,
+    AlertIcon,
+    AlertDescription,
+    Flex,
+    Input,
+    Alert,
+    Textarea,
+    Box,
+    Button
+} from "@chakra-ui/react";
+import { useState } from "react";
+import "@fontsource/inter";
+import "@fontsource/inder";
+
+export interface CommentProps {}
+
+interface commentType {
+    name: string,
+    email: string,
+    comment: string
+}
+
+export const Comment = (_props: CommentProps) => {
+    const [commentData, setCommentData] = useState<commentType>({ name: '', email: '', comment: '' })
+    const [showAlert, setShowAlert] = useState<boolean>(false);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        setCommentData({ name: '', email: '', comment: '' });
+        setShowAlert(true);
+    }
+
+    return (
+        <Box w='801px' h='457px'>
+            {showAlert ? (<Alert status='success'>
+                <AlertIcon />
+                <AlertDescription>The comment has been posted!</AlertDescription>
+            </Alert>) : <Box></Box>}
+            <Heading fontSize='48px' fontWeight={'400px'} fontFamily={"Inder"}>Leave a comment</Heading>
+            <Heading mt='29px' fontSize='24px' fontWeight={'400px'} fontFamily={"Inder"}>Your email address will not be published. Required fields are marked *</Heading>
+            <Box fontFamily={"Inter"}>
+                <form onSubmit={handleSubmit}>
+                    <FormControl>
+                        <Flex flexDirection='row' mt='59px' mb='29px' fontWeight={'500px'}>
+                            <Flex flexDirection='column' mr='54px'>
+                            <FormLabel>Name *</FormLabel>
+                            <Input w='320px'  placeholder='Your Name' type='text' required value={commentData.name} onChange={(e) => {setCommentData({ ...commentData, name: e.target.value })}} />
+                            </Flex>
+                            <Flex flexDirection='column'>
+                            <FormLabel>Email *</FormLabel>
+                            <Input w='320px' placeholder='eg. scse@ntu.edu.sg' type='email' required value={commentData.email} onChange={(e) => {setCommentData({ ...commentData, email: e.target.value })}} />
+                            </Flex>
+                        </Flex>
+                        <FormLabel>Comment *</FormLabel>
+                        <Textarea w='694px' placeholder='Your Comment' required value={commentData.comment} onChange={(e) => {setCommentData({ ...commentData, comment: e.target.value })}}/>
+                    </FormControl>
+                    <Button type='submit' mt={'29'} h={'48px'} w={'177px'}><Box fontWeight={'600px'}>Post Comment</Box> </Button>
+                </form>
+            </Box>
+        </Box>
+
+
+
+    )
+}
\ No newline at end of file
diff --git a/packages/ui/components/comment/index.tsx b/packages/ui/components/comment/index.tsx
new file mode 100644
index 00000000..8a172499
--- /dev/null
+++ b/packages/ui/components/comment/index.tsx
@@ -0,0 +1 @@
+export { Comment } from './Comment';
\ No newline at end of file
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 21f31c1a..8877db93 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -38,5 +38,8 @@
     "tsconfig": "*",
     "typescript": "^4.5.2"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@fontsource/inder": "^4.5.11",
+    "@fontsource/inter": "^4.5.14"
+  }
 }
diff --git a/yarn.lock b/yarn.lock
index 59b60b2f..89085be5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2373,6 +2373,16 @@
   dependencies:
     "@floating-ui/dom" "^1.0.0"
 
+"@fontsource/inder@^4.5.11":
+  version "4.5.11"
+  resolved "https://registry.yarnpkg.com/@fontsource/inder/-/inder-4.5.11.tgz#9198f1a339acb2a44af8ad2f29b0c7c57631d287"
+  integrity sha512-TtfYxEU1wNEUfQkNSPS5s6M8ljOaJpWU/YKWsZnP/tKvjgZnADd+CCk2r71URyr1yb9OB6wWmhfZRNR4mDv8Kw==
+
+"@fontsource/inter@^4.5.14":
+  version "4.5.14"
+  resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.5.14.tgz#3944b809aa7bf27dacd20bdc04a49fb738959724"
+  integrity sha512-JDC9AocdPLuGsASkvWw9hS5gtHE7K9dOwL98XLrk5yjYqxy4uVnScG58NUvFMJDVJRl/7c8Wnap6PEs+7Zvj1Q==
+
 "@formatjs/ecma402-abstract@1.11.4":
   version "1.11.4"
   resolved "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz"

From 5deeec0ad46ee72db1496eac0d2e6f5262f6465c Mon Sep 17 00:00:00 2001
From: AmosChong <amoschong0820@gmail.com>
Date: Thu, 10 Nov 2022 12:41:39 +0800
Subject: [PATCH 2/3] [SCSE-121] Added leave a comment component

---
 .../ui/components/comment/Comment.stories.tsx | 18 +++++
 packages/ui/components/comment/Comment.tsx    | 68 +++++++++++++++++++
 packages/ui/components/comment/index.tsx      |  1 +
 packages/ui/package.json                      |  5 +-
 yarn.lock                                     | 10 +++
 5 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/components/comment/Comment.stories.tsx
 create mode 100644 packages/ui/components/comment/Comment.tsx
 create mode 100644 packages/ui/components/comment/index.tsx

diff --git a/packages/ui/components/comment/Comment.stories.tsx b/packages/ui/components/comment/Comment.stories.tsx
new file mode 100644
index 00000000..7c6eaba7
--- /dev/null
+++ b/packages/ui/components/comment/Comment.stories.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { Comment } from "./Comment";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+export default {
+    title: 'Components/Comment',
+    component: Comment,
+    argTypes: {
+
+    }
+} as ComponentMeta<typeof Comment>;
+
+const Template: ComponentStory<typeof Comment> = (args) => <Comment {...args}/>
+
+export const Default = Template.bind({});
+Default.args = {
+
+};
\ No newline at end of file
diff --git a/packages/ui/components/comment/Comment.tsx b/packages/ui/components/comment/Comment.tsx
new file mode 100644
index 00000000..29192a0e
--- /dev/null
+++ b/packages/ui/components/comment/Comment.tsx
@@ -0,0 +1,68 @@
+import {
+    FormControl,
+    FormLabel,
+    Heading,
+    AlertIcon,
+    AlertDescription,
+    Flex,
+    Input,
+    Alert,
+    Textarea,
+    Box,
+    Button
+} from "@chakra-ui/react";
+import { useState } from "react";
+import "@fontsource/inter";
+import "@fontsource/inder";
+
+export interface CommentProps {}
+
+interface commentType {
+    name: string,
+    email: string,
+    comment: string
+}
+
+export const Comment = (_props: CommentProps) => {
+    const [commentData, setCommentData] = useState<commentType>({ name: '', email: '', comment: '' })
+    const [showAlert, setShowAlert] = useState<boolean>(false);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        setCommentData({ name: '', email: '', comment: '' });
+        setShowAlert(true);
+    }
+
+    return (
+        <Box w='801px' h='457px'>
+            {showAlert ? (<Alert status='success'>
+                <AlertIcon />
+                <AlertDescription>The comment has been posted!</AlertDescription>
+            </Alert>) : <Box></Box>}
+            <Heading fontSize='48px' fontWeight={'400px'} fontFamily={"Inder"}>Leave a comment</Heading>
+            <Heading mt='29px' fontSize='24px' fontWeight={'400px'} fontFamily={"Inder"}>Your email address will not be published. Required fields are marked *</Heading>
+            <Box fontFamily={"Inter"}>
+                <form onSubmit={handleSubmit}>
+                    <FormControl>
+                        <Flex flexDirection='row' mt='59px' mb='29px' fontWeight={'500px'}>
+                            <Flex flexDirection='column' mr='54px'>
+                            <FormLabel>Name *</FormLabel>
+                            <Input w='320px'  placeholder='Your Name' type='text' required value={commentData.name} onChange={(e) => {setCommentData({ ...commentData, name: e.target.value })}} />
+                            </Flex>
+                            <Flex flexDirection='column'>
+                            <FormLabel>Email *</FormLabel>
+                            <Input w='320px' placeholder='eg. scse@ntu.edu.sg' type='email' required value={commentData.email} onChange={(e) => {setCommentData({ ...commentData, email: e.target.value })}} />
+                            </Flex>
+                        </Flex>
+                        <FormLabel>Comment *</FormLabel>
+                        <Textarea w='694px' placeholder='Your Comment' required value={commentData.comment} onChange={(e) => {setCommentData({ ...commentData, comment: e.target.value })}}/>
+                    </FormControl>
+                    <Button type='submit' mt={'29'} h={'48px'} w={'177px'}><Box fontWeight={'600px'}>Post Comment</Box> </Button>
+                </form>
+            </Box>
+        </Box>
+
+
+
+    )
+}
\ No newline at end of file
diff --git a/packages/ui/components/comment/index.tsx b/packages/ui/components/comment/index.tsx
new file mode 100644
index 00000000..8a172499
--- /dev/null
+++ b/packages/ui/components/comment/index.tsx
@@ -0,0 +1 @@
+export { Comment } from './Comment';
\ No newline at end of file
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 21f31c1a..8877db93 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -38,5 +38,8 @@
     "tsconfig": "*",
     "typescript": "^4.5.2"
   },
-  "dependencies": {}
+  "dependencies": {
+    "@fontsource/inder": "^4.5.11",
+    "@fontsource/inter": "^4.5.14"
+  }
 }
diff --git a/yarn.lock b/yarn.lock
index 59b60b2f..89085be5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2373,6 +2373,16 @@
   dependencies:
     "@floating-ui/dom" "^1.0.0"
 
+"@fontsource/inder@^4.5.11":
+  version "4.5.11"
+  resolved "https://registry.yarnpkg.com/@fontsource/inder/-/inder-4.5.11.tgz#9198f1a339acb2a44af8ad2f29b0c7c57631d287"
+  integrity sha512-TtfYxEU1wNEUfQkNSPS5s6M8ljOaJpWU/YKWsZnP/tKvjgZnADd+CCk2r71URyr1yb9OB6wWmhfZRNR4mDv8Kw==
+
+"@fontsource/inter@^4.5.14":
+  version "4.5.14"
+  resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-4.5.14.tgz#3944b809aa7bf27dacd20bdc04a49fb738959724"
+  integrity sha512-JDC9AocdPLuGsASkvWw9hS5gtHE7K9dOwL98XLrk5yjYqxy4uVnScG58NUvFMJDVJRl/7c8Wnap6PEs+7Zvj1Q==
+
 "@formatjs/ecma402-abstract@1.11.4":
   version "1.11.4"
   resolved "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz"

From 580c48227dd7afe835c092d53225d1c8a91b90cc Mon Sep 17 00:00:00 2001
From: AmosChong <amoschong0820@gmail.com>
Date: Fri, 11 Nov 2022 23:08:33 +0800
Subject: [PATCH 3/3] Made some changes to the alert component

---
 packages/ui/components/comment/Comment.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/ui/components/comment/Comment.tsx b/packages/ui/components/comment/Comment.tsx
index 29192a0e..b76a6b0c 100644
--- a/packages/ui/components/comment/Comment.tsx
+++ b/packages/ui/components/comment/Comment.tsx
@@ -9,7 +9,7 @@ import {
     Alert,
     Textarea,
     Box,
-    Button
+    Button,
 } from "@chakra-ui/react";
 import { useState } from "react";
 import "@fontsource/inter";
@@ -31,14 +31,13 @@ export const Comment = (_props: CommentProps) => {
         e.preventDefault();
         setCommentData({ name: '', email: '', comment: '' });
         setShowAlert(true);
+        setTimeout(() => {
+            setShowAlert(false);
+        }, 3000);
     }
 
     return (
         <Box w='801px' h='457px'>
-            {showAlert ? (<Alert status='success'>
-                <AlertIcon />
-                <AlertDescription>The comment has been posted!</AlertDescription>
-            </Alert>) : <Box></Box>}
             <Heading fontSize='48px' fontWeight={'400px'} fontFamily={"Inder"}>Leave a comment</Heading>
             <Heading mt='29px' fontSize='24px' fontWeight={'400px'} fontFamily={"Inder"}>Your email address will not be published. Required fields are marked *</Heading>
             <Box fontFamily={"Inter"}>
@@ -60,6 +59,10 @@ export const Comment = (_props: CommentProps) => {
                     <Button type='submit' mt={'29'} h={'48px'} w={'177px'}><Box fontWeight={'600px'}>Post Comment</Box> </Button>
                 </form>
             </Box>
+            {showAlert ? (<Alert status='success' justifyContent={'center'} mt={'20px;'} w={'694px'}>
+                <AlertIcon />
+                <AlertDescription>The comment has been posted!</AlertDescription>
+            </Alert>) : <Box></Box>}
         </Box>