diff --git a/diskuy/.eslintcache b/diskuy/.eslintcache
index bf9f5c013da579f024d9567971dfd1eb1325c5be..a0ce846aeaae4714cf9446967bc29c87739c6667 100644
--- a/diskuy/.eslintcache
+++ b/diskuy/.eslintcache
@@ -1 +1 @@
-[{"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\\Thread.js":"5","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Navbar.js":"6","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Comment.js":"7","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Post.js":"8"},{"size":517,"mtime":1608228708909,"results":"9","hashOfConfig":"10"},{"size":375,"mtime":1608228708909,"results":"11","hashOfConfig":"10"},{"size":422,"mtime":1608520223358,"results":"12","hashOfConfig":"10"},{"size":574,"mtime":1608491642165,"results":"13","hashOfConfig":"10"},{"size":2440,"mtime":1608522296978,"results":"14","hashOfConfig":"10"},{"size":1094,"mtime":1608520223368,"results":"15","hashOfConfig":"10"},{"size":477,"mtime":1608490608416,"results":"16","hashOfConfig":"10"},{"size":514,"mtime":1608491567842,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"1e00zfu",{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"27","usedDeprecatedRules":"20"},{"filePath":"28","messages":"29","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"30","messages":"31","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"32","usedDeprecatedRules":"20"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\index.js",[],["37","38"],"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",["39","40"],"import React, { useState } from \"react\";\r\nimport Thread from './Thread'\r\n\r\nimport { Link } from \"react-router-dom\"\r\n\r\nconst threads = [\r\n {\r\n id: 'thread1'\r\n },\r\n {\r\n id: 'thread2'\r\n }\r\n]\r\n\r\nexport default function Topic(props){\r\n const [thread, setThread] = useState(threads)\r\n\r\n return (\r\n <div>\r\n <ul>\r\n {thread.map((value) => (\r\n <li>\r\n <Link to={`/topic/${value.id}`}>{value.id}</Link>\r\n </li>\r\n ))}\r\n </ul>\r\n </div>\r\n )\r\n}","C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Thread.js",["41"],"C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Navbar.js",["42"],"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=\"/\" 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\\Comment.js",[],"C:\\Users\\Ryo Axtonlie\\Documents\\..KULIAH\\SEM 5\\PemFung\\tk\\diskuy\\diskuy\\src\\Post.js",[],{"ruleId":"43","replacedBy":"44"},{"ruleId":"45","replacedBy":"46"},{"ruleId":"47","severity":1,"message":"48","line":2,"column":8,"nodeType":"49","messageId":"50","endLine":2,"endColumn":14},{"ruleId":"47","severity":1,"message":"51","line":16,"column":20,"nodeType":"49","messageId":"50","endLine":16,"endColumn":29},{"ruleId":"52","severity":1,"message":"53","line":53,"column":67,"nodeType":"54","messageId":"55","endLine":53,"endColumn":69},{"ruleId":"56","severity":1,"message":"57","line":11,"column":13,"nodeType":"58","endLine":11,"endColumn":49},"no-native-reassign",["59"],"no-negated-in-lhs",["60"],"no-unused-vars","'Thread' is defined but never used.","Identifier","unusedVar","'setThread' is assigned a value but never used.","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"]
\ No newline at end of file
+[{"F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\index.js":"1","F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\reportWebVitals.js":"2","F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\App.js":"3","F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\Navbar.js":"4","F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\Topic.js":"5","F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\Thread.js":"6","F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\Post.js":"7","F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\Comment.js":"8","F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\Button.js":"9","F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\Profile.js":"10"},{"size":517,"mtime":1608489407339,"results":"11","hashOfConfig":"12"},{"size":375,"mtime":1608489407340,"results":"13","hashOfConfig":"12"},{"size":515,"mtime":1609102161227,"results":"14","hashOfConfig":"12"},{"size":1101,"mtime":1609102018048,"results":"15","hashOfConfig":"12"},{"size":574,"mtime":1608499407034,"results":"16","hashOfConfig":"12"},{"size":2440,"mtime":1608526249684,"results":"17","hashOfConfig":"12"},{"size":514,"mtime":1608499407022,"results":"18","hashOfConfig":"12"},{"size":477,"mtime":1608499407004,"results":"19","hashOfConfig":"12"},{"size":310,"mtime":1609099703616,"results":"20","hashOfConfig":"12"},{"size":724,"mtime":1609103487236,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"dzubz0",{"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},{"filePath":"29","messages":"30","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"31","messages":"32","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":"33","usedDeprecatedRules":"24"},{"filePath":"34","messages":"35","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"36","usedDeprecatedRules":"24"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"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},"F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\index.js",[],["45","46"],"F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\reportWebVitals.js",[],"F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\App.js",[],"F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\Navbar.js",["47"],"F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\Topic.js",["48","49"],"import React, { useState } from \"react\";\r\nimport Thread from './Thread'\r\n\r\nimport { Link } from \"react-router-dom\"\r\n\r\nconst threads = [\r\n {\r\n id: 'thread1'\r\n },\r\n {\r\n id: 'thread2'\r\n }\r\n]\r\n\r\nexport default function Topic(props){\r\n const [thread, setThread] = useState(threads)\r\n\r\n return (\r\n <div>\r\n <ul>\r\n {thread.map((value) => (\r\n <li>\r\n <Link to={`/topic/${value.id}`}>{value.id}</Link>\r\n </li>\r\n ))}\r\n </ul>\r\n </div>\r\n )\r\n}","F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\Thread.js",["50"],"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}","F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\Post.js",[],"F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\Comment.js",[],"F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\Button.js",[],"F:\\Jonathan\\Kuliah\\Pemfung\\diskuy\\diskuy\\src\\Profile.js",[],{"ruleId":"51","replacedBy":"52"},{"ruleId":"53","replacedBy":"54"},{"ruleId":"55","severity":1,"message":"56","line":11,"column":13,"nodeType":"57","endLine":11,"endColumn":49},{"ruleId":"58","severity":1,"message":"59","line":2,"column":8,"nodeType":"60","messageId":"61","endLine":2,"endColumn":14},{"ruleId":"58","severity":1,"message":"62","line":16,"column":20,"nodeType":"60","messageId":"61","endLine":16,"endColumn":29},{"ruleId":"63","severity":1,"message":"64","line":53,"column":67,"nodeType":"65","messageId":"66","endLine":53,"endColumn":69},"no-native-reassign",["67"],"no-negated-in-lhs",["68"],"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-unused-vars","'Thread' is defined but never used.","Identifier","unusedVar","'setThread' 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/src/App.js b/diskuy/src/App.js
index 038e764cde4705f8f02989d29feee01d47ee46e6..d60035b6ec573314a62c97b64c3774d5f487031e 100644
--- a/diskuy/src/App.js
+++ b/diskuy/src/App.js
@@ -2,6 +2,7 @@ import './App.css';
import Thread from './Thread';
import Topic from './Topic';
import Navbar from './Navbar';
+import Profile from './Profile';
import {
BrowserRouter as Router,
Route,
@@ -14,6 +15,7 @@ function App() {
<Navbar />
<Route exact path='/topic/:thread' component={Thread} />
<Route exact path='/topic' component={Topic} />
+ <Route exact path='/profile' component={Profile} />
</Router>
);
}
diff --git a/diskuy/src/Button.css b/diskuy/src/Button.css
new file mode 100644
index 0000000000000000000000000000000000000000..8ba8838ab385a19a0b3a211ab225d875aec3a0ac
--- /dev/null
+++ b/diskuy/src/Button.css
@@ -0,0 +1,18 @@
+.button {
+ border-radius: 4px;
+ border-width: 0px;
+ padding: 8px;
+ font-family: "DM Sans";
+ color: #ffffff;
+ border-style: none;
+}
+
+.orange {
+ background-color: #DE6600;
+ border-color: #DE6600;
+}
+
+.green {
+ background-color: #007A7A;
+ border-color: #007A7A;
+}
\ No newline at end of file
diff --git a/diskuy/src/Button.js b/diskuy/src/Button.js
new file mode 100644
index 0000000000000000000000000000000000000000..e7402bbcb40adc6ea5a4b8190726e37deef11d67
--- /dev/null
+++ b/diskuy/src/Button.js
@@ -0,0 +1,15 @@
+import React from "react";
+import './Button.css';
+import {
+ Link
+ } from "react-router-dom"
+
+function Button(props) {
+ return (
+ <Link to={`/${props.url}`}>
+ <button className={`button ${props.color}`}>{props.text}</button>
+ </Link>
+ )
+}
+
+export default Button;
\ No newline at end of file
diff --git a/diskuy/src/Navbar.js b/diskuy/src/Navbar.js
index 809548b90116bd2eb7395a53ce9669582b588745..97376631ee7a896c32b869a498e80ed79cc156c2 100644
--- a/diskuy/src/Navbar.js
+++ b/diskuy/src/Navbar.js
@@ -21,7 +21,7 @@ const Navbar = () => {
<Link to="/thread" className="nav-link"><b>Threads</b></Link>
</li>
<li className="nav-item ml-auto">
- <Link to="/" className="nav-link"><b>Profile</b></Link>
+ <Link to="/profile" className="nav-link"><b>Profile</b></Link>
</li>
</ul>
</nav>
diff --git a/diskuy/src/Profile.css b/diskuy/src/Profile.css
new file mode 100644
index 0000000000000000000000000000000000000000..b992edaa82cb5be4a63f268abc426f49b00bb0e1
--- /dev/null
+++ b/diskuy/src/Profile.css
@@ -0,0 +1,50 @@
+.header {
+ margin-top: 36px;
+ margin-left: 72px;
+}
+
+.header h1 {
+ font-family: "DM Sans";
+ font-size: 36px;
+ color: #007A7A;
+}
+
+.profile_section {
+ display: flex;
+ flex-direction: column;
+ margin-top: 36px;
+ align-items: center;
+}
+
+.profile_section h2 {
+ font-family: "DM Sans";
+ font-size: 24px;
+ color: #000000;
+}
+
+.icon {
+ width: 180px;
+ height: 180px;
+ border-radius: 50%;
+ background-color: #C4C4C4;
+}
+
+.my_threads_section {
+ display: flex;
+ flex-direction: column;
+ margin-top: 56px;
+ margin-left: 72px;
+ margin-right: 72px;
+}
+
+.sub_header_my_threads {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.sub_header_my_threads h3 {
+ font-family: "DM Sans";
+ font-size: 20px;
+ color: #DE6600;
+}
\ No newline at end of file
diff --git a/diskuy/src/Profile.js b/diskuy/src/Profile.js
new file mode 100644
index 0000000000000000000000000000000000000000..3c4c9a1f7ef1a627ea546452617b31dbf274bb43
--- /dev/null
+++ b/diskuy/src/Profile.js
@@ -0,0 +1,25 @@
+import React from "react";
+import './Profile.css';
+import Button from './Button';
+
+const Profile = () => {
+ return (
+ <div>
+ <div className="header">
+ <h1><b>Profile</b></h1>
+ </div>
+ <div className="profile_section">
+ <div className="icon"></div>
+ <h2><b>Coki Jul</b></h2>
+ </div>
+ <div className="my_threads_section">
+ <div className="sub_header_my_threads">
+ <h3><b>My Threads</b></h3>
+ <Button text="Create Thread" color="orange" url="aaa" />
+ </div>
+ </div>
+ </div>
+ );
+}
+
+export default Profile;
\ No newline at end of file