fix tab active & local video

ryosukeeeeee · ryosukeeeeee · commit 077f7d15ec61 · 2022-03-11T12:18:58.000+08:00
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,24 +1,13 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import ResponsiveContainer from '#/ResponsiveContainer';
-import {
-  Button,
-  Container,
-  Divider,
-  Grid,
-  Header,
-  Icon,
-  Image,
-  List,
-  Menu,
-  Segment,
-  Sidebar,
-} from 'semantic-ui-react';
+
 import Footer from '#/Footer';
 import Homepage from './Homepage';
 import { Route } from 'react-router';
-import { Router, Routes } from 'react-router-dom';
+import { Routes } from 'react-router-dom';
 import Blog from './Blog';
 import Foundation from './Foundation';
+import { foundationPathName, blogListPathName } from './const';
 interface IProps {}
 
 interface IState {}
@@ -33,8 +22,8 @@ class App extends Component<IProps, IState> {
       <>
         <ResponsiveContainer>
           <Routes>
-            <Route path="/foundation" element={<Foundation />}></Route>
-            <Route path="/blog_list" element={<Blog />}></Route>
+            <Route path={foundationPathName} element={<Foundation />}></Route>
+            <Route path={blogListPathName} element={<Blog />}></Route>
             <Route path="/" element={<Homepage />}></Route>
           </Routes>
         </ResponsiveContainer>
diff --git a/src/DesktopContainer.tsx b/src/DesktopContainer.tsx
@@ -1,32 +1,27 @@
 import React, { Component } from 'react';
-import HomepageHeading from '#/HomepageHeading';
-import { Media } from '#/const';
+import {
+  blogListPathName,
+  foundationPathName,
+  homePathName,
+  Media,
+} from '#/const';
 import {
   Button,
   Container,
-  Divider,
-  Grid,
-  Header,
-  Icon,
-  Image,
-  List,
   Menu,
   Segment,
-  Sidebar,
   Popup,
   Visibility,
+  MenuItemProps,
 } from 'semantic-ui-react';
-import { Route } from 'react-router';
-import { Router, Routes } from 'react-router-dom';
 import CustomRouter from '#/CustomRouter';
 import { history } from '#/const';
 import { scrollToTopAndRoute } from '#/utils';
-import Homepage from '#/Homepage';
-import Blog from '#/Blog';
 
 interface IProps {}
 
 interface IState {
+  activeItem: string;
   fixed: boolean;
   muteVideo: boolean;
 }
@@ -39,18 +34,30 @@ class DesktopContainer extends Component<IProps, IState> {
   static defaultProps = {};
 
   state = {
+    activeItem: homePathName,
     fixed: false,
     muteVideo: true,
   };
 
   hideFixedMenu = () => this.setState({ fixed: false });
   showFixedMenu = () => this.setState({ fixed: true });
 
-  handleMuteVideoClicked = () => {
-    this.setState({ muteVideo: !this.state.muteVideo });
+  componentDidMount = async () => {
+    let pathname = window.location.pathname;
+    if (pathname.length > 1) {
+      this.setState({
+        activeItem: pathname,
+      });
+    }
   };
 
-  componentDidMount = async () => {};
+  handleMenuItemClick = (
+    event: React.MouseEvent<HTMLElement>,
+    menuItemProps: MenuItemProps
+  ) => {
+    this.setState({ activeItem: menuItemProps.name! });
+    scrollToTopAndRoute(menuItemProps.name!);
+  };
 
   render() {
     const { children } = this.props;
@@ -83,7 +90,11 @@ class DesktopContainer extends Component<IProps, IState> {
                 size="large"
               >
                 <Container>
-                  <Menu.Item as="a" href="/" active>
+                  <Menu.Item
+                    as="a"
+                    href="/"
+                    active={this.state.activeItem === homePathName}
+                  >
                     Home
                   </Menu.Item>
                   <Popup
@@ -129,15 +140,21 @@ class DesktopContainer extends Component<IProps, IState> {
                     inverted
                     on="hover"
                   />
-                  <Menu.Item onClick={() => scrollToTopAndRoute('/blog_list')}>
+                  <Menu.Item
+                    name={blogListPathName}
+                    onClick={this.handleMenuItemClick}
+                    active={this.state.activeItem === blogListPathName}
+                  >
                     BLOG
                   </Menu.Item>
 
-                  <Menu.Item position="right">
-                    <Button
-                      onClick={() => scrollToTopAndRoute('/foundation')}
-                      inverted={!fixed}
-                    >
+                  <Menu.Item
+                    position="right"
+                    name={foundationPathName}
+                    active={this.state.activeItem === foundationPathName}
+                    onClick={this.handleMenuItemClick}
+                  >
+                    <Button inverted={!fixed}>
                       ArchLinuxStudio Foundation
                     </Button>
                   </Menu.Item>
diff --git a/src/Foundation.tsx b/src/Foundation.tsx
@@ -1,16 +1,12 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import {
   Button,
   Container,
   Divider,
   Grid,
   Header,
   Icon,
-  Image,
-  List,
-  Menu,
   Segment,
-  Sidebar,
 } from 'semantic-ui-react';
 
 interface IProps {}
diff --git a/src/Homepage.tsx b/src/Homepage.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import {
   Button,
   Container,
@@ -7,10 +7,7 @@ import {
   Header,
   Icon,
   Image,
-  List,
-  Menu,
   Segment,
-  Sidebar,
 } from 'semantic-ui-react';
 
 import ES from '#/images/ES.webp';
@@ -19,6 +16,7 @@ import RS_GTA from '#/images/RS_GTA1.jpg';
 import HomepageHeading from '#/HomepageHeading';
 import './homepage_video.css';
 import Loading from '#/images/loading.gif';
+import FSF30 from '#/videos/FSF_30_720p.webm';
 
 interface IProps {}
 
@@ -85,7 +83,7 @@ class Homepage extends Component<IProps, IState> {
             autoPlay={true}
             loop={true}
             playsInline={true}
-            src="https://static.fsf.org/nosvn/FSF30-video/FSF_30_720p.webm"
+            src={FSF30}
             poster={Loading}
           ></video>
 
@@ -224,6 +222,7 @@ class Homepage extends Component<IProps, IState> {
               href="https://en.wikipedia.org/wiki/Blockchain"
               target="_blank"
               size="large"
+              rel="noreferrer"
             >
               Read More
             </Button>
@@ -237,6 +236,7 @@ class Homepage extends Component<IProps, IState> {
               <a
                 href="https://github.com/ArchLinuxStudio?q=blockchain&type=all&language=&sort="
                 target="_blank"
+                rel="noreferrer"
               >
                 Case Studies
               </a>
diff --git a/src/MobileContainer.tsx b/src/MobileContainer.tsx
@@ -1,47 +1,53 @@
-import React, { Component } from 'react';
-import HomepageHeading from '#/HomepageHeading';
-import { Media } from '#/const';
+import { Component } from 'react';
+
+import {
+  blogListPathName,
+  foundationPathName,
+  homePathName,
+  Media,
+} from '#/const';
 import CustomRouter from '#/CustomRouter';
 import { SemanticToastContainer, toast } from 'react-semantic-toasts';
 
 import {
   Button,
   Container,
-  Divider,
-  Grid,
-  Header,
   Icon,
-  Image,
-  List,
   Menu,
   Segment,
   Popup,
   Sidebar,
+  MenuItemProps,
 } from 'semantic-ui-react';
 import { history } from '#/const';
 import { scrollToTopAndRoute } from '#/utils';
-import Homepage from '#/Homepage';
-import Blog from '#/Blog';
-import { Route } from 'react-router';
-import { Router, Routes } from 'react-router-dom';
 
 interface IProps {}
 
 interface IState {
+  activeItem: string;
   sidebarOpened: boolean;
 }
 
 class MobileContainer extends Component<IProps, IState> {
   static defaultProps = {};
 
   state = {
+    activeItem: homePathName,
     sidebarOpened: false,
   };
   handleSidebarHide = () => this.setState({ sidebarOpened: false });
 
   handleToggle = () => this.setState({ sidebarOpened: true });
 
   componentDidMount = async () => {
+    let pathname = window.location.pathname;
+    if (pathname.length > 1) {
+      this.setState({
+        activeItem: pathname,
+      });
+    }
+
     setTimeout(() => {
       toast(
         {
@@ -57,6 +63,14 @@ class MobileContainer extends Component<IProps, IState> {
     }, 500);
   };
 
+  handleMenuItemClick = (
+    event: React.MouseEvent<HTMLElement>,
+    menuItemProps: MenuItemProps
+  ) => {
+    this.setState({ activeItem: menuItemProps.name!, sidebarOpened: false });
+    scrollToTopAndRoute(menuItemProps.name!);
+  };
+
   render() {
     const { children } = this.props;
     const { sidebarOpened } = this.state;
@@ -72,7 +86,11 @@ class MobileContainer extends Component<IProps, IState> {
               vertical
               visible={sidebarOpened}
             >
-              <Menu.Item as="a" href="/" active>
+              <Menu.Item
+                as="a"
+                href="/"
+                active={this.state.activeItem === homePathName}
+              >
                 Home
               </Menu.Item>
               <Popup
@@ -81,6 +99,7 @@ class MobileContainer extends Component<IProps, IState> {
                     as="a"
                     href="https://archlinuxstudio.github.io/ArchLinuxTutorial/#/"
                     target="_blank"
+                    active={this.state.activeItem === homePathName}
                   >
                     ALT
                   </Menu.Item>
@@ -118,7 +137,11 @@ class MobileContainer extends Component<IProps, IState> {
                 inverted
                 on="hover"
               />
-              <Menu.Item onClick={() => scrollToTopAndRoute('/blog_list')}>
+              <Menu.Item
+                name={blogListPathName}
+                onClick={this.handleMenuItemClick}
+                active={this.state.activeItem === blogListPathName}
+              >
                 BLOG
               </Menu.Item>
               <Menu.Item as="a">Placeholder_hidden</Menu.Item>
@@ -136,24 +159,13 @@ class MobileContainer extends Component<IProps, IState> {
                     <Menu.Item onClick={this.handleToggle}>
                       <Icon name="sidebar" />
                     </Menu.Item>
-                    <Menu.Item position="right">
-                      <Button
-                        as="a"
-                        href="https://en.cryptobadges.io/donate/1Lth3oca4WnMnTnwHBcDLkEqniA2pBxkeC"
-                        target="_blank"
-                        inverted
-                      >
-                        Donate BTC
-                      </Button>
-                      <Button
-                        as="a"
-                        href="https://en.cryptobadges.io/donate/0x5A218a8d570d9947f42e0a4916ece7a60A181c2d"
-                        target="_blank"
-                        inverted
-                        style={{ marginLeft: '0.5em' }}
-                      >
-                        Donate ETH
-                      </Button>
+                    <Menu.Item
+                      position="right"
+                      name={foundationPathName}
+                      onClick={this.handleMenuItemClick}
+                      active={this.state.activeItem === foundationPathName}
+                    >
+                      <Button inverted>ArchLinuxStudio Foundation</Button>
                     </Menu.Item>
                   </Menu>
                 </Container>
diff --git a/src/const.tsx b/src/const.tsx
@@ -10,3 +10,7 @@ export const { MediaContextProvider, Media } = createMedia({
 });
 
 export const history = createBrowserHistory();
+
+export const homePathName = '/home';
+export const blogListPathName = '/blog_list';
+export const foundationPathName = '/foundation';
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
@@ -1 +1,6 @@
 /// <reference types="react-scripts" />
+
+declare module '*.webm' {
+  const src: string;
+  export default src;
+}
diff --git a/src/videos/FSF_30_720p.webm b/src/videos/FSF_30_720p.webm
