[#86] refactor: refactoring user page

2022-2-Graduation-Project · Mar 13, 2023 · 7180e70 · 7180e70
1 parent 26091b4
commit 7180e70
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 101 deletions.
diff --git a/bowwowcare/src/components/Header.js b/bowwowcare/src/components/Header.js
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import { useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { useDispatch } from "react-redux";
 
 import { logout } from "../slices/auth";
@@ -25,6 +25,7 @@ function Header() {
 	const handleLogout = (e) => {
 		dispatch(logout());
 		navigate("/");
+		window.location.reload();
 	}
 
 	const handleUser = (e) => {
@@ -43,7 +44,7 @@ function Header() {
 				JSON.parse(localStorage.getItem("user")) ? (
 					window.location.pathname === "/user" ? <button className="text-right" onClick={handleLogout}>로그아웃</button> : window.location.pathname === "/" ? 
 					<button onClick={handleUser} >
-						<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" className="bi bi-person fill-slate-500" viewBox="0 0 16 16">
+						<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" className="bi bi-person fill-gray-500" viewBox="0 0 16 16">
   						<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z"/>
 						</svg>
 					</button> : null

diff --git a/bowwowcare/src/components/ThemeBox.js b/bowwowcare/src/components/ThemeBox.js
@@ -2,10 +2,10 @@ import { useContext } from 'react'
 import { ThemeContext } from './../context/ThemeProvider.js';
 import { colorVariants } from "../utils/Dictionary";
 
-function ThemeBox({onClick, title, status, rewards, mainColor, subColor, disabled, locked}) {
+function ThemeBox({onClick, title, status, rewards, mainColor, subColor, locked}) {
   const [themeMode, setThemeMode] = useContext(ThemeContext);
   return (
-    <button onClick={onClick} disabled={disabled} className={`shadow-lg px-6 py-3 rounded-lg border ${locked && "bg-gray-100"} ${status ? colorVariants['border'+themeMode] : null}`}>
+    <button onClick={onClick} className={`shadow-lg px-6 py-3 rounded-lg border ${locked && "bg-gray-100"} ${status ? colorVariants['border'+themeMode] : null}`}>
         <div className='flex justify-between mb-4'>
           <span>{title}</span>
           <span>{locked && '🔒'}</span>

diff --git a/bowwowcare/src/components/ThemeSwitcher.js b/bowwowcare/src/components/ThemeSwitcher.js
@@ -1,30 +1,24 @@
 import axios from 'axios';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext } from 'react';
 import { ThemeContext } from '../context/ThemeProvider.js';
 import ThemeBox from './ThemeBox.js';
 import { API_URL } from '../Config.js';
 import authHeader from '../services/auth-header.js';
 
-function ThemeSwitcher(props) {
+function ThemeSwitcher({ availableTheme, reward, username, fileImg }) {
   const [themeMode, setThemeMode] = useContext(ThemeContext);
-  const availableTheme = props.availableTheme;
-  const reward = props.reward;
-  const bones = [1,20,3];
-  const themes = [0,1,2]
+  const mode = ["primary","secondary", "third"];
+  const bones = [1,2,30];
+  const themes = [0,1,2];
 
-  useEffect(() => {
-    //setAvailableTheme(props.availableThemes);
-    //setReward(props.reward);
-  }, [])
-
   const putUser = (theme) => {
     axios({
       url: `${API_URL}/user`,
       method: 'PUT',
       headers: authHeader(),
       data: {
-        username : "짱구",
-        profileImage : "",
+        username : `${username}`,
+        profileImage : `${fileImg}`,
         theme : theme
       }
     })
@@ -52,8 +46,8 @@ function ThemeSwitcher(props) {
           method: 'PUT',
           headers: authHeader(),
           data: {
-            username : "짱구",
-            profileImage : "",
+            username : `${username}`,
+            profileImage : `${fileImg}`,
             theme : theme
           }
         })
@@ -66,51 +60,37 @@ function ThemeSwitcher(props) {
     }).catch((e) => console.log(e.response.error))
   }
 
-  const switchPrimary = () => {
-    setThemeMode("primary");
-    putUser(themes[0])
-  }
-
-  const switchSecondary = () => {
-    if(props.availableTheme.indexOf(1) < 0){
-      alert("theme2 구매?");
-      console.log(reward);
-      if(reward >= bones[1]){
-        postUser(bones[1], 1);
-        window.location.reload();
-        setThemeMode("secondary");
+  const handleTheme = (theme) => {
+    // TODO: Alert component
+    if(availableTheme.indexOf(theme) < 0){
+      if(reward >= bones[theme]){
+        if (window.confirm("구매하시겠습니까?") == true){ 
+          postUser(bones[theme], theme);
+          setThemeMode(mode[theme]);
+          window.location.reload();
+        }else{
+          console.log("취소");
+        }
       }else{
-        console.log("부족!");
+        alert("리워드가 부족합니다!")
       }
     }else{
-      putUser(themes[1]);
-      setThemeMode("secondary");
+      putUser(themes[theme]);
+      setThemeMode(mode[theme]);
     }
-
   }
 
-  const switchThird = () => {
-    if(props.availableTheme.indexOf(2) < 0){
-      alert("theme3 구매?");
-      //console.log(reward);
-      if(reward >= bones[2]){
-        postUser(bones[2], 2);
-        window.location.reload();
-        setThemeMode("third");
-      }else{
-        console.log("부족!");
-      }
-    }else{
-      putUser(themes[2]);
-      setThemeMode("third");
-    }
+  const switchTheme = (theme) => {
+    handleTheme(theme);
   }
 
   return (
       <div className='flex flex-col gap-6'>
-        <ThemeBox onClick={switchPrimary} title={"Theme 1"} status={themeMode === 'primary' ? '적용중' : null} rewards={bones[0]} mainColor={"primary-theme"} subColor={"primary-theme-s"} locked={availableTheme.indexOf(0) < 0}></ThemeBox>
-        <ThemeBox onClick={switchSecondary} title={"Theme 2"} status={themeMode === 'secondary' ? '적용중' : null} rewards={bones[1]} mainColor={"secondary-theme"} subColor={"secondary-theme-s"} locked={availableTheme.indexOf(1) < 0}></ThemeBox>
-        <ThemeBox onClick={switchThird} title={"Theme 3"} status={themeMode === 'third' ? '적용중' : null} rewards={bones[2]} mainColor={"third-theme"} subColor={"third-theme-s"} locked={availableTheme.indexOf(2) < 0} disabled={false}></ThemeBox>
+        {themes.map((theme, i) => {
+          return(
+            <ThemeBox onClick={() => switchTheme(theme)} title={`Theme ${theme}`} status={themeMode === mode[theme] ? '적용중' : null} rewards={bones[theme]} mainColor={`${mode[theme]}-theme`} subColor={`${mode[theme]}-theme-s`} locked={availableTheme.indexOf(theme) < 0} key={i}></ThemeBox>
+          );
+        })}
       </div>
   );
 }

diff --git a/bowwowcare/src/context/ThemeProvider.js b/bowwowcare/src/context/ThemeProvider.js
@@ -1,38 +1,26 @@
-import { createContext, useState, useEffect, useRef } from "react";
-import authHeader from "../services/auth-header";
-import axios from "axios";
-import { API_URL } from "../Config";
+import { createContext, useState, useEffect } from "react";
+import userService from "../services/user.service";
 
 export const ThemeContext = createContext({});
 
 function ThemeProvider({ children }) {
   const theme = ["primary", "secondary", "third"];
   const [myTheme, setMyTheme] = useState(0);
-  const localTheme = window.localStorage.getItem("theme") || theme[0];
-  const [ThemeMode, setThemeMode] = useState(localTheme);
+  const [ThemeMode, setThemeMode] = useState(theme[0]);
 
   useEffect(() => {
-    getUser();
+    userService.getUserBoard().then((response) => {
+      if(response.status === 200) {
+        const user = response.data;
+        setMyTheme(user.theme);
+      }
+    }
+    ).catch((e) => {console.log(e.response.data)})
   },[]);
 
   useEffect(() => {
     setThemeMode(theme[myTheme]);
   },[myTheme])
-
-  const getUser = () => {
-    axios({
-      method: 'GET',
-      url: `${API_URL}/user`,
-      headers: authHeader(),
-    })
-    .then( (response) => {
-      if(response.status === 200) {
-      const user = response.data;
-      setMyTheme(user.theme);
-      }
-    }
-    ).catch((e) => {console.log(e.response.data)})
-  }
 
   return (
     <div>

diff --git a/bowwowcare/src/services/user.service.js b/bowwowcare/src/services/user.service.js
@@ -1,14 +1,15 @@
 import axios from "axios";
 import authHeader from "./auth-header";
+//import { API_URL } from "../Config";
 
-const API_URL = "http://localhost:8080/api/user/";
+const API_URL = "http://localhost:8080/api/user";
 
 const getPublicContent = () => {
   return axios.get(API_URL + "all");
 };
 
 const getUserBoard = () => {
-  return axios.get(API_URL + "user", { headers: authHeader() });
+  return axios.get("http://localhost:8080/api/v1/user" , { headers: authHeader() });
 };
 
 const userService = {

diff --git a/bowwowcare/src/views/UserPage/UserPage.js b/bowwowcare/src/views/UserPage/UserPage.js
@@ -1,40 +1,28 @@
 import React ,{ useEffect, useState }from "react";
-import axios from "axios";
 import Header from "../../components/Header";
 import ThemeSwitcher from "../../components/ThemeSwitcher";
 import HAPPY from "../../assets/images/happy.png"
-import { API_URL } from "../../Config";
-import authHeader from "../../services/auth-header";
+import userService from "../../services/user.service";
 
 function UserPage() {
   const [rewards, setRewards] = useState(0);
-  const [user, setUser] = useState();
   const [fileImg, setFileImg] = useState("");
   const [userName, setUserName] = useState("");
-  const [availableThemes, setAvailableThemes] = useState([])
+  const [availableThemes, setAvailableThemes] = useState([]);
 
   useEffect(() => {
-    getUser();
-  }, [])
-
-  const getUser = () => {
-    axios({
-      method: 'GET',
-      url: `${API_URL}/user`,
-      headers: authHeader(),
-    })
-    .then( (response) => {
+      userService.getUserBoard().then((response) => {
       if(response.status === 200) {
-      const user = response.data;
-      console.log(user);
-      setUserName(user.username);
-      setRewards(user.reward);
-      setFileImg(user.profileImage);
-      setAvailableThemes(user.availableTheme);
+        const user = response.data;
+        console.log(user);
+        setUserName(user.username);
+        setRewards(user.reward);
+        setFileImg(user.profileImage);
+        setAvailableThemes(user.availableTheme);
       }
     }
     ).catch((e) => {console.log(e.response.data)})
-  }
+  }, [])
 
   return (
     <div className="container mx-auto px-8 w-screen h-screen">
@@ -53,7 +41,7 @@ function UserPage() {
         <span>내 리워드</span>
         <span>{rewards}</span>
       </div>
-      <ThemeSwitcher availableTheme={availableThemes} reward={rewards}></ThemeSwitcher>
+      <ThemeSwitcher availableTheme={availableThemes} reward={rewards} username={userName} fileImg={fileImg} ></ThemeSwitcher>
     </div>
   );
 }