diff --git a/src/component/BoxContent.tsx b/src/component/BoxContent.tsx
index 569266a7b3438c0edf00f7ec0b8d332ca3495b02..63c07e6c9a0016d691c3ff7874fc8a44994bef08 100644
--- a/src/component/BoxContent.tsx
+++ b/src/component/BoxContent.tsx
@@ -6,8 +6,7 @@ const BoxContent = ({ data }:any) => {
const location = useLocation()
const params = new URLSearchParams(location.search)
const id = params.get('id');
- const idowner = localStorage.getItem('id')!;
- const idownerinteger = parseInt(idowner);
+ const usernameowner = localStorage.getItem('username')
let buttondetail;
if(id === null){
buttondetail = <Button colorScheme='blue' mt='10px' onClick={() => window.location.href='/tweet-analytic?id='+data.post_id}>
@@ -28,7 +27,7 @@ const BoxContent = ({ data }:any) => {
Post ID : {data.post_id}
</Text>
{buttondetail}
- <Button marginLeft={5} colorScheme='facebook' mt='10px' onClick={() => window.location.href='http://localhost:8008/post/'+idownerinteger+"/"+data.post_id}>
+ <Button marginLeft={5} colorScheme='facebook' mt='10px' onClick={() => window.location.href='http://localhost:8008/post/'+usernameowner+"/"+data.post_id}>
To Post
</Button>
</Box>
diff --git a/src/component/Home.tsx b/src/component/Home.tsx
index d1beb6314ec1553ab046bcfb91a909761ac5bbd8..15b0db81e0d3329ed1c44bb0a2d8bd54b066df13 100644
--- a/src/component/Home.tsx
+++ b/src/component/Home.tsx
@@ -12,11 +12,12 @@ function Home(){
const nama = localStorage.getItem('username')!;
const id = localStorage.getItem('id')!;
const idinteger = parseInt(id);
+ const token = localStorage.getItem('token')!;
useEffect(()=>{
setName(nama);
// setFollowData(FollowData);
let url = 'http://localhost:3030/follow/'+idinteger;
- axios.get(url).then((res)=>{
+ axios.get(url,{ headers: { Authorization: `Bearer ${token}` } }).then((res)=>{
console.log(res.data);
setFollowData(res.data);
})
diff --git a/src/component/Login.tsx b/src/component/Login.tsx
index b58d066d652127426220160bf61105f577eafbda..ec899e1ceee47054150e68e4093d2ecd7c363ea7 100644
--- a/src/component/Login.tsx
+++ b/src/component/Login.tsx
@@ -9,6 +9,7 @@ import { FormControl,
import { Button } from '@chakra-ui/react'
import React from 'react'
import { Input } from '@chakra-ui/react'
+import axios from 'axios'
function Login() {
const [username, setUsername] = React.useState('')
@@ -23,9 +24,22 @@ function Login() {
console.log(username)
console.log(password)
// nanti disini login ke API
- localStorage.setItem('username', username)
- localStorage.setItem('id', '1')
- window.location.href = '/home'
+ // localStorage.setItem('username', username)
+ // localStorage.setItem('id', '1')
+ axios.post('http://localhost:3030/login', {
+ username: username,
+ password: password
+ }).then((res)=>{
+ if(res.data.message === 'error'){
+ alert('Wrong username or password')
+ }
+ else{
+ localStorage.setItem('username', username)
+ localStorage.setItem('id', res.data.user_id)
+ localStorage.setItem('token', res.data.accesstoken)
+ window.location.href = '/home'
+ }
+ })
}
}
return (
@@ -70,7 +84,7 @@ function Login() {
</Button>
</VStack>
<FormLabel>
- Don't have an account? <a href='http://localhost:8008/login'>Register</a>
+ Don't have an account? <a href='/register'>Register</a>
</FormLabel>
</Box>
)
diff --git a/src/component/Navbar.tsx b/src/component/Navbar.tsx
index 1416ef736d291b659464c721f84715e6d54e0192..167b3c2da3a514a87d29144d3cb62a1dfb26bc07 100644
--- a/src/component/Navbar.tsx
+++ b/src/component/Navbar.tsx
@@ -1,6 +1,9 @@
import { Link } from 'react-router-dom';
-import { Box, Flex, Text } from '@chakra-ui/react';
+import { Box, Flex ,Button} from '@chakra-ui/react';
const Navbar = () => {
+ function refresh(){
+ window.location.href = '/home';
+ }
return (
<Flex
as="nav"
@@ -15,9 +18,9 @@ const Navbar = () => {
width="100%"
zIndex="1000"
>
- <Text fontSize="xl" fontWeight="bold" marginLeft={4}>
- Analytic
- </Text>
+ <Button colorScheme='blue' marginLeft={4} onClick={()=>{refresh()}}>
+ Refresh
+ </Button>
<Box display="flex" alignItems="center">
<Box marginRight={4}>
diff --git a/src/component/Register.tsx b/src/component/Register.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..16c8cc9736de06fef08e043e5124e0b725b5be71
--- /dev/null
+++ b/src/component/Register.tsx
@@ -0,0 +1,97 @@
+import {
+ Box,
+ VStack,
+ Heading,
+} from '@chakra-ui/layout'
+import { FormControl,
+ FormLabel,
+ } from '@chakra-ui/form-control'
+import { Button,Input } from '@chakra-ui/react'
+import React from 'react'
+import axios from 'axios'
+
+function Register() {
+ const [username, setUsername] = React.useState('')
+ const [password, setPassword] = React.useState('')
+
+ const register = () => {
+ if (/\s/.test(username) || /\s/.test(password)) {
+ alert('Invalid username or password')
+ }
+ else if(username==='' || password===''){
+ alert('Please fill all the fields')
+ }
+ else if (username.length < 5 || password.length < 5) {
+ alert('Username and password must be at least 5 characters')
+ }
+ else {
+ console.log('Registering...')
+ console.log(username)
+ console.log(password)
+ // nanti disini register ke API
+ axios.post('http://localhost:3030/register', {
+ username: username,
+ password: password
+ }).then((res)=>{
+ if(res.data.message === 'error'){
+ alert('Username already exists')
+ }
+ else{
+ alert('Register success')
+ window.location.href = '/login'
+ }
+ })
+
+ }
+ }
+
+ return (
+ <Box
+ w={['full','md']}
+ p={[8,10]}
+ mx='auto'
+ border={['none','1px solid gray']}
+ mt={[20,'10hv']}
+ borderRadius={10}
+ borderColor={['','gray.200']}
+ >
+ <VStack
+ spacing={4}
+ align='flex-start'
+ w='full'
+ >
+ <VStack
+ spacing={1}
+ w={['full']}
+ align={['flex-start','center']}
+ >
+ <Heading>
+ Register
+ </Heading>
+ </VStack>
+ <FormControl>
+ </FormControl>
+ <FormControl>
+ <FormLabel>
+ Username
+ </FormLabel>
+ <Input variant={'filled'} value={username} onChange={(e)=>setUsername(e.target.value)}/>
+ </FormControl>
+ <FormControl>
+ <FormLabel>
+ Password
+ </FormLabel>
+ <Input variant={'filled'} type='password' value={password} onChange={(e)=>setPassword(e.target.value)}/>
+ </FormControl>
+ <Button colorScheme='facebook' w={'full'} onClick={register}>
+ Register
+ </Button>
+ </VStack>
+ <FormLabel>
+ Already have an account? <a href='/login'>Login</a>
+ </FormLabel>
+ </Box>
+ )
+}
+
+export default Register
\ No newline at end of file
diff --git a/src/component/TweetAnalytic.tsx b/src/component/TweetAnalytic.tsx
index 6b1639b7fbee54add892051ad594c441323ac75f..171753f7ea50879385d9436c198a082c329bc8ab 100644
--- a/src/component/TweetAnalytic.tsx
+++ b/src/component/TweetAnalytic.tsx
@@ -28,6 +28,7 @@ function TweetAnalytic(){
const id = params.get('id');
const idowner = localStorage.getItem('id')!;
const idownerinteger = parseInt(idowner);
+ const token = localStorage.getItem('token')!;
if(id === null){
useEffect(()=>{
@@ -35,20 +36,16 @@ function TweetAnalytic(){
let urlreply = 'http://localhost:3030/post/reply/'+idownerinteger;
let urllike = 'http://localhost:3030/post/like/'+idownerinteger;
let urlcontent = 'http://localhost:3030/post/'+idownerinteger;
- axios.get(urlview).then((res)=>{
- console.log(res.data);
+ axios.get(urlview,{ headers: { Authorization: `Bearer ${token}` } }).then((res)=>{
setViewData(res.data);
})
- axios.get(urlreply).then((res)=>{
- console.log(res.data);
+ axios.get(urlreply,{ headers: { Authorization: `Bearer ${token}` } }).then((res)=>{
setReplyData(res.data);
})
- axios.get(urllike).then((res)=>{
- console.log(res.data);
+ axios.get(urllike,{ headers: { Authorization: `Bearer ${token}` } }).then((res)=>{
setLikeData(res.data);
})
- axios.get(urlcontent).then((res)=>{
- console.log(res.data);
+ axios.get(urlcontent,{ headers: { Authorization: `Bearer ${token}` } }).then((res)=>{
setContent(res.data);
})
},[])
@@ -60,20 +57,16 @@ function TweetAnalytic(){
let urlreply = 'http://localhost:3030/post/reply/'+idownerinteger+"/"+id;
let urllike = 'http://localhost:3030/post/like/'+idownerinteger+"/"+id;
let urlcontent = 'http://localhost:3030/post/'+idownerinteger+"/"+id;
- axios.get(urlview).then((res)=>{
- console.log(res.data);
+ axios.get(urlview,{ headers: { Authorization: `Bearer ${token}` } }).then((res)=>{
setViewData(res.data);
})
- axios.get(urlreply).then((res)=>{
- console.log(res.data);
+ axios.get(urlreply,{ headers: { Authorization: `Bearer ${token}` } }).then((res)=>{
setReplyData(res.data);
})
- axios.get(urllike).then((res)=>{
- console.log(res.data);
+ axios.get(urllike,{ headers: { Authorization: `Bearer ${token}` } }).then((res)=>{
setLikeData(res.data);
})
- axios.get(urlcontent).then((res)=>{
- console.log(res.data);
+ axios.get(urlcontent,{ headers: { Authorization: `Bearer ${token}` } }).then((res)=>{
setContent(res.data);
})
},[])
@@ -97,7 +90,7 @@ function TweetAnalytic(){
const makeContentBox = () => {
let contentBox = [];
for (let i = 0; i < content.length; i++) {
- contentBox.push(<BoxContent data={content[i]} key={content[i].id} />)
+ contentBox.push(<BoxContent data={content[i]} key={content[i].post_id} />)
}
return contentBox;
}
diff --git a/src/router/router.tsx b/src/router/router.tsx
index 040ee71b32fcb530fccf4fc1fafc4c48a60d2852..4da0080dcf92ff62a70a69eb1d70a43321987705 100644
--- a/src/router/router.tsx
+++ b/src/router/router.tsx
@@ -2,6 +2,7 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Login from '../component/Login'
import TweetAnalytic from '../component/TweetAnalytic'
import Home from '../component/Home'
+import Register from '../component/Register'
const routesList = createBrowserRouter([
{
@@ -16,6 +17,14 @@ const routesList = createBrowserRouter([
path: '/tweet-analytic?',
element: <TweetAnalytic />,
},
+ {
+ path: '/register',
+ element: <Register />,
+ },
+ {
+ path: '/',
+ element: <Login />,
+ },
])