Client:OAuth2: add list loader
This commit is contained in:
parent
20b79e4833
commit
3d766424e0
@ -2,5 +2,4 @@ import styled from "styled-components";
|
||||
|
||||
export const OAuthContainer = styled.div`
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
`;
|
||||
|
@ -16,6 +16,7 @@ import { OAuthContainer } from "./StyledOAuth";
|
||||
import { OAuthProps } from "./OAuth.types";
|
||||
import InfoDialog from "./sub-components/InfoDialog";
|
||||
import PreviewDialog from "./sub-components/PreviewDialog";
|
||||
import OAuthLoader from "./sub-components/List/Loader";
|
||||
|
||||
const MIN_LOADER_TIME = 500;
|
||||
|
||||
@ -70,7 +71,6 @@ const OAuth = ({
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
console.log(isInit);
|
||||
if (isInit) return setIsLoading(false);
|
||||
startLoadingRef.current = new Date();
|
||||
getData();
|
||||
@ -84,11 +84,16 @@ const OAuth = ({
|
||||
<OAuthContainer>
|
||||
<>
|
||||
{isLoading ? (
|
||||
<div>Loading...</div>
|
||||
<OAuthLoader viewAs={viewAs} currentDeviceType={currentDeviceType} />
|
||||
) : isEmptyClientList ? (
|
||||
<OAuthEmptyScreen t={t} />
|
||||
) : (
|
||||
<List t={t} clients={clientList} viewAs={viewAs} />
|
||||
<List
|
||||
t={t}
|
||||
clients={clientList}
|
||||
viewAs={viewAs}
|
||||
currentDeviceType={currentDeviceType}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
{infoDialogVisible && <InfoDialog visible={infoDialogVisible} />}
|
||||
|
@ -0,0 +1,46 @@
|
||||
import React from "react";
|
||||
|
||||
//@ts-ignore
|
||||
import RectangleLoader from "@docspace/common/components/Loaders/RectangleLoader";
|
||||
import { DeviceUnionType } from "@docspace/common/hooks/useViewEffect";
|
||||
//@ts-ignore
|
||||
import Loaders from "@docspace/common/components/Loaders";
|
||||
|
||||
//@ts-ignore
|
||||
import { ViewAsType } from "SRC_DIR/store/OAuthStore";
|
||||
|
||||
import { OAuthContainer } from "../../StyledOAuth";
|
||||
import { StyledContainer } from ".";
|
||||
|
||||
const OAuthLoader = ({
|
||||
viewAs,
|
||||
currentDeviceType,
|
||||
}: {
|
||||
viewAs: ViewAsType;
|
||||
currentDeviceType: DeviceUnionType;
|
||||
}) => {
|
||||
const buttonHeight = currentDeviceType !== "desktop" ? "40px" : "32px";
|
||||
|
||||
const listLoader =
|
||||
viewAs === "table" ? <Loaders.TableLoader /> : <Loaders.Rows />;
|
||||
|
||||
return (
|
||||
<OAuthContainer>
|
||||
<StyledContainer>
|
||||
<RectangleLoader
|
||||
className="description"
|
||||
width={"100%"}
|
||||
height={"16px"}
|
||||
/>
|
||||
<RectangleLoader
|
||||
className="add-button"
|
||||
width={"220px"}
|
||||
height={buttonHeight}
|
||||
/>
|
||||
{listLoader}
|
||||
</StyledContainer>
|
||||
</OAuthContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default OAuthLoader;
|
@ -15,22 +15,20 @@ import TableView from "./TableView";
|
||||
import RowView from "./RowView";
|
||||
|
||||
import RegisterNewButton from "../RegisterNewButton";
|
||||
import { DeviceUnionType } from "@docspace/common/hooks/useViewEffect";
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
export const StyledContainer = styled.div`
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.header {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
button {
|
||||
.add-button {
|
||||
width: fit-content;
|
||||
|
||||
margin-bottom: 12px;
|
||||
@ -41,9 +39,10 @@ interface ListProps {
|
||||
t: any;
|
||||
clients: ClientProps[];
|
||||
viewAs: ViewAsType;
|
||||
currentDeviceType: DeviceUnionType;
|
||||
}
|
||||
|
||||
const List = ({ clients, viewAs }: ListProps) => {
|
||||
const List = ({ clients, viewAs, currentDeviceType }: ListProps) => {
|
||||
const { t } = useTranslation(["OAuth", "Common"]);
|
||||
|
||||
return (
|
||||
@ -61,7 +60,7 @@ const List = ({ clients, viewAs }: ListProps) => {
|
||||
>
|
||||
{t("OAuthAppDescription")}
|
||||
</Text>
|
||||
<RegisterNewButton t={t} />
|
||||
<RegisterNewButton t={t} currentDeviceType={currentDeviceType} />
|
||||
<Consumer>
|
||||
{(context: { sectionWidth: number; sectionHeight: number }) => (
|
||||
<>
|
||||
|
@ -1,3 +1,6 @@
|
||||
import { DeviceUnionType } from "@docspace/common/hooks/useViewEffect";
|
||||
|
||||
export interface RegisterNewButtonProps {
|
||||
t: any;
|
||||
currentDeviceType: DeviceUnionType;
|
||||
}
|
||||
|
@ -1,11 +1,13 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { isMobile } from "react-device-detect";
|
||||
|
||||
import Button from "@docspace/components/button";
|
||||
|
||||
import { RegisterNewButtonProps } from "./RegisterNewButton.types";
|
||||
|
||||
const RegisterNewButton = ({ t }: RegisterNewButtonProps) => {
|
||||
const RegisterNewButton = ({
|
||||
t,
|
||||
currentDeviceType,
|
||||
}: RegisterNewButtonProps) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const onClick = () => {
|
||||
@ -15,7 +17,8 @@ const RegisterNewButton = ({ t }: RegisterNewButtonProps) => {
|
||||
return (
|
||||
<Button
|
||||
//@ts-ignore
|
||||
size={isMobile ? "normal" : "small"}
|
||||
className="add-button"
|
||||
size={currentDeviceType !== "desktop" ? "normal" : "small"}
|
||||
label={t("RegisterNewApp")}
|
||||
primary={true}
|
||||
onClick={onClick}
|
||||
|
Loading…
Reference in New Issue
Block a user