From b10ef557aaa47f0af3a037da5f56b91e1a516e05 Mon Sep 17 00:00:00 2001
From: FadhilP <fadhilpradipta0@gmail.com>
Date: Sun, 10 Jan 2021 16:08:44 +0700
Subject: [PATCH] Add global API_URL for practical use
---
diskuy/src/CreateThreadForm.js | 7 +++----
diskuy/src/CreateTopicForm.js | 5 ++---
diskuy/src/Profile/Profile.js | 5 ++---
diskuy/src/Threads/Post.js | 14 +++++++-------
diskuy/src/Threads/PreviewThread.js | 8 +++-----
diskuy/src/Threads/Thread.js | 9 ++++-----
diskuy/src/Topic.js | 16 +++++++---------
diskuy/src/TopicList.js | 5 ++---
diskuy/src/services/api_link.js | 1 +
diskuy/src/services/auth.service.js | 7 +++----
diskuy/src/services/user.service.js | 3 +--
11 files changed, 35 insertions(+), 45 deletions(-)
create mode 100644 diskuy/src/services/api_link.js
diff --git a/diskuy/src/CreateThreadForm.js b/diskuy/src/CreateThreadForm.js
index 520b860..392dc50 100644
--- a/diskuy/src/CreateThreadForm.js
+++ b/diskuy/src/CreateThreadForm.js
@@ -3,8 +3,7 @@ import React from "react";
import { useInput } from './hooks/input-hook';
import './CreateThreadForm.css';
import authHeader from './services/auth-header'
-
-const LINK = 'http://localhost:4000';
+import { API_URL } from '../services/api_API_URL'
export default function CreateThreadForm(props){
const { value: title, bind: bindTitle, reset: resetTitle } = useInput('')
@@ -16,9 +15,9 @@ export default function CreateThreadForm(props){
event.preventDefault();
try {
- const responseTopics = await axios.get(`${LINK}/api/topics`)
+ const responseTopics = await axios.get(`${API_URL}/topics`)
const topic = responseTopics.data.data.find(topic => topic.name === topicParam).id
- await axios.post(`${LINK}/api/threads`, {
+ await axios.post(`${API_URL}/threads`, {
thread: {
content : body,
points : 0,
diff --git a/diskuy/src/CreateTopicForm.js b/diskuy/src/CreateTopicForm.js
index 2d59351..c6e5557 100644
--- a/diskuy/src/CreateTopicForm.js
+++ b/diskuy/src/CreateTopicForm.js
@@ -3,8 +3,7 @@ import React from "react";
import { useInput } from './hooks/input-hook';
import './CreateThreadForm.css';
import authHeader from './services/auth-header'
-
-const LINK = 'http://localhost:4000';
+import { API_URL } from '../services/api_API_URL'
export default function CreateTopicForm(props){
const { value: name, bind: bindName, reset: resetName } = useInput('')
@@ -13,7 +12,7 @@ export default function CreateTopicForm(props){
event.preventDefault();
try {
- await axios.post(`${LINK}/api/topics`, {
+ await axios.post(`${API_URL}/topics`, {
topic : {
name: name
}
diff --git a/diskuy/src/Profile/Profile.js b/diskuy/src/Profile/Profile.js
index 752f740..2b63440 100644
--- a/diskuy/src/Profile/Profile.js
+++ b/diskuy/src/Profile/Profile.js
@@ -4,10 +4,9 @@ import Button from '../Button';
import ThreadList from '../ThreadList'
import axios from "axios";
import AuthService from '../services/auth.service'
-
+import { API_URL } from '../services/api_API_URL'
import { Link } from "react-router-dom"
-const LINK = 'http://localhost:4000';
// async function getUsersThreads(user_id) {
// const allThreads = await axios.get(`${LINK}/api/threads`);
@@ -21,7 +20,7 @@ function Profile() {
useEffect(() => {
async function getUsersThreads(userId) {
- const allThreads = await axios.get(`${LINK}/api/threads`);
+ const allThreads = await axios.get(`${API_URL}/api/threads`);
const usersThreads = allThreads.data.data.filter(thread => thread.user_id === userId);
setUsersThreads(usersThreads);
}
diff --git a/diskuy/src/Threads/Post.js b/diskuy/src/Threads/Post.js
index dfda02b..71312e7 100644
--- a/diskuy/src/Threads/Post.js
+++ b/diskuy/src/Threads/Post.js
@@ -6,8 +6,8 @@ import authHeader from '../services/auth-header'
import React, { useState, useEffect} from 'react'
import { loggedIn } from '../services/loggedInService'
import { translate } from '../helpers/time-util';
+import { API_URL } from '../services/api_API_URL'
-const LINK = 'http://localhost:4000/api';
export default function Post(props){
const checkType = props.type === 'thread' ? 'threads' : 'post'
const [points, setPoints] = useState(0)
@@ -15,7 +15,7 @@ export default function Post(props){
const deletePost = async () => {
try {
- await axios.delete(`${LINK}/${checkType}/${props.id}`
+ await axios.delete(`${API_URL}/${checkType}/${props.id}`
,{headers: authHeader()});
if (checkType === 'thread') props.redirect()
else window.location.reload();
@@ -25,9 +25,9 @@ export default function Post(props){
useEffect(() => {
const fetch = async () => {
try {
- const postResponse = await axios.get(`${LINK}/${checkType}/${props.id}`)
+ const postResponse = await axios.get(`${API_URL}/${checkType}/${props.id}`)
setPoints(postResponse.data.data.points)
- await axios.get(`${LINK}/${checkType}/checklike/${props.id}`, {headers: authHeader()})
+ await axios.get(`${API_URL}/${checkType}/checklike/${props.id}`, {headers: authHeader()})
setIsLiked(true)
}
catch(error){
@@ -39,13 +39,13 @@ export default function Post(props){
const handleLike = async () => {
try {
- await axios.get(`${LINK}/${checkType}/checklike/${props.id}`, {headers: authHeader()})
- await axios.post(`${LINK}/${checkType}/dislike/${props.id}`, {}, {headers: authHeader()})
+ await axios.get(`${API_URL}/${checkType}/checklike/${props.id}`, {headers: authHeader()})
+ await axios.post(`${API_URL}/${checkType}/dislike/${props.id}`, {}, {headers: authHeader()})
setPoints(points - 1)
setIsLiked(false)
}
catch(error) {
- await axios.post(`${LINK}/${checkType}/like/${props.id}`, {}, {headers: authHeader()})
+ await axios.post(`${API_URL}/${checkType}/like/${props.id}`, {}, {headers: authHeader()})
setPoints(points + 1)
setIsLiked(true)
}
diff --git a/diskuy/src/Threads/PreviewThread.js b/diskuy/src/Threads/PreviewThread.js
index 449c02c..b79470f 100644
--- a/diskuy/src/Threads/PreviewThread.js
+++ b/diskuy/src/Threads/PreviewThread.js
@@ -1,15 +1,13 @@
import React from "react";
import axios from "axios";
-
-const LINK = 'http://localhost:4000';
-
+import { API_URL } from '../services/api_API_URL'
function PreviewThread (props) {
- // const userName = await axios.get(`${LINK}/api/threads/${props.user_id}`);
+ // const userName = await axios.get(`${API_URL}/api/threads/${props.user_id}`);
// const topic_id = `${props.topic_id}`
- // const topicName = await axios.get(`${LINK}/api/topics/${props.topic_id}`).data.data.find(topic => topic.name === topic_id).id
+ // const topicName = await axios.get(`${API_URL}/api/topics/${props.topic_id}`).data.data.find(topic => topic.name === topic_id).id
return (
<div className="thread_container">
<h1>{props.title}</h1>
diff --git a/diskuy/src/Threads/Thread.js b/diskuy/src/Threads/Thread.js
index 961ccb0..510deae 100644
--- a/diskuy/src/Threads/Thread.js
+++ b/diskuy/src/Threads/Thread.js
@@ -6,8 +6,7 @@ import { useInput } from '../hooks/input-hook';
import axios from 'axios';
import { loggedIn } from '../services/loggedInService'
import authHeader from '../services/auth-header'
-
-const LINK = 'http://localhost:4000/';
+import { API_URL } from '../services/api_API_URL'
export default function Thread(props){
const redirect = () => {
@@ -41,7 +40,7 @@ export default function Thread(props){
const refreshComment = useCallback(() => {
const fetch = async () => {
- const responseComment = await axios.get(`${LINK}/api/post/`);
+ const responseComment = await axios.get(`${API_URL}/post/`);
const responseCommentData = responseComment.data.data.filter(comments => comments.thread_id === threadParm);
setComment(responseCommentData);
}
@@ -59,7 +58,7 @@ export default function Thread(props){
useEffect(() => {
const fetch = async () => {
- const responseThread = await axios.get(`${LINK}/api/threads/${threadParm}`);
+ const responseThread = await axios.get(`${API_URL}/threads/${threadParm}`);
const responseThreadData = responseThread.data.data;
setThread(responseThreadData);
@@ -72,7 +71,7 @@ export default function Thread(props){
event.preventDefault();
try {
- await axios.post(`${LINK}api/post`, {
+ await axios.post(`${API_URL}/post`, {
post : {
message : input,
points : 0,
diff --git a/diskuy/src/Topic.js b/diskuy/src/Topic.js
index 031ad0b..578b031 100644
--- a/diskuy/src/Topic.js
+++ b/diskuy/src/Topic.js
@@ -2,19 +2,17 @@ import React, { useEffect, useState } from "react";
import axios from 'axios'
import ThreadList from './ThreadList'
import { loggedIn } from './services/loggedInService'
-
+import { API_URL } from '../services/api_API_URL'
import { Link } from "react-router-dom"
-const LINK = 'http://localhost:4000';
-
export default function Topic(props){
const [thread, setThread] = useState([])
const topicParam = props.match.params.topic
useEffect(() => {
const fetch = async () => {
- const responseThreads = await axios.get(`${LINK}/api/threads/`)
- const responseTopics = await axios.get(`${LINK}/api/topics`)
+ const responseThreads = await axios.get(`${API_URL}/threads/`)
+ const responseTopics = await axios.get(`${API_URL}/topics`)
const topic = responseTopics.data.data.find(topic => topic.name === topicParam).id
const threads = responseThreads.data.data.filter(thread => thread.topic_id === topic)
@@ -34,13 +32,13 @@ export default function Topic(props){
<div>
{loggedIn && (
- <Link to={`/create/${topicParam}/thread`}>
+ <API_URL to={`/create/${topicParam}/thread`}>
<button type="button" className="btn btn-primary btn_cancel newThreadButton">Create New Thread</button>
- </Link>
+ </API_URL>
)}
<ul>
{thread.map((value) => (
- <Link to={`/topic/${topicParam}/${value.id}` } style={{ textDecoration: 'none' }}>
+ <API_URL to={`/topic/${topicParam}/${value.id}` } style={{ textDecoration: 'none' }}>
<ThreadList
header={value.title}
user={value.username}
@@ -48,7 +46,7 @@ export default function Topic(props){
time={value.inserted_at}
topic={value.topic_name}>
</ThreadList>
- </Link>
+ </API_URL>
))}
</ul>
</div>
diff --git a/diskuy/src/TopicList.js b/diskuy/src/TopicList.js
index ad13c3a..4030114 100644
--- a/diskuy/src/TopicList.js
+++ b/diskuy/src/TopicList.js
@@ -1,15 +1,14 @@
import React, { useEffect, useState } from "react";
import axios from 'axios'
import { Link } from "react-router-dom"
-
-const LINK = 'http://localhost:4000';
+import { API_URL } from '../services/api_API_URL'
export default function TopicList(props){
const [topics, setTopics] = useState([])
useEffect(() => {
const fetch = async () => {
- const response = await axios.get(`${LINK}/api/topics`)
+ const response = await axios.get(`${API_URL}/topics`)
setTopics(response.data.data)
console.log(response)
}
diff --git a/diskuy/src/services/api_link.js b/diskuy/src/services/api_link.js
new file mode 100644
index 0000000..01a4768
--- /dev/null
+++ b/diskuy/src/services/api_link.js
@@ -0,0 +1 @@
+export const API_URL = 'http://localhost:4000/api'
\ No newline at end of file
diff --git a/diskuy/src/services/auth.service.js b/diskuy/src/services/auth.service.js
index 7077c0f..0924e3e 100644
--- a/diskuy/src/services/auth.service.js
+++ b/diskuy/src/services/auth.service.js
@@ -1,10 +1,9 @@
import axios from 'axios'
-
-const API_URL = 'http://localhost:4000/api/users'
+import { API_URL } from '../services/api_API_URL'
class AuthService {
async login(email, password) {
- const response = await axios.post(`${API_URL}/signin`, {email, password})
+ const response = await axios.post(`${API_URL}/users/signin`, {email, password})
if (response.data.token)
localStorage.setItem('user', JSON.stringify(response.data))
@@ -13,7 +12,7 @@ class AuthService {
logout() {localStorage.removeItem('user')}
async register(username, email, password) {
- const response = await axios.post(`${API_URL}/signup`, {
+ const response = await axios.post(`${API_URL}/users/signup`, {
user : {
username,
email,
diff --git a/diskuy/src/services/user.service.js b/diskuy/src/services/user.service.js
index b1bc801..423bcc8 100644
--- a/diskuy/src/services/user.service.js
+++ b/diskuy/src/services/user.service.js
@@ -1,7 +1,6 @@
import axios from 'axios'
import authHeader from './auth-header'
-
-const API_URL = 'http://localhost:4000/api'
+import { API_URL } from '../services/api_API_URL'
class UserService {
getProfile() {
--
GitLab