diff --git a/diskuy/.eslintcache b/diskuy/.eslintcache
index 78bb6f8533530d4eb8e0edfb0b7fe498a5b157da..dc06ed4c2f7bc8994ebd5ad9d64c740ef9d05f28 100644
--- a/diskuy/.eslintcache
+++ b/diskuy/.eslintcache
@@ -1 +1 @@
-[{"C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\index.js":"1","C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\reportWebVitals.js":"2","C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\App.js":"3","C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\Topic.js":"4","C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\Thread.js":"5","C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\Profile.js":"6","C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\Navbar.js":"7","C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\Comment.js":"8","C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\Button.js":"9","C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\Post.js":"10"},{"size":500,"mtime":1608226437106,"results":"11","hashOfConfig":"12"},{"size":362,"mtime":1608226437230,"results":"13","hashOfConfig":"12"},{"size":515,"mtime":1609338774890,"results":"14","hashOfConfig":"12"},{"size":734,"mtime":1609487474112,"results":"15","hashOfConfig":"12"},{"size":2440,"mtime":1609338774894,"results":"16","hashOfConfig":"12"},{"size":724,"mtime":1609338774893,"results":"17","hashOfConfig":"12"},{"size":1101,"mtime":1609338774892,"results":"18","hashOfConfig":"12"},{"size":477,"mtime":1608492472838,"results":"19","hashOfConfig":"12"},{"size":310,"mtime":1609338774891,"results":"20","hashOfConfig":"12"},{"size":514,"mtime":1608492472844,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"jinzal",{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"33","usedDeprecatedRules":"24"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"36","messages":"37","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"38","usedDeprecatedRules":"24"},{"filePath":"39","messages":"40","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"41","messages":"42","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\index.js",[],["45","46"],"C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\reportWebVitals.js",[],"C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\App.js",[],"C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\Topic.js",[],"C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\Thread.js",["47"],"import React, { useState } from \"react\";\r\nimport './Thread.css';\r\nimport Comment from './Comment';\r\nimport Post from './Post';\r\n\r\nconst placeholder = [\r\n    {\r\n        id:\"1\",\r\n        user: \"abcd\",\r\n        text: \"Halohalohalohalo\",\r\n        points: 10\r\n    }, \r\n    {\r\n        id:\"2\",\r\n        user: \"test123\",\r\n        text: \"SONOIHIGREGOEHOAI;HASD\",\r\n        points: 20\r\n    }, \r\n    {\r\n        id:\"3\",\r\n        user: \"heiehe\",\r\n        text: \"IJCSIFHIFHIU\",\r\n        points: 30\r\n    },\r\n];\r\n\r\n\r\nexport default function Thread(props){\r\n    const [idGenerator, setIdGenerator] = useState(4);\r\n    const [comment, setComment] = useState(placeholder);\r\n    const [textArea, setTextArea] = useState('');\r\n\r\n    function fillComment(event) {\r\n        setTextArea(event.currentTarget.value);\r\n    }\r\n\r\n    function addComment() {\r\n        let commentList = [...comment]\r\n        commentList.push({\r\n            id: idGenerator,\r\n            user:\"tester\",\r\n            text:textArea,\r\n            points:0\r\n        });\r\n        const newId = idGenerator + 1\r\n        setIdGenerator(newId);\r\n        console.log(idGenerator);\r\n        setComment(commentList);\r\n        setTextArea('');\r\n    }\r\n\r\n    function deleteComment(id) {\r\n        const newCommentList = comment.filter((value) => value.id != id);\r\n        setComment(newCommentList);\r\n    }\r\n\r\n    return (\r\n        <div>\r\n            <div>\r\n                <Post text=\"asdasfdgg\" header=\"Berita Gembira\" user=\"Hello guys David disini\" points=\"100\"/>\r\n                <h2 className='commentText'>Comment</h2>\r\n            </div>\r\n                {comment.map((value) => (\r\n                    <div id=\"threadComment\">\r\n                        <Comment text={value.text} user={value.user} points={value.points}/>\r\n                        <button type=\"button\" className=\"btn btn-outline-danger deleteButton\" onClick={() => deleteComment(value.id)}>Delete</button>\r\n                    </div>\r\n                ))}\r\n\r\n            <div id=\"addCommentSection\">\r\n                <h3>Add New Comment</h3>\r\n                <textarea className=\"form-control commentBox\" cols=\"70\" rows=\"5\" \r\n                    onChange={(event) => fillComment(event)}\r\n                    value={textArea}>  \r\n                </textarea>\r\n                <button className=\"btn btn-primary btn_cancel\" id=\"addCommentButton\" onClick={addComment}>Add Comment</button>\r\n            </div>\r\n        </div>\r\n    )\r\n}","C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\Profile.js",[],"C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\Navbar.js",["48"],"import React from \"react\";\r\nimport {ReactComponent as DiskuyLogo} from './Logo.svg';\r\nimport './Navbar.css';\r\nimport {\r\n    Link\r\n  } from \"react-router-dom\"\r\n\r\nconst Navbar = () => {\r\n    return (\r\n        <nav id = \"navbar\" className='navbar navbar-expand-lg navbar-light position-sticky fixed-top'>\r\n            <a className=\"navbar-brand\" href=\"\">\r\n                <div className=\"d-flex align-items-center\">\r\n                    <Link to=\"/\"><DiskuyLogo /></Link>\r\n                </div>\r\n            </a>\r\n            <ul className=\"navbar-nav ml-auto\">\r\n                <li className=\"nav-item ml-auto\">\r\n                    <Link to=\"/topic\" className=\"nav-link\"><b>Home</b></Link>\r\n                </li>\r\n                <li className=\"nav-item ml-auto\">\r\n                    <Link to=\"/thread\" className=\"nav-link\"><b>Threads</b></Link>\r\n                </li>\r\n                <li className=\"nav-item ml-auto\">\r\n                    <Link to=\"/profile\" className=\"nav-link\"><b>Profile</b></Link>\r\n                </li>\r\n            </ul>\r\n        </nav>\r\n    );\r\n}\r\n\r\nexport default Navbar;\r\n","C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\Comment.js",[],"C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\Button.js",[],"C:\\Users\\ASUS\\Documents\\pemfung\\diskuy\\src\\Post.js",[],{"ruleId":"49","replacedBy":"50"},{"ruleId":"51","replacedBy":"52"},{"ruleId":"53","severity":1,"message":"54","line":53,"column":67,"nodeType":"55","messageId":"56","endLine":53,"endColumn":69},{"ruleId":"57","severity":1,"message":"58","line":11,"column":13,"nodeType":"59","endLine":11,"endColumn":49},"no-native-reassign",["60"],"no-negated-in-lhs",["61"],"eqeqeq","Expected '!==' and instead saw '!='.","BinaryExpression","unexpected","jsx-a11y/anchor-is-valid","The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md","JSXOpeningElement","no-global-assign","no-unsafe-negation"]
+[{"C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\index.js":"1","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\reportWebVitals.js":"2","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\App.js":"3","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Topic.js":"4","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Navbar.js":"5","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Button.js":"6","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\TopicList.js":"7","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Form.js":"8","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\hooks\\input-hook.js":"9","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Threads\\Thread.js":"10","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Threads\\ListThreads.js":"11","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Profile\\Profile.js":"12","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Threads\\Comment.js":"13","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Threads\\Post.js":"14"},{"size":517,"mtime":1608228708909,"results":"15","hashOfConfig":"16"},{"size":375,"mtime":1608228708909,"results":"17","hashOfConfig":"16"},{"size":837,"mtime":1609612143893,"results":"18","hashOfConfig":"16"},{"size":1139,"mtime":1609612903308,"results":"19","hashOfConfig":"16"},{"size":943,"mtime":1609612143895,"results":"20","hashOfConfig":"16"},{"size":472,"mtime":1609612143894,"results":"21","hashOfConfig":"16"},{"size":734,"mtime":1609604488520,"results":"22","hashOfConfig":"16"},{"size":1490,"mtime":1609604488519,"results":"23","hashOfConfig":"16"},{"size":374,"mtime":1609495708947,"results":"24","hashOfConfig":"16"},{"size":3215,"mtime":1609612930247,"results":"25","hashOfConfig":"16"},{"size":703,"mtime":1609612143908,"results":"26","hashOfConfig":"16"},{"size":725,"mtime":1609612143948,"results":"27","hashOfConfig":"16"},{"size":477,"mtime":1609612143944,"results":"28","hashOfConfig":"16"},{"size":514,"mtime":1609612143941,"results":"29","hashOfConfig":"16"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},"1e00zfu",{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"39","messages":"40","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"41","usedDeprecatedRules":"32"},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"46","messages":"47","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"48","usedDeprecatedRules":"32"},{"filePath":"49","messages":"50","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"51","messages":"52","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"53","messages":"54","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"55","messages":"56","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"57","messages":"58","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},{"filePath":"59","messages":"60","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"32"},"C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\index.js",[],["61","62"],"C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\reportWebVitals.js",[],"C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\App.js",[],"C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Topic.js",["63"],"C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Navbar.js",["64"],"import React from \"react\";\r\nimport {ReactComponent as DiskuyLogo} from './Logo.svg';\r\nimport './Navbar.css';\r\nimport {\r\n    Link\r\n  } from \"react-router-dom\"\r\n\r\nconst Navbar = () => {\r\n    return (\r\n        <nav id = \"navbar\" className='navbar navbar-expand-lg navbar-light position-sticky fixed-top'>\r\n            <a className=\"navbar-brand\" href=\"\">\r\n                <div className=\"d-flex align-items-center\">\r\n                    <Link to=\"/\"><DiskuyLogo /></Link>\r\n                </div>\r\n            </a>\r\n            <ul className=\"navbar-nav ml-auto\">\r\n                <li className=\"nav-item ml-auto\">\r\n                    <Link to=\"/topic\" className=\"nav-link\"><b>Home</b></Link>\r\n                </li>\r\n                <li className=\"nav-item ml-auto\">\r\n                    <Link to=\"/thread\" className=\"nav-link\"><b>Threads</b></Link>\r\n                </li>\r\n                <li className=\"nav-item ml-auto\">\r\n                    <Link to=\"/profile\" className=\"nav-link\"><b>Profile</b></Link>\r\n                </li>\r\n            </ul>\r\n        </nav>\r\n    );\r\n}\r\n\r\nexport default Navbar;\r\n","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Button.js",[],"C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\TopicList.js",[],"C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Form.js",["65"],"import axios from \"axios\";\r\nimport React from \"react\";\r\nimport { useInput } from './hooks/input-hook';\r\n\r\nconst LINK = 'http://localhost:4000';\r\n\r\nexport default function Form(props){\r\n    const { value: title, bind: bindTitle, reset: resetTitle } = useInput('')\r\n    const { value: body, bind: bindBody, reset: resetBody } = useInput('')\r\n\r\n    const topicParam = props.match.params.topic\r\n\r\n    const handleSubmit = async (event) => {\r\n        event.preventDefault();\r\n\r\n        try {\r\n            const responseTopics = await axios.get(`${LINK}/api/topics`)\r\n            const topic = responseTopics.data.data.find(topic => topic.name === topicParam).id\r\n            const response = await axios.post(`${LINK}/api/threads`, {\r\n                thread: {\r\n                    content : body,\r\n                    points : 0,\r\n                    title : title,\r\n                    topic_id : topic,\r\n                    user_id : 1\r\n                }\r\n            })\r\n            props.history.push(`/${topicParam}`)\r\n        }\r\n        catch(error){\r\n\r\n        }\r\n        resetBody(); \r\n        resetTitle();\r\n    }\r\n\r\n    return (\r\n        <form onSubmit={handleSubmit}>\r\n            <label>\r\n                Title:\r\n                <input type='text' {...bindTitle}/>\r\n            </label>\r\n            <label>\r\n                Body:\r\n                <input type='text' {...bindBody}/>\r\n            </label>\r\n            <input type=\"submit\" value=\"Submit\"/>\r\n        </form>\r\n    )\r\n}","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\hooks\\input-hook.js",[],"C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Threads\\Thread.js",["66"],"C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Threads\\ListThreads.js",[],"C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Profile\\Profile.js",[],"C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Threads\\Comment.js",[],"C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Threads\\Post.js",[],{"ruleId":"67","replacedBy":"68"},{"ruleId":"69","replacedBy":"70"},{"ruleId":"71","severity":1,"message":"72","line":3,"column":8,"nodeType":"73","messageId":"74","endLine":3,"endColumn":14},{"ruleId":"75","severity":1,"message":"76","line":11,"column":13,"nodeType":"77","endLine":11,"endColumn":49},{"ruleId":"71","severity":1,"message":"78","line":19,"column":19,"nodeType":"73","messageId":"74","endLine":19,"endColumn":27},{"ruleId":"79","severity":1,"message":"80","line":35,"column":105,"nodeType":"81","messageId":"82","endLine":35,"endColumn":107},"no-native-reassign",["83"],"no-negated-in-lhs",["84"],"no-unused-vars","'Thread' is defined but never used.","Identifier","unusedVar","jsx-a11y/anchor-is-valid","The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md","JSXOpeningElement","'response' is assigned a value but never used.","eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected","no-global-assign","no-unsafe-negation"]
\ No newline at end of file
diff --git a/diskuy/package-lock.json b/diskuy/package-lock.json
index 8ba2b916319c21cb7763dd1046e47130a4512181..ce0783d8ba8669b02bc62f559b7e3621242ad5a7 100644
--- a/diskuy/package-lock.json
+++ b/diskuy/package-lock.json
@@ -3015,9 +3015,9 @@
       "integrity": "sha512-5Kgy8Cz6LPC9DJcNb3yjAXTu3XihQgEdnIg50c//zOC/MyLP0Clg+Y8Sh9ZjjnvBrDZU4DgXS9C3T9r4/scGZQ=="
     },
     "axios": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
-      "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
       "requires": {
         "follow-redirects": "^1.10.0"
       }
diff --git a/diskuy/package.json b/diskuy/package.json
index 3b140bb937b00545ada79703733b9bdbbd21146d..3c8f1e3143b7131098fd4b36c6a77e8fbc9e6efb 100644
--- a/diskuy/package.json
+++ b/diskuy/package.json
@@ -6,7 +6,7 @@
     "@testing-library/jest-dom": "^5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.6.0",
-    "axios": "^0.21.0",
+    "axios": "^0.21.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
diff --git a/diskuy/src/Threads/Thread.js b/diskuy/src/Threads/Thread.js
index 6e74e6cd3dd0e9739ca38fb0baea90eb4f9b1b84..3ab350455d1540a4876a2095922ad3fa6d50ae92 100644
--- a/diskuy/src/Threads/Thread.js
+++ b/diskuy/src/Threads/Thread.js
@@ -1,79 +1,96 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import './Thread.css';
 import Comment from './Comment';
 import Post from './Post';
+import { useInput } from '../hooks/input-hook';
+import axios from 'axios';
 
-const placeholder = [
-    {
-        id:"1",
-        user: "abcd",
-        text: "Halohalohalohalo",
-        points: 10
-    }, 
-    {
-        id:"2",
-        user: "test123",
-        text: "SONOIHIGREGOEHOAI;HASD",
-        points: 20
-    }, 
-    {
-        id:"3",
-        user: "heiehe",
-        text: "IJCSIFHIFHIU",
-        points: 30
-    },
-];
-
+const LINK = 'http://localhost:4000/';
 
 export default function Thread(props){
-    const [idGenerator, setIdGenerator] = useState(4);
-    const [comment, setComment] = useState(placeholder);
-    const [textArea, setTextArea] = useState('');
+    const [thread, setThread] = useState({
+        content : "",
+        id:"",
+        points:0,
+        title:"",
+        topic_id:"",
+        user_id:""
+    });
 
-    function fillComment(event) {
-        setTextArea(event.currentTarget.value);
-    }
+    const [comment, setComment] = useState([{
+        message : "",
+        points: 0,
+        status: "",
+        thread_id: "",
+        post_parent_id: "",
+        user_id:""
+    }]);
 
-    function addComment() {
-        let commentList = [...comment]
-        commentList.push({
-            id: idGenerator,
-            user:"tester",
-            text:textArea,
-            points:0
-        });
-        const newId = idGenerator + 1
-        setIdGenerator(newId);
-        console.log(idGenerator);
-        setComment(commentList);
-        setTextArea('');
-    }
+    const { value: input, bind: bindInput, reset: resetInput } = useInput('');
+    const threadParm = props.match.params.thread
+
+    const refreshComment = useCallback(() => {
+        const fetch = async () => {
+            const responseComment = await axios.get(`${LINK}/api/post/`);
+            const responseCommentData = responseComment.data.data.filter(comments => comments.thread_id == threadParm);
+            setComment(responseCommentData);
+        }
+        fetch();
+    }, [threadParm]);
+
+    useEffect(() => {
+        const fetch = async () => {
+            const responseThread = await axios.get(`${LINK}/api/threads/${threadParm}`);
+            const responseThreadData = responseThread.data.data;
+            setThread(responseThreadData);
 
-    function deleteComment(id) {
-        const newCommentList = comment.filter((value) => value.id !== id);
-        setComment(newCommentList);
+            refreshComment();
+        }
+        fetch()   
+    }, [threadParm, refreshComment]);
+
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+
+        try {
+            await axios.post(`${LINK}api/post`, {
+                post : {
+                    message : input,
+                    points : 0,
+                    status : 'iniapa',
+                    thread_id : threadParm,
+                    post_parent_id: "",
+                    user_id : 1
+                }
+            })
+            refreshComment();
+        } catch (error) {}
+        resetInput();
     }
 
+
     return (
         <div>
             <div>
-                <Post text="asdasfdgg" header="Berita Gembira" user="Hello guys David disini" points="100"/>
+                <Post text={thread.content} header={thread.title} user="Hello guys David disini" points={thread.point}/>
                 <h2 className='commentText'>Comment</h2>
             </div>
-                {comment.map((value) => (
-                    <div id="threadComment">
-                        <Comment text={value.text} user={value.user} points={value.points}/>
-                        <button type="button" className="btn btn-outline-danger deleteButton" onClick={() => deleteComment(value.id)}>Delete</button>
-                    </div>
-                ))}
+
+            {comment.map((value) => (
+                <div id="threadComment">
+                    <Comment text={value.message} user="Halo guys, David disini" points={value.points}/>
+                    {/* <button type="button" className="btn btn-outline-danger deleteButton" onClick={() => deleteComment(value.id)}>Delete</button> */}
+                </div>
+            ))}
 
             <div id="addCommentSection">
                 <h3>Add New Comment</h3>
-                <textarea className="form-control commentBox" cols="70" rows="5" 
-                    onChange={(event) => fillComment(event)}
-                    value={textArea}>  
-                </textarea>
-                <button className="btn btn-primary btn_cancel" id="addCommentButton" onClick={addComment}>Add Comment</button>
+                <form onSubmit={handleSubmit}>
+                    <textarea className="form-control commentBox" cols="70" rows="5" 
+                        {...bindInput}>  
+                    </textarea>
+                    <button className="btn btn-primary btn_cancel" id="addCommentButton" type="submit">Add Comment</button>
+                </form>
             </div>
         </div>
     )
diff --git a/diskuy/src/Topic.js b/diskuy/src/Topic.js
index 2343819d42525561bb77e61c44f40843815dd7cc..5232312154e46bb43bf368641c8f9585ad4e7698 100644
--- a/diskuy/src/Topic.js
+++ b/diskuy/src/Topic.js
@@ -1,11 +1,7 @@
-<<<<<<< HEAD
-import React, { useState } from "react";
-import Thread from './Threads/Thread'
-
-=======
 import React, { useEffect, useState } from "react";
 import axios from 'axios'
->>>>>>> b787d09a38745fb5844d313f83e7237b86318391
+import Thread from './Threads/Thread'
+
 import { Link } from "react-router-dom"
 
 const LINK = 'http://localhost:4000';
diff --git a/diskuy_back/config/dev.exs b/diskuy_back/config/dev.exs
index 517b630d827d9a55611f84fe3669280726565714..d06079618942d7e3812464e26e00603d96d2b9c6 100644
--- a/diskuy_back/config/dev.exs
+++ b/diskuy_back/config/dev.exs
@@ -2,8 +2,8 @@ use Mix.Config
 
 # Configure your database
 config :diskuy, Diskuy.Repo,
-  username: "rafif",
-  password: "rafif123",
+  username: "postgres",
+  password: "123456",
   database: "diskuy_dev",
   hostname: "localhost",
   show_sensitive_data_on_connection_error: true,