Merge pull request #89 from 2022-2-Graduation-Project/feature/86-user…

…-screen

Feature/86 user screen

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) => {

bowwowcare/src/components/ThemeBox.js

@@ -1,15 +1,15 @@
-import styled from "styled-components";
 import { useContext } from 'react'
 import { ThemeContext } from './../context/ThemeProvider.js';
 import { colorVariants } from "../utils/Dictionary";
 
-function ThemeBox({onClick, title, status, rewards, mainColor, subColor}) {
+function ThemeBox({onClick, title, status, rewards, mainColor, subColor, locked}) {
   const [themeMode, setThemeMode] = useContext(ThemeContext);
   return (
-    <button onClick={onClick} className={`shadow-lg px-6 py-3 rounded-lg border ${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 className=" text-gray-500">{status}</span>
+          <span>{locked && '🔒'}</span>
+          {status && <span className="text-gray-500">{status}</span>}
         </div>
         <div className='w-full flex justify-between content-center mb-2'>
           <div className='flex gap-x-4 w-3/4'>

bowwowcare/src/components/ThemeSwitcher.js

@@ -1,31 +1,96 @@
+import axios from 'axios';
 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() {
+function ThemeSwitcher({ availableTheme, reward, username, fileImg }) {
   const [themeMode, setThemeMode] = useContext(ThemeContext);
+  const mode = ["primary","secondary", "third"];
+  const bones = [1,2,30];
+  const themes = [0,1,2];
 
-
-  const switchPrimary = () => {
-    setThemeMode("primary");
-    window.localStorage.setItem('theme', 'primary');
+  const putUser = (theme) => {
+    axios({
+      url: `${API_URL}/user`,
+      method: 'PUT',
+      headers: authHeader(),
+      data: {
+        username : `${username}`,
+        profileImage : `${fileImg}`,
+        theme : theme
+      }
+    })
+    .then((response) => {
+      if(response.data === 200){
+        console.log(response.data)
+      }
+    }).catch((e) => console.log(e.response.error))
+  }
+
+  const postUser = (bones, theme) => {
+    axios({
+      method: 'POST',
+      url: `${API_URL}/user/theme`,
+      headers: authHeader(),
+      data: {
+        bones: bones,
+        theme: theme
+      }
+    }).then((response) => {
+      if(response.status === 200){
+        console.log(response.data);
+        axios({
+          url: `${API_URL}/user`,
+          method: 'PUT',
+          headers: authHeader(),
+          data: {
+            username : `${username}`,
+            profileImage : `${fileImg}`,
+            theme : theme
+          }
+        })
+        .then((response) => {
+          if(response.data === 200){
+            console.log(response.data)
+          }
+        }).catch((e) => console.log(e.response.error))
+      }
+    }).catch((e) => console.log(e.response.error))
   }
 
-  const switchSecondary = () => {
-    setThemeMode("secondary");
-    window.localStorage.setItem('theme', '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{
+        alert("리워드가 부족합니다!")
+      }
+    }else{
+      putUser(themes[theme]);
+      setThemeMode(mode[theme]);
+    }
   }
 
-  const switchThird = () => {
-    setThemeMode("third");
-    window.localStorage.setItem('theme', '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={10} mainColor={"primary-theme"} subColor={"primary-theme-s"}></ThemeBox>
-        <ThemeBox onClick={switchSecondary} title={"Theme 2"} status={themeMode === 'secondary' ? '적용중' : null} rewards={20} mainColor={"secondary-theme"} subColor={"secondary-theme-s"}></ThemeBox>
-        <ThemeBox onClick={switchThird} title={"Theme 3"} status={themeMode === 'third' ? '적용중' : null} rewards={30} mainColor={"third-theme"} subColor={"third-theme-s"}></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>
   );
 }

bowwowcare/src/context/ThemeProvider.js

@@ -1,10 +1,26 @@
-import { createContext, useState } from "react";
+import { createContext, useState, useEffect } from "react";
+import userService from "../services/user.service";
 
 export const ThemeContext = createContext({});
 
 function ThemeProvider({ children }) {
-  const localTheme = window.localStorage.getItem("theme") || "primary"
-  const [ThemeMode, setThemeMode] = useState(localTheme);
+  const theme = ["primary", "secondary", "third"];
+  const [myTheme, setMyTheme] = useState(0);
+  const [ThemeMode, setThemeMode] = useState(theme[0]);
+
+  useEffect(() => {
+    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])
 
   return (
     <div>

bowwowcare/src/services/user.service.js

@@ -1,14 +1,13 @@
 import axios from "axios";
 import authHeader from "./auth-header";
-
-const API_URL = "http://localhost:8080/api/user/";
+import { API_URL } from "../Config";
 
 const getPublicContent = () => {
   return axios.get(API_URL + "all");
 };
 
 const getUserBoard = () => {
-  return axios.get(API_URL + "user", { headers: authHeader() });
+  return axios.get(API_URL + "/user" , { headers: authHeader() });
 };
 
 const userService = {

bowwowcare/src/views/UserPage/UserPage.js

@@ -1,12 +1,28 @@
-import React ,{ useState }from "react";
+import React ,{ useEffect, useState }from "react";
 import Header from "../../components/Header";
 import ThemeSwitcher from "../../components/ThemeSwitcher";
 import HAPPY from "../../assets/images/happy.png"
+import userService from "../../services/user.service";
 
 function UserPage() {
   const [rewards, setRewards] = useState(0);
-  const [fileImg, setFileImg] = useState("string");
-  const [userName, setUserName] = useState("짱구");
+  const [fileImg, setFileImg] = useState("");
+  const [userName, setUserName] = useState("");
+  const [availableThemes, setAvailableThemes] = useState([]);
+
+  useEffect(() => {
+      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);
+      }
+    }
+    ).catch((e) => {console.log(e.response.data)})
+  }, [])
 
   return (
     <div className="container mx-auto px-8 w-screen h-screen">
@@ -20,14 +36,12 @@ function UserPage() {
         <div className="text-center">{userName}</div>
       </div>
 
-
-
       <hr />
       <div className='flex justify-between mx-5 my-3'>
         <span>내 리워드</span>
         <span>{rewards}</span>
       </div>
-      <ThemeSwitcher></ThemeSwitcher>
+      <ThemeSwitcher availableTheme={availableThemes} reward={rewards} username={userName} fileImg={fileImg} ></ThemeSwitcher>
     </div>
   );
 }