From afd8add45eb7971e873dd344dfe266a4aed42534 Mon Sep 17 00:00:00 2001
From: Jonathan Chandra <jonathanjocan@gmail.com>
Date: Sun, 14 Feb 2021 19:24:23 +0700
Subject: [PATCH 1/2] edit loginForm and Profile
---
src/LoginForm.js | 42 ++++++++++++++++++++++++++++++------
src/Navbar.js | 2 +-
src/Profile/Profile.js | 21 +++++++++---------
src/services/auth-header.js | 8 +++----
src/services/auth.service.js | 16 ++++++++++++--
5 files changed, 65 insertions(+), 24 deletions(-)
diff --git a/src/LoginForm.js b/src/LoginForm.js
index e13a144..aa0b181 100644
--- a/src/LoginForm.js
+++ b/src/LoginForm.js
@@ -15,12 +15,29 @@ export default function LoginForm(props){
const [loading, setLoading] = useState(false)
const [message, setMessage] = useState('')
+ // const handleLogin = async event => {
+ // event.preventDefault()
+ // setLoading(true)
+
+ // try {
+ // await AuthService.login(username, password)
+ // props.history.push('/')
+ // window.location.reload()
+ // }
+ // catch(error) {
+ // setMessage('Login failed')
+ // resetPassword()
+ // resetUsername()
+ // }
+ // setLoading(false)
+ // }
+
const handleLogin = async event => {
event.preventDefault()
setLoading(true)
try {
- await AuthService.login(username, password)
+ await AuthService.googlelogin(username, password)
props.history.push('/')
window.location.reload()
}
@@ -32,16 +49,26 @@ export default function LoginForm(props){
setLoading(false)
}
- const responseGoogle = response => {
+ const handleGoogleLogin = response => {
+ setLoading(true)
localStorage.setItem('user', JSON.stringify(response))
- props.history.push('/profile')
- test()
+ props.history.push('/')
+ callback()
}
- async function test() {
- console.log(authHeader())
+ async function callback() {
var response = await axios.get('https://diskuyapi-google.herokuapp.com/api/auth/google/callback', { headers : authHeader()})
+ localStorage.setItem('callback', JSON.stringify(response))
console.log(response)
+ window.location.reload()
+ }
+
+ const handleGoogleLoginFailed = response => {
+ setLoading(true)
+ setMessage('Login failed')
+ resetPassword()
+ resetUsername()
+ setLoading(false)
}
return (
@@ -91,7 +118,8 @@ export default function LoginForm(props){
<div className="App">
<GoogleLogin
clientId="17380499766-td9qokkgpli952576g7d8l2059a7pgbf.apps.googleusercontent.com"
- onSuccess={responseGoogle} />
+ onSuccess={handleGoogleLogin}
+ onFailure={handleGoogleLoginFailed} />
</div>
</div>
)
diff --git a/src/Navbar.js b/src/Navbar.js
index 19c546c..1fcbc92 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -44,7 +44,7 @@ const Navbar = (props) => {
<Link to="/topic" className="nav-link"><b>Topics</b></Link>
</li>
<li className="nav-item mr-auto">
- <Link to={`/profile/${AuthService.getCurrentUserId()}`} className="nav-link"><b>Profile</b></Link>
+ <Link to={`/profile/${AuthService.getCurrentUsername()}`} className="nav-link"><b>Profile</b></Link>
</li>
{loggedIn ? (
<li className='nav-item mr-auto' onClick={handleLogout}>
diff --git a/src/Profile/Profile.js b/src/Profile/Profile.js
index 7a2bc7a..cddee0e 100644
--- a/src/Profile/Profile.js
+++ b/src/Profile/Profile.js
@@ -8,8 +8,9 @@ import { API_URL } from '../services/api_link'
function Profile(props) {
- const userId = AuthService.getCurrentUserId();
- const profileId = props.match.params.user;
+ const username = AuthService.getCurrentUsername();
+ //const profileId = props.match.params.user;
+ const profileUsername = props.match.params.user;
const [user, setUser] = useState({
id:"",
name:"",
@@ -18,18 +19,18 @@ function Profile(props) {
const [usersThreads, setUsersThreads] = useState([]);
useEffect(() => {
- async function getUsersThreads(profileId) {
+ async function getUsersThreads(profileUsername) {
const allThreads = await axios.get(`${API_URL}/threads`);
- const usersThreads = allThreads.data.data.filter(thread => thread.user_id == profileId);
+ const usersThreads = allThreads.data.data.filter(thread => thread.user_id == profileUsername);
- const getUser = await axios.get(`${API_URL}/users/${profileId}`);
+ const getUser = await axios.get(`https://diskuyapi-google.herokuapp.com/api/users/name/${profileUsername}`);
const currentUser = getUser.data.data;
-
+ console.log(currentUser)
setUsersThreads(usersThreads);
setUser(currentUser);
}
- getUsersThreads(profileId);
- }, [userId]);
+ getUsersThreads(profileUsername);
+ }, []);
return (
@@ -39,7 +40,7 @@ function Profile(props) {
</div>
<div className="profile_section">
<div className="userIcon">
- <i class="far fa-user-circle icon"></i>
+ <img src={user.picture}></img>
</div>
<h2><b>{user.username}</b></h2>
</div>
@@ -47,7 +48,7 @@ function Profile(props) {
<div className="sub_header_my_threads">
<h3><b>Threads Created by {user.username}</b></h3>
- {userId == profileId && (
+ {username == profileUsername && (
<Button text="Create Thread" color="orange" url="create/thread" />
)}
diff --git a/src/services/auth-header.js b/src/services/auth-header.js
index 48bcd48..fd1307e 100644
--- a/src/services/auth-header.js
+++ b/src/services/auth-header.js
@@ -1,11 +1,11 @@
export default function authHeader() {
const user = JSON.parse(localStorage.getItem('user'))
- // if (user && user.tokenId)
- // return { Authorization: `Bearer ${user.accessToken}` } // kalo make google
+ if (user && user.tokenId)
+ return { Authorization: `Bearer ${user.accessToken}` } // kalo make google
- if (user && user.token)
- return { Authorization: `Bearer ${user.token}` }
+ // if (user && user.token)
+ // return { Authorization: `Bearer ${user.token}` }
else return {}
}
\ No newline at end of file
diff --git a/src/services/auth.service.js b/src/services/auth.service.js
index eaa5c3d..b5a5345 100644
--- a/src/services/auth.service.js
+++ b/src/services/auth.service.js
@@ -1,5 +1,6 @@
import axios from 'axios'
import { API_URL } from './api_link'
+import authHeader from './auth-header'
class AuthService {
async login(email, password) {
@@ -9,7 +10,10 @@ class AuthService {
return response
}
- logout() {localStorage.removeItem('user')}
+ logout() {
+ localStorage.removeItem('user');
+ localStorage.removeItem('callback');
+ }
async register(username, email, password) {
const response = await axios.post(`${API_URL}/users/signup`, {
@@ -24,7 +28,7 @@ class AuthService {
}
getCurrentUser() {
- return JSON.parse(localStorage.getItem('user'))
+ return JSON.parse(localStorage.getItem('callback'))
}
getCurrentUserId() {
@@ -34,6 +38,14 @@ class AuthService {
return ""
}
}
+
+ getCurrentUsername() {
+ try {
+ return this.getCurrentUser().data.username
+ } catch (error) {
+ return ""
+ }
+ }
}
export default new AuthService()
\ No newline at end of file
--
GitLab
From 06db0d90434982beadbd856ac6e21a2bac3a3d91 Mon Sep 17 00:00:00 2001
From: Jonathan Chandra <jonathanjocan@gmail.com>
Date: Mon, 15 Feb 2021 02:15:44 +0700
Subject: [PATCH 2/2] edit pagination and routing for recent threads
---
src/App.js | 2 +-
src/Navbar.js | 2 +-
src/Pagination.js | 17 ++++++++++++++---
src/Threads/RecentThreads.js | 27 ++++++---------------------
src/Threads/TopThreads.js | 6 +++++-
5 files changed, 27 insertions(+), 27 deletions(-)
diff --git a/src/App.js b/src/App.js
index 073b8a1..9c667c8 100644
--- a/src/App.js
+++ b/src/App.js
@@ -23,7 +23,7 @@ function App() {
return (
<Router>
<Navbar />
- <Route exact path='/' component={() => <ListThreads isRecent={true} />} />
+ <Route exact path='/page/:pageNumber' component={() => <ListThreads isRecent={true} />} />
<Route exact path='/top' component={() => <ListThreads isRecent={false} />} />
<Route exact path='/topic' component={TopicList} />
<Route exact path='/profile/:user' component={Profile} />
diff --git a/src/Navbar.js b/src/Navbar.js
index 1fcbc92..715f48d 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -38,7 +38,7 @@ const Navbar = (props) => {
</form>
<ul className="navbar-nav ml-auto">
<li className="nav-item mr-auto">
- <Link to="/" className="nav-link"><b>Threads</b></Link>
+ <Link to="/page/1" className="nav-link"><b>Threads</b></Link>
</li>
<li className="nav-item mr-auto">
<Link to="/topic" className="nav-link"><b>Topics</b></Link>
diff --git a/src/Pagination.js b/src/Pagination.js
index d0215e5..43e4ef8 100644
--- a/src/Pagination.js
+++ b/src/Pagination.js
@@ -6,19 +6,30 @@ import './Pagination.css'
function Pagination (props) {
- const [activePage, setActivePage] = useState(1);
+ const [activePage, setActivePage] = useState(props.activePage);
+ const [totalItems, setTotalItems] = useState(0);
function handlePageChange(pageNumber) {
setActivePage(pageNumber);
- props.changePage(pageNumber);
+ props.setCurrentPage(pageNumber);
+ props.getThreadsByPage(pageNumber);
}
+ useEffect(() => {
+ async function getTotalItems() {
+ const allThreads = await axios.get(`http://localhost:4000/api/threads/pages/${props.threadsType}/`);
+ const totalItems = allThreads.data.metadata.total_data;
+ setTotalItems(totalItems);
+ }
+ getTotalItems();
+ }, []);
+
return (
<div>
<PaginationComponent
activePage={activePage}
itemsCountPerPage={25}
- totalItemsCount={props.totalItems}
+ totalItemsCount={totalItems}
pageRangeDisplayed={5}
onChange={handlePageChange}
itemClass="page-item"
diff --git a/src/Threads/RecentThreads.js b/src/Threads/RecentThreads.js
index 3a4baea..4d55b28 100644
--- a/src/Threads/RecentThreads.js
+++ b/src/Threads/RecentThreads.js
@@ -7,8 +7,7 @@ import Pagination from '../Pagination.js';
export default function Topic(props){
const [thread, setThread] = useState([])
- const [totalItems, setTotalItems] = useState(0);
- const [currentPage, setCurrentPage] = useState(1);
+ const [currentPage, setCurrentPage] = useState(props.match.params.pageNumber);
// useEffect(() => {
// const fetch = async () => {
@@ -31,36 +30,22 @@ export default function Topic(props){
fetch()
}, [])
-
- useEffect(() => {
- async function getTotalItems() {
- const allThreads = await axios.get(`http://localhost:4000/api/threads/pages/recent/`);
- const totalItems = allThreads.metadata.total_data;
- setTotalItems(totalItems);
- }
- getTotalItems();
- }, []);
-
- function changePage (pageNumber) {
- setCurrentPage(pageNumber);
- getThreadsByPage(pageNumber);
- }
-
async function getThreadsByPage(pageNumber) {
setThread([]);
const threadsList = await axios.get(`http://localhost:4000/api/threads/pages/recent/?page=${pageNumber}`)
setThread(threadsList.data.data)
}
-
+
return (
<div className="recentThreads">
<ThreadList
thread={thread}>
</ThreadList>
<Pagination
- url="http://localhost:4000/api/threads/pages/recent"
- changePage={changePage}
- totalItems={totalItems}
+ activePage={currentPage}
+ threadsType="recent"
+ setCurrentPage={setCurrentPage}
+ getThreadsByPage={getThreadsByPage}
/>
</div>
)
diff --git a/src/Threads/TopThreads.js b/src/Threads/TopThreads.js
index ff330d1..d8ff5d8 100644
--- a/src/Threads/TopThreads.js
+++ b/src/Threads/TopThreads.js
@@ -25,10 +25,14 @@ export default function Home(){
}, [])
return (
- <div>
+ <div className="topThreads">
<ThreadList
thread={thread}>
</ThreadList>
+ {/* <Pagination
+ changePage={changePage}
+ totalItems={totalItems}
+ /> */}
</div>
)
}
\ No newline at end of file
--
GitLab