From 6009c2b940e7b0463a712f8c52232bff298bdcb2 Mon Sep 17 00:00:00 2001
From: outsung <insung9546@gmail.com>
Date: Sun, 14 Feb 2021 02:41:28 +0900
Subject: [PATCH] added Refresh delay and Refreshing animation

---
 src/components/UserProfile/index.tsx | 46 +++++++++++++++++++++++++---
 src/components/UserProfile/style.ts  | 20 +++++++++---
 src/container/users/index.ts         |  2 ++
 src/pages/Studio/index.tsx           |  2 ++
 4 files changed, 62 insertions(+), 8 deletions(-)

diff --git a/src/components/UserProfile/index.tsx b/src/components/UserProfile/index.tsx
index da342c3..eeed265 100644
--- a/src/components/UserProfile/index.tsx
+++ b/src/components/UserProfile/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   ProfileBox,
   ImageBox,
@@ -19,6 +19,7 @@ type userProfileProps = {
   lane: string;
   age: number;
   gender: 'male' | 'female' | 'Private';
+  refreshTime: Date | undefined;
   clickUpdateBtn: (_id: string) => void;
   isFavorites: boolean;
   addFavorites: (idx: string) => void;
@@ -32,11 +33,44 @@ function UserProfile({
   lane,
   age,
   gender,
+  refreshTime,
   clickUpdateBtn,
   isFavorites,
   addFavorites,
   removeFavorites,
 }: userProfileProps) {
+  const elapsedMSec = useMemo(() => {
+    const date = new Date();
+    if (!refreshTime) return 1000 * 150;
+    const refreshDate = new Date(refreshTime);
+    return date.getTime() - refreshDate.getTime();
+  }, [refreshTime]);
+
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [updateBtnCheck, setUpdateBtnCheck] = useState(false);
+
+  useEffect(() => {
+    setUpdateBtnCheck(false);
+    setIsRefreshing(false);
+  }, [refreshTime]);
+
+  useEffect(() => {
+    const elapsedSec = elapsedMSec / 1000;
+    const is = elapsedSec > 120;
+
+    const afterTime = 120 - elapsedSec;
+
+    const timeoutHandle = setTimeout(
+      () => {
+        setUpdateBtnCheck(true);
+      },
+      is ? 1 : afterTime * 1000,
+    );
+    return () => {
+      clearTimeout(timeoutHandle);
+    };
+  }, [elapsedMSec]);
+
   return (
     <ProfileBox>
       <ImageBox>
@@ -53,17 +87,21 @@ function UserProfile({
         <Field>성별 : {GENDER_KR[gender]}</Field>
       </FieldBox>
       <Btn
-        isChcek={isFavorites}
+        isCheck={isFavorites}
         onClick={() => (isFavorites ? removeFavorites(_id) : addFavorites(_id))}
       >
         ★
       </Btn>
       <Btn
+        className={isRefreshing ? 'refreshing' : ''}
         style={{ top: '3px', right: '33px' }}
         onClick={() => {
-          clickUpdateBtn(_id);
+          if (updateBtnCheck && !isRefreshing) {
+            setIsRefreshing(true);
+            clickUpdateBtn(_id);
+          }
         }}
-        isChcek
+        isCheck={updateBtnCheck}
       >
         ↻
       </Btn>
diff --git a/src/components/UserProfile/style.ts b/src/components/UserProfile/style.ts
index e247ed7..25c6711 100644
--- a/src/components/UserProfile/style.ts
+++ b/src/components/UserProfile/style.ts
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 
 export const ProfileBox = styled.div`
   display: flex;
@@ -65,15 +65,27 @@ export const FieldLink = styled.div`
   cursor: pointer;
 `;
 
-export const Btn = styled.div<{ isChcek?: boolean }>`
+const refreshing = keyframes`
+  from {
+    transform: rotateZ(0deg);
+  }
+  to {
+    transform: rotateZ(360deg);
+  }
+`;
+export const Btn = styled.div<{ isCheck?: boolean }>`
   position: absolute;
   top: 2px;
   right: 5px;
 
   font-size: 25px;
 
-  color: ${(props) => (props.isChcek ? '#FEB82E' : '#000')};
-  opacity: 0.3;
+  color: ${(props) => (props.isCheck ? '#FEB82E' : '#000')};
+  opacity: 0.5;
 
   cursor: pointer;
+
+  &.refreshing {
+    animation: ${refreshing} 2s infinite;
+  }
 `;
diff --git a/src/container/users/index.ts b/src/container/users/index.ts
index ebdffc7..21ed17b 100644
--- a/src/container/users/index.ts
+++ b/src/container/users/index.ts
@@ -62,6 +62,7 @@ export type allgetRes = {
   lolLevel: string;
   lolTear: string;
   lolLane: string;
+  lolRefreshTime: Date;
 };
 export const allget = function () {
   return callApi.get<{}, [allgetRes]>('users/test');
@@ -91,6 +92,7 @@ export type updateLolInfoRes = {
   lolLevel: string;
   lolLane: string;
   lolChampion: string;
+  lolRefreshTime: Date;
 };
 export const updateLolInfo = function (_id: string) {
   return callApi.get<{}, updateLolInfoRes>(`users/lolInfo/${_id}`);
diff --git a/src/pages/Studio/index.tsx b/src/pages/Studio/index.tsx
index 86af074..b203a38 100644
--- a/src/pages/Studio/index.tsx
+++ b/src/pages/Studio/index.tsx
@@ -72,6 +72,7 @@ function Studio() {
     if (!users) return;
     const newUser = await updateLolInfo(_id);
     if (!newUser) return;
+    // console.log('newUser', newUser);
     setUsers(users.map((u) => (u._id === _id ? newUser : u)));
   };
 
@@ -180,6 +181,7 @@ function Studio() {
                     nickname={user.nickname}
                     tear={user.lolTear}
                     lane={user.lolLane}
+                    refreshTime={user.lolRefreshTime}
                     clickUpdateBtn={clickUpdateBtn}
                     isFavorites={favorites.includes(user._id)}
                     addFavorites={(idx) => {