Merge remote-tracking branch 'origin'

practice-app/README.md

@@ -2,9 +2,7 @@
 
 ## Dependencies
 
-To install dependencies of the project, please go into both `client` and `server` directories and run `npm install` command in both directories.
-
-If you cannot run `npm` command install [Node.js](https://nodejs.org/). LTS version is recommended.
+In pre-run phase all you need is install [docker](https://docs.docker.com/engine/install/).
 
 After that, you can follow instructions provided in `README.md` files in `client` and `server` directories to run development servers for both `client` and `server`.
 
@@ -23,11 +21,14 @@ After that, you can follow instructions provided in `README.md` files in `client
     LOCATION_TOKEN = 
     MOBY_API_KEY =  
     ```
-
-3. After adding the .env file, you can run `docker-compose up --build -d` in `server` folder.
-4. Run `docker-compose up --build -d` in `client` folder.
-5. Some steps about AWS EC2
-6. That is all.
+3. Create a `.env` file in the `client`. It should contain the following field:
 
+    ```json
+    API_URL =
+    ```
 
-
+
+
+4. To build the backend image run `sudo docker build -t practice-app-backend`, and to build the frontend image run `sudo docker build -t practice-app-frontend`,
+5. Run `sudo docker run -d -p 8080:8080 practice-app-backend` for backend and `sudo docker run -d -p 3000:3000 practice-app-frontend` for frontend.
+6. That is all.

practice-app/client/.env.example

@@ -0,0 +1 @@
+REACT_APP_API_URL = 18.185.125.88:8080

practice-app/client/Dockerfile

@@ -1,6 +1,5 @@
 FROM node:18
 WORKDIR /app
 COPY . .
-RUN npm ci 
-RUN npm run build
-CMD [ "npx", "serve", "build" ]
+RUN npm install
+CMD [ "npm", "start" ]

practice-app/client/package.json

@@ -11,6 +11,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.4.0",
+    "dotenv": "^16.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",

practice-app/client/src/pages/elif/elif.queries.js

@@ -24,7 +24,7 @@ export function useFindLocation() {
   const findLocationQuery = useQuery(['findLocation'], async () => {
     const userIP = await fetchUserIP();
     if (userIP) {
-      const response = await fetch(`http://localhost:8080/api/location/findLocation?ip_address=${userIP}`);
+      const response = await fetch(`http://${process.env.REACT_APP_API_URL}/api/location/findLocation?ip_address=${userIP}`);
       return response.json();
     }
     return null;
@@ -42,7 +42,7 @@ export function useGetLocationHistory() {
   const [isLoadingHistory, setIsLoadingHistory] = useState(false);
   const getLocationHistoryQuery = useQuery(['locationHistory'], async () => {
 
-    const response =await fetch('http://localhost:8080/api/location/history', {
+    const response =await fetch(`http://${process.env.REACT_APP_API_URL}/api/location/history`, {
       headers: {
         Authorization: `Bearer ${token}`
       }
@@ -82,7 +82,7 @@ export function useAddLocation() {
   const addLocationMutation = useMutation(['addLocation'], async () => {
     const userIP = await fetchUserIP();
     if (userIP) {
-      const response = await fetch(`http://localhost:8080/api/location/addLocation?ip_address=${userIP}`, {
+      const response = await fetch(`http://${process.env.REACT_APP_API_URL}/api/location/addLocation?ip_address=${userIP}`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',

practice-app/client/src/pages/favorite-games/favorite-games.js

@@ -11,11 +11,11 @@ function FavoriteGames() {
   const {authState, setAuthState} = useContext(AuthContext);
   let navigate = useNavigate();
   useEffect(() => {
-    if (!authState.status) {
+    if (!localStorage.getItem("accessToken")) {
       navigate("/signin");
     }
     else {
-      axios.get("http://localhost:8080/api/favorite-games",{headers:{"Authorization":localStorage.getItem("accessToken")}})
+      axios.get(`http://${process.env.REACT_APP_API_URL}/api/favorite-games`,{headers:{"Authorization":localStorage.getItem("accessToken")}})
       .then((response) => {
         setFavoriteGames(response.data);
       })
@@ -29,10 +29,10 @@ function FavoriteGames() {
   }, [navigate, authState, setAuthState]);
 
   const handleGameRemove = (game) => {
-    axios.delete(`http://localhost:8080/api/favorite-games?appId=${game.appId}`,{headers:{"Authorization":localStorage.getItem("accessToken")}})
+    axios.delete(`http://${process.env.REACT_APP_API_URL}/api/favorite-games?appId=${game.appId}`,{headers:{"Authorization":localStorage.getItem("accessToken")}})
       .then((response) => {
         setMessage(response.data.message);
-        axios.get("http://localhost:8080/api/favorite-games",{headers:{"Authorization":localStorage.getItem("accessToken")}})
+        axios.get(`http://${process.env.REACT_APP_API_URL}/api/favorite-games`,{headers:{"Authorization":localStorage.getItem("accessToken")}})
           .then((response) => {
             setFavoriteGames(response.data);
         })
@@ -51,7 +51,7 @@ function FavoriteGames() {
   };
 
   const handleSearch = () => {
-    axios.get(`http://localhost:8080/api/favorite-games/search?searchValue=${searchQuery}`)
+    axios.get(`http://${process.env.REACT_APP_API_URL}/api/favorite-games/search?searchValue=${searchQuery}`)
       .then((response) => {
         setSearchResults(response.data);
       })
@@ -61,10 +61,10 @@ function FavoriteGames() {
   };
 
   const handleGameAdd = (game) => {
-    axios.post(`http://localhost:8080/api/favorite-games?appId=${game.appid}`,{}, {headers:{"Authorization":localStorage.getItem("accessToken")}})
+    axios.post(`http://${process.env.REACT_APP_API_URL}/api/favorite-games?appId=${game.appid}`,{}, {headers:{"Authorization":localStorage.getItem("accessToken")}})
       .then((response) => {
         setMessage(response.data.message);
-        axios.get("http://localhost:8080/api/favorite-games",{headers:{"Authorization":localStorage.getItem("accessToken")}})
+        axios.get(`http://${process.env.REACT_APP_API_URL}/api/favorite-games`,{headers:{"Authorization":localStorage.getItem("accessToken")}})
           .then((response) => {
             setFavoriteGames(response.data);
         })

practice-app/client/src/pages/furkan/createEvent.js

@@ -8,7 +8,7 @@ function CreateEventForm() {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
 
-  const Link = "http://localhost:8080/api/events/createEvent"
+  const Link = `http://${process.env.REACT_APP_API_URL}/api/events/createEvent`
   const handleSubmit = async (event) => {
     event.preventDefault();
     setIsLoading(true);

practice-app/client/src/pages/furkan/listEvent.js

@@ -5,7 +5,7 @@ import Button from '@mui/material/Button';
 function EventList() {
   const [events, setEvents] = useState([]);
   const [displayCount, setDisplayCount] = useState(10);
-  const link = "http://localhost:8080/api/events/list"
+  const link = `http://${process.env.REACT_APP_API_URL}/api/events/list`
   useEffect(() => {
     axios.get(link)
       .then(response => setEvents(response.data))

practice-app/client/src/pages/melih/melih.js

@@ -13,7 +13,7 @@ const Page1 = () => {
   console.log('handleGameStoresClick called');
   try {
     console.log("Button clicked");
-    const response = await axios.get('http://localhost:8080/api/gameprices/stores');
+    const response = await axios.get(`http://${process.env.REACT_APP_API_URL}/api/gameprices/stores`);
     setGameStores(response);
     const newWindow = window.open();
     newWindow.document.title = "Game Stores";
@@ -40,7 +40,7 @@ const handleMyCartClick = async () => {
   try {
     console.log("Button clicked");
     const accessToken = localStorage.getItem("accessToken");
-    const response = (await axios.get('http://localhost:8080/api/gameprices', {headers: {Authorization: accessToken}})).data;
+    const response = (await axios.get(`http://${process.env.REACT_APP_API_URL}/api/gameprices`, {headers: {Authorization: accessToken}})).data;
     const cartData = response.map(item => {
       return {
         game_name: item.game_name,
@@ -130,7 +130,7 @@ const handleMyCartClick = async () => {
   const addToCartClick = async () => {
     try {
       const accessToken = localStorage.getItem("accessToken");
-        const response = (await axios.post('http://localhost:8080/api/gameprices/add-cart', {name : searchResult.game_name} ,{headers: {Authorization: accessToken}}));
+        const response = (await axios.post(`http://${process.env.REACT_APP_API_URL}/api/gameprices/add-cart`, {name : searchResult.game_name} ,{headers: {Authorization: accessToken}}));
         window.alert("Game is in your cart now!");
     } catch (error) {
       console.error(error);
@@ -140,7 +140,7 @@ const handleMyCartClick = async () => {
   const handleSearch = async () => {
     try {
       const accessToken = localStorage.getItem("accessToken");  
-      const response = await axios.get(`http://localhost:8080/api/gameprices/game?name=${searchTerm}`, {headers: {"Authorization": accessToken}});
+      const response = await axios.get(`http://${process.env.REACT_APP_API_URL}/api/gameprices/game?name=${searchTerm}`, {headers: {"Authorization": accessToken}});
       console.log(response.data);
       setSearchResult(response.data);
       console.log(searchResult);

practice-app/client/src/pages/sena/sena.js

@@ -5,7 +5,7 @@ function Genre( ) {
   const [result, setResult] = useState([]);
 
   const handleClick = () => {
-    axios.get('http://localhost:8080/api/genreDb?email=fatmasenaalci@gmail.com')
+    axios.get(`http://${process.env.REACT_APP_API_URL}/api/genreDb?email=fatmasenaalci@gmail.com`)
       .then((response) => {
         const json_string = JSON.stringify(response.data);
         var obj = JSON.parse(json_string);

practice-app/client/src/pages/signin.js

@@ -25,7 +25,7 @@ const SignIn = () => {
     setError("");
     const data = {identifier: identifier, password: password};
     try {
-      const loginResponse = await axios.post("http://localhost:8080/api/users/login", data);
+      const loginResponse = await axios.post(`http://${process.env.REACT_APP_API_URL}/api/users/login`, data);
       localStorage.setItem("accessToken", loginResponse.data.accessToken);
       setAuthState({
         status: true

practice-app/client/src/pages/signup.js

@@ -25,8 +25,8 @@ const SignUp = () => {
     setError("");
     const data = {username: username, email: email, password: password};
     try {
-      await axios.post("http://localhost:8080/api/users/signup", data);
-      const loginResponse = await axios.post("http://localhost:8080/api/users/login",{identifier: data.email, password: data.password});
+      await axios.post(`http://${process.env.REACT_APP_API_URL}/api/users/signup`, data);
+      const loginResponse = await axios.post(`http://${process.env.REACT_APP_API_URL}/api/users/login`,{identifier: data.email, password: data.password});
       localStorage.setItem("accessToken", loginResponse.data.accessToken);
       setAuthState({
         status: true

practice-app/client/src/pages/tayyip/randomGame.jsx

@@ -18,16 +18,16 @@ function App() {
 
   let navigate = useNavigate();
   useEffect(() => {
-    if (!authState.status) {
-      navigate('/signin')
-    } 
+    if (!localStorage.getItem("accessToken")) {
+      navigate("/signin");
+    }
   });
 
 
   async function handleSubmit() {
     setIsLoading(true);
     try {
-      const result = await axios.post('http://localhost:8080/api/random-game',
+      const result = await axios.post(`http://${process.env.REACT_APP_API_URL}/api/random-game`,
         {},
         {
           headers: {
@@ -44,7 +44,7 @@ function App() {
 
   async function handleGetHistory() {
     try {
-      const result = await axios.get("http://localhost:8080/api/random-game/history", {
+      const result = await axios.get(`http://${process.env.REACT_APP_API_URL}/api/random-game/history`, {
         headers: {
           "Authorization": `Bearer ${token}`
         }

practice-app/client/src/pages/tayyip/randomGameHistory.jsx

@@ -10,7 +10,7 @@ const GameHistory = () => {
     useEffect(() => {
         async function fetchData() {
             try {
-                const result = await axios.get("http://localhost:8080/api/random-game/history", {
+                const result = await axios.get(`http://${process.env.REACT_APP_API_URL}/api/random-game/history`, {
                     headers: {
                         "Authorization": `Bearer ${token}`
                     }

practice-app/client/src/pages/tuluyhan/tuluyhan.js

@@ -13,7 +13,7 @@ export default function App() {
     setIsLoading(true);
 
     try {
-      const response = await axios.get("http://localhost:8080/api/streaming-games/most-viewed");
+      const response = await axios.get(`http://${process.env.REACT_APP_API_URL}/api/streaming-games/most-viewed`);
 
       setMostViewedGame(response.data);
       setResponseMessage("");
@@ -29,7 +29,7 @@ export default function App() {
     setIsLoading(true);
 
     try {
-      await axios.post("http://localhost:8080/api/streaming-games/most-viewed", mostViewedGame);
+      await axios.post(`http://${process.env.REACT_APP_API_URL}/api/streaming-games/most-viewed`, mostViewedGame);
 
       setResponseMessage("Most viewed game saved successfully!");
     } catch (error) {
@@ -43,7 +43,7 @@ export default function App() {
     setIsLoading(true);
 
     try {
-      const response = await axios.get("http://localhost:8080/api/streaming-games/history-most-viewed");
+      const response = await axios.get(`http://${process.env.REACT_APP_API_URL}/api/streaming-games/history-most-viewed`);
 
       setSavedGames(response.data);
       setResponseMessage("");

practice-app/client/src/pages/yunus/add_platform.js

@@ -15,7 +15,7 @@ const SubmitPlatform = () => {
     try {
       if (localStorage.getItem("accessToken")) {
 
-        const response = await axios.post('http://localhost:8080/api/game-platform/platform?title=' + keyword,{} ,{
+        const response = await axios.post(`http://${process.env.REACT_APP_API_URL}/api/game-platform/platform?title=` + keyword,{} ,{
           headers: {
            "Authorization": localStorage.getItem("accessToken"),
           },

practice-app/client/src/pages/yunus/list_games.js

@@ -14,7 +14,7 @@ const ListGames = () => {
   const [data, setData] = React.useState(null);
 
   const handleClick = (id) => {
-    const link="http://localhost:8080/api/game-platform/game?id="+id;
+    const link=`http://${process.env.REACT_APP_API_URL}/api/game-platform/game?id=`+id;
     axios
       .get(link, {
         headers: {

practice-app/client/src/pages/yunus/search_screen.js

@@ -16,7 +16,7 @@ function SearchForm() {
       };
 
   const handleSubmit = async () => {
-    const link = "http://localhost:8080/api/game-platform/search?title="+inputValue;
+    const link = `http://${process.env.REACT_APP_API_URL}/api/game-platform/search?title=`+inputValue;
     const response = await axios.get(link, {
       headers: {
         Authorization: localStorage.getItem("accessToken"),