matrix-moderation-widget

A widget for moderating with mjolnir. Highly WIP. Use at your own risk!
git clone git://archive.git.mtrnord.blog/MTRNord/matrix-moderation-widget.git
Log | Files | Refs | README | LICENSE

App.tsx (2888B)

      1 import React, { PureComponent, Suspense } from 'react';
      2 const BanList = React.lazy(() => import('./Banlist'));
      3 const Home = React.lazy(() => import('./Home'));
      4 const NewRoom = React.lazy(() => import('./NewRoom'));
      5 
      6 type Pages = "banlist" | "home" | "new_room";
      7 
      8 type Props = Record<string, unknown>;
      9 type State = {
     10   current_page: Pages;
     11 };
     12 
     13 class App extends PureComponent<Props, State> {
     14   constructor(props: Props) {
     15     super(props);
     16     this.state = {
     17       current_page: "home"
     18     };
     19   }
     20 
     21   onBanListClick() {
     22     this.setState({
     23       current_page: "banlist"
     24     });
     25   }
     26 
     27   onHomeClick() {
     28     this.setState({
     29       current_page: "home"
     30     });
     31   }
     32 
     33   onNewRoomClick() {
     34     this.setState({
     35       current_page: "new_room"
     36     });
     37   }
     38 
     39   getPage(page: Pages) {
     40     switch (page) {
     41       case "home": {
     42         return (
     43           <Suspense fallback={<div>Loading...</div>}>
     44             <Home />
     45           </Suspense>
     46         );
     47       }
     48       case "banlist": {
     49         return (
     50           <Suspense fallback={<div>Loading...</div>}>
     51             <BanList />
     52           </Suspense>
     53         );
     54       }
     55       case "new_room": {
     56         return (
     57           <Suspense fallback={<div>Loading...</div>}>
     58             <NewRoom />
     59           </Suspense>
     60         );
     61       }
     62     }
     63   }
     64 
     65   render() {
     66     const current_page = this.state.current_page;
     67     return (
     68       <div className="min-h-full flex flex-col justify-between bg-[#f8f8f8] dark:bg-[#06070D]">
     69         <header className='bg-[#f8f8f8] dark:bg-[#06070D] flex fixed top-0 left-0 right-0 lg:h-20 h-auto z-[100] items-center lg:flex-row flex-col shadow-black drop-shadow-xl'>
     70           <div className='flex lg:flex-1 items-center justify-between lg:flex-row flex-col'>
     71             <nav className='flex lg:flex-shrink-0 my-4'>
     72               <button className='px-4 h-auto min-w-[1.5rem] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all' onClick={this.onHomeClick.bind(this)}>Home</button>
     73               {/*<button className='px-4 h-auto min-w-[1.5rem] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all' onClick={this.onNewRoomClick.bind(this)}>Add to new Room</button> */}
     74               <button className='px-4 h-auto min-w-[1.5rem] flex items-center whitespace-nowrap cursor-pointer text-gray-900 dark:text-gray-200 font-medium brightness-100 hover:brightness-75 duration-200 ease-in-out transition-all' onClick={this.onBanListClick.bind(this)}>BanList</button>
     75             </nav>
     76           </div>
     77         </header>
     78         <div className='lg:pt-20 pt-52 z-0 max-h-full'>
     79           {
     80             this.getPage(current_page)
     81           }
     82         </div>
     83       </div>
     84     );
     85   }
     86 }
     87 
     88 export default App;