feat: add loading

GBSWHS · Aug 20, 2023 · 7195562 · 7195562
1 parent 6844699
commit 7195562
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 8 deletions.
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -7,6 +7,10 @@ const Button = styled.button`
   cursor: pointer;
   border-radius: 2px;
   font-weight: 900;
+
+  &:disabled {
+    opacity: 0.5;
+  }
 `
 
 export default Button
diff --git a/src/components/CreateModal.tsx b/src/components/CreateModal.tsx
@@ -15,6 +15,7 @@ interface Props {
 
 const CreateModal: FC<Props> = ({ display, action }) => {
   const { refresh } = useRefreshNotifier()
+  const [isLoading, setIsLoading] = useState(false)
   const [, updateState] = useState<any>()
   const forceUpdate = useCallback(() => { updateState({}) }, [])
   const [price, setPrice] = useState(0)
@@ -62,6 +63,9 @@ const CreateModal: FC<Props> = ({ display, action }) => {
   }
 
   async function create (): Promise<void> {
+    if (isLoading) return
+    setIsLoading(true)
+
     forceUpdate()
     await axios('/api/instances', {
       method: 'POST',
@@ -81,6 +85,7 @@ const CreateModal: FC<Props> = ({ display, action }) => {
     })
 
     refresh()
+    setIsLoading(false)
     action(false)
   }
 
@@ -145,7 +150,7 @@ const CreateModal: FC<Props> = ({ display, action }) => {
         </div>
         <Bottom>
           <h1 style={{ marginRight: '10px' }}>예상 금액: {(price + storage * 0.1).toFixed(2)}$/월</h1>
-          <Button style={{ backgroundColor: '#ff9900' }} onClick={() => { void create() }}>생성</Button>
+          <Button disabled={isLoading} style={{ backgroundColor: '#ff9900' }} onClick={() => { void create() }}>{isLoading ? '생성중' : '생성'}</Button>
         </Bottom>
       </Form>
     </Modal>

diff --git a/src/components/SocketWatcher/index.tsx b/src/components/SocketWatcher/index.tsx
@@ -15,10 +15,16 @@ const SocketWatcher: FC = () => {
     })
 
     socket.on('message', (data) => {
-      toast(() => (
-        <Alert type={data.type.toLowerCase()}>
-          {data.message}
-        </Alert>
+      toast.custom((t) => (
+        <div style={{
+          opacity: t.visible ? 1 : 0,
+          transition: 'opacity 100ms ease-in-out'
+        }}>
+          <Alert type={data.type.toLowerCase()}>
+            {data.message}
+            {data?.error}
+          </Alert>
+        </div>
       ))
 
       refresh()

diff --git a/src/components/TopNav/index.tsx b/src/components/TopNav/index.tsx
@@ -64,7 +64,15 @@ const TopNav: FC = () => {
       </div>
 
       <div>
-        <button className={style.logout} onClick={onLogout}>
+        <a className={style.text} href="https://aws.gbsw.hs.kr" target="_blank" rel="noreferrer">
+          메뉴얼
+        </a>
+
+        <a className={style.text} href="https://github.com/GBSWHS" target="_blank" rel="noreferrer">
+          개발자
+        </a>
+
+        <button className={style.text} onClick={onLogout}>
           로그아웃
         </button>
       </div>

diff --git a/src/components/TopNav/style.module.scss b/src/components/TopNav/style.module.scss
@@ -66,11 +66,13 @@
     }
   }
 
-  .logout {
+  .text {
     background-color: transparent;
     border: none;
     color: white;
     cursor: pointer;
+    height: auto;
+    word-break: keep-all;
     text-decoration: underline dashed rgb(135, 149, 150);
 
     &:hover {

diff --git a/src/components/UpdateModal.tsx b/src/components/UpdateModal.tsx
@@ -17,6 +17,7 @@ interface Props {
 }
 
 const UpdateModal: FC<Props> = ({ display, booleanAction, instance, instanceAction, uuid }) => {
+  const [isLoading, setIsLoading] = useState(false)
   const [, updateState] = useState<any>()
   const forceUpdate = useCallback(() => { updateState({}) }, [])
   const { refresh } = useRefreshNotifier()
@@ -50,6 +51,9 @@ const UpdateModal: FC<Props> = ({ display, booleanAction, instance, instanceActi
   }
 
   async function update (): Promise<void> {
+    if (isLoading) return
+    setIsLoading(true)
+
     forceUpdate()
     await axios(`/api/instances/${uuid}`, {
       method: 'PUT',
@@ -70,6 +74,7 @@ const UpdateModal: FC<Props> = ({ display, booleanAction, instance, instanceActi
 
     refresh()
     booleanAction(false)
+    setIsLoading(false)
   }
 
   return (
@@ -131,7 +136,7 @@ const UpdateModal: FC<Props> = ({ display, booleanAction, instance, instanceActi
           </div>
           <Bottom>
             <h1 style={{ marginRight: '10px' }}>예상 금액: {(price + storage * 0.1).toFixed(2)}$/월</h1>
-            <Button style={{ backgroundColor: '#ff9900' }} onClick={() => { void update() }}>{isIpChange ? '수정 후 재시작' : '수정'}</Button>
+            <Button style={{ backgroundColor: '#ff9900' }} onClick={() => { void update() }}>{isLoading ? '수정중.' : (isIpChange ? '수정 후 재시작' : '수정')}</Button>
           </Bottom>
         </Form>
     </Modal>