add header modal

package.json

@@ -1,20 +1,28 @@
 {
-  "name": "travel-ta-app",
+  "name": "react-travel",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.11.43",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.7.4",
-    "web-vitals": "^2.1.4"
+    "@ant-design/icons": "^4.5.0",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "antd": "^4.13.1",
+    "axios": "^0.21.1",
+    "i18next": "^20.1.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-i18next": "^11.8.11",
+    "react-redux": "^7.2.3",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "4.0.3",
+    "redux": "^4.0.5",
+    "typescript": "^4.1.2",
+    "web-vitals": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -39,5 +47,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-redux": "^7.1.16",
+    "@types/react-router-dom": "^5.1.7",
+    "typescript-plugin-css-modules": "^3.2.0"
   }
 }

src/App.tsx

@@ -1,26 +1,42 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
+import { HomePage } from './pages';
+// import { BrowserRouter, Route, Routes } from "react-router-dom"
 
+// function App() {
+//   return (
+//     <div className="App">
+//       <BrowserRouter>
+//         <Routes>
+//           <Route path="/" element={<HomePage/>} />
+//           {/* <Route path="/signIn" component={SignInPage} />
+//           <Route path="/register" component={RegisterPage} />
+//           <Route path="/detail/:touristRouteId" component={DetailPage} /> */}
+//           {/* <Route render={()=>(<h1>404 not found 页面去火星了 ! </h1>)} /> */}
+//         </Routes>
+//       </BrowserRouter>
+//     </div>
+//   );
+// }
+
+
+import { BrowserRouter, Route, Switch } from "react-router-dom"
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div >
+      <BrowserRouter>
+        <Switch>
+          <Route exact path="/" component={HomePage} />
+          {/* <Route path="/signIn" component={SignInPage} />
+          <Route path="/register" component={RegisterPage} />
+          <Route path="/detail/:touristRouteId" component={DetailPage} /> */}
+          <Route render={()=>(<h1>404 not found 页面去火星了 ! </h1>)} />
+        </Switch>
+      </BrowserRouter>
     </div>
   );
 }
 
+
+
 export default App;

src/components/Header/Header.module.css

@@ -0,0 +1,74 @@
+.App-header {
+    background-color: white !important;
+}
+
+.top-header {
+    height: 40px;
+    padding-left: 4%;
+    padding-right: 4%;
+    display: block;
+    background-color: #f5f5f5;
+    line-height: 40px;
+}
+
+.top-header .inner {
+    width: 88%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.button-group {
+    float: right;
+    margin-top: 5px;
+}
+
+.main-header {
+    width: 88%;
+    height: 60px;
+    background-color: white !important;
+    line-height: 60px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.main-menu {
+    padding-left: 6% !important;
+    padding-right: 6% !important;
+    background-color: #1976d2 !important;
+    color: #f5f5f5 !important;
+}
+
+.App-logo {
+    width: 60px;
+    height: 60px;
+    float: left;
+}
+
+.title {
+    line-height: 64px !important;
+    display: inline;
+    color: #03a9f4 !important;
+}
+
+.search-input {
+    width: 400px !important;
+    line-height: 64px;
+    margin-top: 17px;
+    margin-left: 37px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .App-logo {
+        animation: App-logo-spin infinite 20s linear;
+    }
+}
+
+@keyframes App-logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}

src/components/Header/HeaderClass.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import logo from '../../assets/logo.svg';
+import styles from './Header.module.css';
+import { GlobalOutlined } from '@ant-design/icons';
+import {
+  Layout,
+  Typography,
+  Input,
+  Menu,
+  Button,
+  Dropdown
+} from 'antd';
+import { withRouter, RouteComponentProps } from "react-router-dom";
+import { RootState } from "../../redux/store";
+import { withTranslation,WithTranslation } from "react-i18next";
+import { changeLanguageActionCreator,addLanguageActionCreator } from "../../redux/language/languageActions"
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+
+const mapStateToProps = (state: RootState)=>{
+  return {
+    language: state.language,
+    languageList: state.languageList
+  }
+}
+
+const mapDispatchToProps = (dispatch: Dispatch)=>{
+  return {
+    changeLanguage:( code:"zh"|"en" )=>{
+      const action = changeLanguageActionCreator(code);
+      dispatch(action);
+    },
+    addLanguage:(name: string, code: string)=>{
+      const action = addLanguageActionCreator(name,code);
+      dispatch(action);
+    }
+  }
+}
+
+type PropsType = RouteComponentProps & // react-router 路由props类型
+  WithTranslation & // i18n props类型
+  ReturnType<typeof mapStateToProps> & // redux store 映射类型 
+  ReturnType<typeof mapDispatchToProps>;// redux dispatch 映射类型
+class HeaderComponent extends React.Component<PropsType> {
+
+  menuClickHandler = (e:any)=>{
+    console.log(e);
+    if(e.key === "new"){
+      this.props.addLanguage("新语言","new_lang");
+    }else{
+      this.props.changeLanguage(e.key);
+    }
+  }
+
+  render() {
+    const { history, t } = this.props;
+
+    return (
+
+      <div className={styles['app-header']}>
+        <div className={styles['top-header']}>
+          <div className={styles.inner}>
+            <Typography.Text>
+              {t("header.slogan")}
+            </Typography.Text>
+            <Dropdown.Button
+              style={{ marginLeft: 15 }}
+              overlay={
+                <Menu onClick={this.menuClickHandler}>
+                  {
+                    this.props.languageList.map((l)=>{
+                      return (<Menu.Item key={l.code}>{l.name}</Menu.Item>)
+                    })
+                  }
+                  <Menu.Item key={"new"}>{t("header.add_new_language")}</Menu.Item>
+                </Menu>
+              }
+              icon={<GlobalOutlined />}
+            >
+              { this.props.language === "zh" ? "中文":"English" }
+            </Dropdown.Button>
+            <Button.Group className={styles['button-group']}>
+              <Button onClick={() => history.push("register")}>{t("header.register")}</Button>
+              <Button onClick={() => history.push("signIn")}>{t("header.signin")}</Button>
+            </Button.Group>
+          </div>
+        </div>
+        <Layout.Header className={styles['main-header']}>
+          <span onClick={() => history.push("/")}>
+            <img src={logo} className={styles['App-logo']} alt="" />
+            <Typography.Title
+              level={3}
+              className={styles.title}
+            >
+              {t("header.title")}
+            </Typography.Title>
+          </span>
+          <Input.Search
+            placeholder="请输入旅游目的地、主题、或关键字"
+            className={styles['search-input']}
+          >
+          </Input.Search>
+        </Layout.Header>
+        <Menu className={styles['main-menu']} mode={"horizontal"}>
+          <Menu.Item key="1">{t("header.home_page")}</Menu.Item>
+          <Menu.Item key="2">{t("header.weekend")}</Menu.Item>
+          <Menu.Item key="3">{t("header.group")}</Menu.Item>
+          <Menu.Item key="4">{t("header.backpack")}</Menu.Item>
+          <Menu.Item key="5">{t("header.private")}</Menu.Item>
+          <Menu.Item key="6">{t("header.cruise")}</Menu.Item>
+          <Menu.Item key="7">{t("header.hotel")}</Menu.Item>
+          <Menu.Item key="8">{t("header.local")}</Menu.Item>
+          <Menu.Item key="9">{t("header.theme")}</Menu.Item>
+          <Menu.Item key="10">{t("header.custom")}</Menu.Item>
+          <Menu.Item key="11">{t("header.study")}</Menu.Item>
+          <Menu.Item key="12">{t("header.visa")}</Menu.Item>
+          <Menu.Item key="13">{t("header.enterprise")}</Menu.Item>
+          <Menu.Item key="14">{t("header.high_end")}</Menu.Item>
+          <Menu.Item key="15">{t("header.outdoor")}</Menu.Item>
+          <Menu.Item key="16">{t("header.insurance")}</Menu.Item>
+        </Menu>
+      </div>
+    )
+
+  }
+}
+
+export const Header = connect(mapStateToProps,mapDispatchToProps)(
+  withTranslation()(withRouter(HeaderComponent))
+);

src/components/Header/index.ts

@@ -0,0 +1 @@
+export * from './HeaderClass';

src/components/index.ts

@@ -0,0 +1 @@
+export * from './Header';

src/i18n/config.ts

@@ -0,0 +1,25 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import translation_en from './en.json';
+import translation_zh from './zh.json';
+
+const resources = {
+    en: {
+        translation:translation_en
+    },
+    zh:{
+        translation:translation_zh
+    }
+};
+
+i18n
+    .use(initReactI18next)
+    .init({
+        resources,
+        lng:"en",
+        interpolation:{
+            escapeValue:false
+        }
+    });
+
+export default i18n;

src/i18n/en.json

@@ -0,0 +1,35 @@
+{
+    "header": {
+        "slogan": "Make travel happier",
+        "add_new_language": "add new language",
+        "title": "React Travel",
+        "register":"Register",
+        "signin":"Sign In",
+        "home_page": "Home",
+        "weekend": "Weekend",
+        "group": "Group",
+        "backpack": "Backpack",
+        "private": "Private",
+        "cruise": "Cruise",
+        "hotel": "Hotel & Attractions",
+        "local": "Local",
+        "theme": "Theme",
+        "custom": "Custom",
+        "study": "Study",
+        "visa":"Visa",
+        "enterprise":"Enterprise",
+        "high_end":"High-end",
+        "outdoor":"Outdoor",
+        "insurance":"Insurance"
+    },
+    "footer": {
+        "detail" : "All rights reserved @ ReactTravel.com"
+    },
+    "home_page": {
+        "hot_recommended": "Hot Recommended",
+        "new_arrival": "New arrival",
+        "domestic_travel": "Domestic travel",
+        "joint_venture": "Joint Venture",
+        "start_from": "(start from)"
+    }
+}