refactor: add typescript support to project

2022-06-21 15:08:35 +08:00
parent 88ec2b742a
commit bd799ebea8
259 changed files with 1042 additions and 458 deletions
@@ -0,0 +1,58 @@
+// import { useState, useEffect } from "react";
+import styled, { keyframes } from "styled-components";
+import { Ring } from "@uiball/loaders";
+import Button from "./styled/Button";
+import useLogout from "../hook/useLogout";
+
+const DelayVisible = keyframes`
+from{
+opacity: 0;
+}
+to{
+opacity: 1;
+}
+`;
+
+const StyledWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  align-items: center;
+  justify-content: center;
+  &.fullscreen {
+    width: 100vw;
+    height: 100vh;
+  }
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .reload {
+    opacity: 0;
+    &.visible {
+      animation: ${DelayVisible} 1s forwards;
+      animation-delay: 30s;
+    }
+  }
+`;
+
+export default function Loading({ reload = false, fullscreen = false }) {
+  const { clearLocalData } = useLogout();
+  const handleReload = () => {
+    clearLocalData();
+    // todo: only firefox has argument
+    location.reload(true);
+  };
+
+  return (
+    <StyledWrapper className={fullscreen ? "fullscreen" : ""}>
+      <Ring className="loading" size={40} lineWeight={5} speed={2} color="black" />
+      <Button className={`reload danger ${reload ? "visible" : ""}`} onClick={handleReload}>
+        Reload
+      </Button>
+    </StyledWrapper>
+  );
+}