Rearrange

This commit is contained in:
Manav Rathi 2024-05-25 16:48:13 +05:30
parent 650163c341
commit c18be32c09
No known key found for this signature in database

View file

@ -12,7 +12,7 @@ import { CustomError } from "@ente/shared/error";
import InMemoryStore, { MS_KEYS } from "@ente/shared/storage/InMemoryStore"; import InMemoryStore, { MS_KEYS } from "@ente/shared/storage/InMemoryStore";
import LogoutOutlined from "@mui/icons-material/LogoutOutlined"; import LogoutOutlined from "@mui/icons-material/LogoutOutlined";
import MoreHoriz from "@mui/icons-material/MoreHoriz"; import MoreHoriz from "@mui/icons-material/MoreHoriz";
import { Button, ButtonBase, Snackbar, TextField } from "@mui/material"; import { Button, ButtonBase, Snackbar, TextField, styled } from "@mui/material";
import { t } from "i18next"; import { t } from "i18next";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { AppContext } from "pages/_app"; import { AppContext } from "pages/_app";
@ -30,8 +30,7 @@ const AuthenticatorCodesPage = () => {
useEffect(() => { useEffect(() => {
const fetchCodes = async () => { const fetchCodes = async () => {
try { try {
const res = await getAuthCodes(); setCodes(await getAuthCodes());
setCodes(res);
} catch (e) { } catch (e) {
if ( if (
e instanceof Error && e instanceof Error &&
@ -58,11 +57,9 @@ const AuthenticatorCodesPage = () => {
if (!hasFetched) { if (!hasFetched) {
return ( return (
<> <VerticallyCentered>
<VerticallyCentered> <EnteSpinner />
<EnteSpinner></EnteSpinner> </VerticallyCentered>
</VerticallyCentered>
</>
); );
} }
@ -80,9 +77,7 @@ const AuthenticatorCodesPage = () => {
}} }}
> >
<div style={{ marginBottom: "1rem" }} /> <div style={{ marginBottom: "1rem" }} />
{filteredCodes.length === 0 && searchTerm.length === 0 ? ( {(filteredCodes.length || searchTerm.length) && (
<></>
) : (
<TextField <TextField
id="search" id="search"
name="search" name="search"
@ -104,7 +99,11 @@ const AuthenticatorCodesPage = () => {
justifyContent: "center", justifyContent: "center",
}} }}
> >
{filteredCodes.length === 0 ? ( {filteredCodes.length ? (
filteredCodes.map((code) => (
<CodeDisplay key={code.id} code={code} />
))
) : (
<div <div
style={{ style={{
alignItems: "center", alignItems: "center",
@ -113,21 +112,11 @@ const AuthenticatorCodesPage = () => {
marginTop: "32px", marginTop: "32px",
}} }}
> >
{searchTerm.length !== 0 ? ( {searchTerm.length && <p>{t("NO_RESULTS")}</p>}
<p>{t("NO_RESULTS")}</p>
) : (
<div />
)}
</div> </div>
) : (
filteredCodes.map((code) => (
<CodeDisplay key={code.id} code={code} />
))
)} )}
</div> </div>
<div style={{ marginBottom: "2rem" }} />
<Footer /> <Footer />
<div style={{ marginBottom: "4rem" }} />
</div> </div>
</> </>
); );
@ -396,14 +385,7 @@ const UnparseableCode: React.FC<UnparseableCodeProps> = ({
const Footer: React.FC = () => { const Footer: React.FC = () => {
return ( return (
<div <Footer_>
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
}}
>
<p>{t("AUTH_DOWNLOAD_MOBILE_APP")}</p> <p>{t("AUTH_DOWNLOAD_MOBILE_APP")}</p>
<a <a
href="https://github.com/ente-io/ente/tree/main/auth#-download" href="https://github.com/ente-io/ente/tree/main/auth#-download"
@ -411,6 +393,15 @@ const Footer: React.FC = () => {
> >
<Button color="accent">{t("DOWNLOAD")}</Button> <Button color="accent">{t("DOWNLOAD")}</Button>
</a> </a>
</div> </Footer_>
); );
}; };
const Footer_ = styled("div")`
margin-block-start: 2rem;
margin-block-end: 4rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
`;