From 61ca28e9e265d38389a27a3f382dff6ec372625a Mon Sep 17 00:00:00 2001
From: FadhilP <fadhilpradipta0@gmail.com>
Date: Sat, 9 Jan 2021 16:55:40 +0700
Subject: [PATCH 1/4] fix import css file
---
diskuy/src/CreateThreadForm.js | 2 +-
diskuy/src/CreateTopicForm.js | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/diskuy/src/CreateThreadForm.js b/diskuy/src/CreateThreadForm.js
index 6c99666..520b860 100644
--- a/diskuy/src/CreateThreadForm.js
+++ b/diskuy/src/CreateThreadForm.js
@@ -6,7 +6,7 @@ import authHeader from './services/auth-header'
const LINK = 'http://localhost:4000';
-export default function Form(props){
+export default function CreateThreadForm(props){
const { value: title, bind: bindTitle, reset: resetTitle } = useInput('')
const { value: body, bind: bindBody, reset: resetBody } = useInput('')
diff --git a/diskuy/src/CreateTopicForm.js b/diskuy/src/CreateTopicForm.js
index 027b318..2d59351 100644
--- a/diskuy/src/CreateTopicForm.js
+++ b/diskuy/src/CreateTopicForm.js
@@ -1,7 +1,7 @@
import axios from "axios";
import React from "react";
import { useInput } from './hooks/input-hook';
-import './Form.css';
+import './CreateThreadForm.css';
import authHeader from './services/auth-header'
const LINK = 'http://localhost:4000';
--
GitLab
From dd5f4c8263dfd4791b06dfea8f8e5df08db994a6 Mon Sep 17 00:00:00 2001
From: FadhilP <fadhilpradipta0@gmail.com>
Date: Sat, 9 Jan 2021 17:15:58 +0700
Subject: [PATCH 2/4] add routing for custom search
---
diskuy/src/App.js | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/diskuy/src/App.js b/diskuy/src/App.js
index bea072e..9e4f4cd 100644
--- a/diskuy/src/App.js
+++ b/diskuy/src/App.js
@@ -4,11 +4,12 @@ import Topic from './Topic';
import Navbar from './Navbar';
import Profile from './Profile/Profile';
import ListThreads from './Threads/ListThreads';
-import Form from './Form';
+import CreateThreadForm from './CreateThreadForm';
import LoginForm from './LoginForm'
import TopicList from './TopicList';
import RegisterForm from './RegisterForm'
import CreateTopicForm from './CreateTopicForm'
+import Search from './Search'
import {
BrowserRouter as Router,
Route,
@@ -25,7 +26,8 @@ function App() {
<Route exact path='/login' component={LoginForm} />
<Route exact path='/register' component={RegisterForm} />
<Route exact path='/create/topic' component={CreateTopicForm} />
- <Route exact path='/create/:topic/thread' component={Form} />
+ <Route exact path='/create/:topic/thread' component={CreateThreadForm} />
+ <Route exact path='/search/:input' component={Search} />
<Route exact path='/topic/:topic/:thread' component={Thread} />
<Route exact path='/topic/:topic' component={Topic} />
<Route exact path='/threads' component={ListThreads} />
--
GitLab
From 758fb0f8b458b3a1364b0c22b5db835c38d27ef9 Mon Sep 17 00:00:00 2001
From: FadhilP <fadhilpradipta0@gmail.com>
Date: Sat, 9 Jan 2021 17:16:19 +0700
Subject: [PATCH 3/4] add functional search bar in navbar
---
diskuy/src/Navbar.js | 27 ++++++++++++++++++++-------
1 file changed, 20 insertions(+), 7 deletions(-)
diff --git a/diskuy/src/Navbar.js b/diskuy/src/Navbar.js
index d9a685d..52b7f4d 100644
--- a/diskuy/src/Navbar.js
+++ b/diskuy/src/Navbar.js
@@ -3,18 +3,26 @@ import {ReactComponent as DiskuyLogo} from './Logo.svg';
import './Navbar.css';
import { useState } from "react";
import AuthService from './services/auth.service'
+import { useInput } from './hooks/input-hook';
import {
- Link
+ Link, withRouter
} from "react-router-dom"
-const Navbar = () => {
+const Navbar = (props) => {
const [loggedIn, setLoggedIn] = useState(AuthService.getCurrentUser() && 1)
+ const { value: search, bind: bindSearch, reset: resetSearch } = useInput('')
- const handleLogout = (event) => {
+ const handleLogout = () => {
AuthService.logout()
setLoggedIn(false)
window.location.reload()
}
+
+ const handleSearch = (event) => {
+ event.preventDefault()
+ props.history.push(`/search/${search}`)
+ resetSearch()
+ }
return (
<nav id = "navbar" className='navbar navbar-expand-lg navbar-light position-sticky fixed-top'>
<div className="navbar-brand">
@@ -31,15 +39,20 @@ const Navbar = () => {
</li>
{loggedIn ? (
<li className='nav-item ml-auto' onClick={handleLogout}>
- <Link to='/login' className='nav-link'><b>Logout</b></Link>
+ <Link to='/login' className='nav-link'><b>Logout</b></Link>
</li>
):
<li className='nav-item ml-auto'>
- <Link to='/login' className='nav-link'><b>Login</b></Link>
- </li>}
+ <Link to='/login' className='nav-link'><b>Login</b></Link>
+ </li>
+ }
</ul>
+ <form className='form-inline my-2 my-lg-0' onSubmit={handleSearch}>
+ <input className='form-control mr-sm-2' type='search' placholder='search threads' aria-label="Search" {...bindSearch}/>
+ <button className='btn btn-outline-success my-2 my-sm-0' type='submit'>Search</button>
+ </form>
</nav>
);
}
-export default Navbar;
+export default withRouter(Navbar);
--
GitLab
From 2f0287118540a7071c568a4dd8c285bc6dd1dd5a Mon Sep 17 00:00:00 2001
From: FadhilP <fadhilpradipta0@gmail.com>
Date: Sat, 9 Jan 2021 17:16:35 +0700
Subject: [PATCH 4/4] add working custom Search component
---
diskuy/src/Search.js | 38 ++++++++++++++++++++++++++++++++++++++
1 file changed, 38 insertions(+)
create mode 100644 diskuy/src/Search.js
diff --git a/diskuy/src/Search.js b/diskuy/src/Search.js
new file mode 100644
index 0000000..42247b1
--- /dev/null
+++ b/diskuy/src/Search.js
@@ -0,0 +1,38 @@
+import React, { useState, useEffect } from 'react'
+import axios from 'axios'
+import ThreadList from './ThreadList'
+import { Link } from 'react-router-dom'
+
+const API_URL = 'http://localhost:4000/api'
+
+export default function Search(props) {
+ const [threads, setThreads] = useState([])
+ const searchParam = props.match.params.input
+
+ useEffect(() => {
+ const fetch = async () => {
+ const responseThreads = await axios.get(`${API_URL}/threads`)
+ const filteredThreads = responseThreads.data.data.filter(thread => thread.title.includes(searchParam))
+ setThreads(filteredThreads)
+ }
+ fetch()
+ }, [searchParam])
+
+ return (
+ <div>
+ <ul>
+ {threads.map((value) => (
+ <Link to={`/topic/${value.topic_name}/${value.id}` } style={{ textDecoration: 'none' }}>
+ <ThreadList
+ header={value.title}
+ user={value.username}
+ points={value.points}
+ time={value.updated_at}
+ topic={value.topic_name}>
+ </ThreadList>
+ </Link>
+ ))}
+ </ul>
+ </div>
+ )
+}
\ No newline at end of file
--
GitLab