Max/zkldi_Tachi
1
0
Fork 0
mirror of https://github.com/zkldi/Tachi.git synced 2026-10-12 01:08:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: real metronic teardown

Browse Source
This commit is contained in:
zkldi
2022-06-26 19:27:09 +01:00
parent 3902bb745b
commit 33204a9ce3
9 changed files with 103 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/app/App.tsx
+1 -2
View File
@@ -1,6 +1,6 @@
import { MaterialThemeProvider } from "components/layout/misc/MaterialThemeProvider";
import { LoadingScreen } from "components/layout/screens/LoadingScreen";
import { BannedContextProvider } from "context/BannedContext";
import ErrorBoundary from "components/util/ErrorBoundary";
import { SubheaderContextProvider } from "context/SubheaderContext";
import { UserContextProvider } from "context/UserContext";
import { UserGameStatsContextProvider } from "context/UserGameStatsContext";
@@ -9,7 +9,6 @@ import React from "react";
import { Toaster } from "react-hot-toast";
import { QueryClient, QueryClientProvider } from "react-query";
import { BrowserRouter } from "react-router-dom";
import { MaterialThemeProvider } from "../_metronic/layout";
import { Routes } from "./routes/AppRoutes";
const queryClient = new QueryClient({
client/src/app/pages/LandingPage.tsx
+2 -2
View File
@@ -12,8 +12,8 @@ import React from "react";
export default function LandingPage() {
return (
<>
<HeaderMobile />
<Header />
{/* <HeaderMobile /> */}
{/* <Header /> */}
<div className="landing-page" id="kt_content">
<section id="hero" className="hero">
<div
client/src/components/layout/Layout.tsx
+5 -3
View File
@@ -1,6 +1,6 @@
import BackgroundImage from "components/layout/misc/BackgroundImage";
import { BackgroundContextProvider } from "context/BackgroundContext";
import React from "react";
import React, { useState } from "react";
import { JustChildren } from "types/react";
import { Footer } from "./footer/Footer";
import { Header } from "./header/Header";
@@ -8,9 +8,11 @@ import { HeaderMobile } from "./header/HeaderMobile";
import { SubHeader } from "./subheader/SubHeader";
export function Layout({ children }: JustChildren) {
const [mobileShow, setMobileShow] = useState(false);
return (
<>
<HeaderMobile />
<HeaderMobile setMobileShow={setMobileShow} mobileShow={mobileShow} />
<div className="d-flex flex-column flex-root">
<div className="d-flex flex-row flex-column-fluid page">
@@ -19,7 +21,7 @@ export function Layout({ children }: JustChildren) {
id="kt_wrapper"
style={{ overflowX: "hidden" }}
>
<Header />
<Header mobileShow={mobileShow} setMobileShow={setMobileShow} />
<BackgroundContextProvider>
<BackgroundImage />
client/src/components/layout/header/Header.tsx
+9 -2
View File
@@ -1,10 +1,17 @@
import { ToCDNURL } from "util/api";
import React from "react";
import { Link } from "react-router-dom";
import { SetState } from "types/react";
import { HeaderMenu } from "./HeaderMenu";
import { Topbar } from "./Topbar";
export function Header() {
export function Header({
mobileShow,
setMobileShow,
}: {
mobileShow: boolean;
setMobileShow: SetState<boolean>;
}) {
return (
<div className="header header-fixed" id="kt_header">
<div className="container d-flex align-items-stretch justify-content-between">
@@ -19,7 +26,7 @@ export function Header() {
</Link>
</div>
<HeaderMenu />
<HeaderMenu mobileShow={mobileShow} setMobileShow={setMobileShow} />
</div>
<Topbar />
client/src/components/layout/header/HeaderMenu.tsx
+27 -11
View File
@@ -1,22 +1,28 @@
import { APIFetchV1, ToCDNURL } from "util/api";
import Divider from "components/util/Divider";
import Loading from "components/util/Loading";
import useComponentVisible from "components/util/useComponentVisible";
import { UserContext } from "context/UserContext";
import { UserGameStatsContext } from "context/UserGameStatsContext";
import { TachiConfig } from "lib/config";
import React, { useContext, useLayoutEffect } from "react";
import React, { useContext, useEffect } from "react";
import { useQuery } from "react-query";
import { Link } from "react-router-dom";
import { FormatGame, GetGameConfig, UserGameStats } from "tachi-common";
import KTLayoutHeader from "_metronic/_assets/js/layout/base/header";
import KTLayoutHeaderMenu from "_metronic/_assets/js/layout/base/header-menu";
import { SetState } from "types/react";
import AllGames from "./AllGames";
import ImportScoresLink from "./ImportScoresLink";
import MenuDropdown from "./MenuDropdown";
import MenuLink from "./MenuLink";
import SearchBar from "./SearchBar";
export function HeaderMenu() {
export function HeaderMenu({
mobileShow,
setMobileShow,
}: {
mobileShow: boolean;
setMobileShow: SetState<boolean>;
}) {
const { user } = useContext(UserContext);
const { ugs, setUGS } = useContext(UserGameStatsContext);
@@ -38,12 +44,16 @@ export function HeaderMenu() {
console.error(error);
}
useLayoutEffect(() => {
if (!isLoading) {
KTLayoutHeader.init("kt_header", "kt_header_mobile");
KTLayoutHeaderMenu.init("kt_header_menu", "kt_header_menu_wrapper");
}
}, [isLoading]);
const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(mobileShow);
// how does this not cause a problem. What?
useEffect(() => {
setIsComponentVisible(mobileShow);
}, [mobileShow]);
useEffect(() => {
setMobileShow(isComponentVisible);
}, [isComponentVisible]);
if (isLoading) {
return <Loading />;
@@ -77,7 +87,13 @@ export function HeaderMenu() {
}
return (
<div className="header-menu-wrapper header-menu-wrapper-left" id="kt_header_menu_wrapper">
<div
className={`header-menu-wrapper header-menu-wrapper-left ${
isComponentVisible ? "header-menu-wrapper-on" : ""
}`}
ref={ref}
id="kt_header_menu_wrapper"
>
<div
id="kt_header_menu"
className="header-menu header-menu-left header-menu-mobile header-menu-layout-default header-menu-root-arrow"
client/src/components/layout/header/HeaderMobile.tsx
+9 -1
View File
@@ -2,8 +2,15 @@ import { ToAPIURL } from "util/api";
import { UserContext } from "context/UserContext";
import React, { useContext } from "react";
import { Link } from "react-router-dom";
import { SetState } from "types/react";
export function HeaderMobile() {
export function HeaderMobile({
mobileShow,
setMobileShow,
}: {
mobileShow: boolean;
setMobileShow: SetState<boolean>;
}) {
const { user } = useContext(UserContext);
return (
@@ -13,6 +20,7 @@ export function HeaderMobile() {
<button
className="btn p-0 burger-icon burger-icon-right ml-2 mr-auto"
id="kt_header_mobile_toggle"
onClick={() => setMobileShow(!mobileShow)}
>
<span />
</button>
client/src/components/layout/header/MenuDropdown.tsx
+16 -2
View File
@@ -1,20 +1,34 @@
import useComponentVisible from "components/util/useComponentVisible";
import React from "react";
import { JustChildren } from "types/react";
export default function MenuDropdown({ name, children }: { name: string } & JustChildren) {
const { ref, isComponentVisible, setIsComponentVisible } = useComponentVisible(false);
return (
<li
ref={ref}
data-menu-toggle="click"
aria-haspopup="true"
className="menu-item menu-item-submenu menu-item-rel menu-item-open-dropdown"
className={`menu-item menu-item-submenu menu-item-rel menu-item-open-dropdown ${
isComponentVisible ? "menu-item-active-tab" : ""
}`}
onClick={() => setIsComponentVisible(!isComponentVisible)}
>
<div className="menu-link menu-toggle">
<span className="menu-text">{name}</span>
<i className="menu-arrow" />
</div>
<div className="menu-submenu menu-submenu-classic menu-submenu-left">
<div
style={{
display: isComponentVisible ? "block" : "none",
}}
className="menu-submenu menu-submenu-classic menu-submenu-left"
>
<ul className="menu-subnav">{children}</ul>
</div>
</li>
);
}
// .header-menu .menu-nav .menu-item.menu-item-active-tab .menu-submenu, .header-menu .menu-nav .menu-item.menu-item-hover .menu-submenu
client/src/components/layout/misc/MaterialThemeProvider.tsx
+13
View File
@@ -0,0 +1,13 @@
import { createMuiTheme, ThemeProvider } from "@material-ui/core";
import React from "react";
import { JustChildren } from "types/react";
const theme = createMuiTheme({
typography: {
fontFamily: "Poppins",
},
});
export function MaterialThemeProvider({ children }: JustChildren) {
return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}
client/src/components/util/useComponentVisible.tsx
+21
View File
@@ -0,0 +1,21 @@
import { useState, useEffect, useRef } from "react";
export default function useComponentVisible(initialIsVisible: boolean) {
const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
const ref = useRef<any>(null);
const handleClickOutside = (event: MouseEvent) => {
if (ref.current && !ref.current.contains(event.target)) {
setIsComponentVisible(false);
}
};
useEffect(() => {
document.addEventListener("click", handleClickOutside, true);
return () => {
document.removeEventListener("click", handleClickOutside, true);
};
}, []);
return { ref, isComponentVisible, setIsComponentVisible };
}