From 098e30ceda1be365c7993e4086b41841d37512ae Mon Sep 17 00:00:00 2001
From: ZixinShen <zis053@ucsd.edu>
Date: Mon, 5 Nov 2018 14:28:03 -0800
Subject: [PATCH 1/3] fix linter error

---
 src/components/ChangePassword.jsx |  8 +--
 src/components/Header.jsx         | 84 ++++++++++++++++++++-----------
 2 files changed, 60 insertions(+), 32 deletions(-)

diff --git a/src/components/ChangePassword.jsx b/src/components/ChangePassword.jsx
index 22abe8e..a91fdba 100644
--- a/src/components/ChangePassword.jsx
+++ b/src/components/ChangePassword.jsx
@@ -12,10 +12,10 @@ import React from 'react';
 import {
   Input, Button, Card, Row, Col,
 } from 'react-materialize';
-import Header from './Header';
-import LeasingCard from './LeasingCard';
+import Header from './Header.jsx';
 
-export default class ChangePassword extends React.Component<{}> {
+// eslint-disable-next-line react/prefer-stateless-function
+class ChangePassword extends React.Component {
   render() {
     return (
       <div>
@@ -40,3 +40,5 @@ export default class ChangePassword extends React.Component<{}> {
     );
   }
 }
+
+export default ChangePassword;
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 9b9440c..e936dcf 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,8 +1,9 @@
+// @flow
+
 import React from 'react';
 
-import { Link } from 'react-router-dom';
 import {
-  Navbar, NavItem, Card, Row, Col, Input, Button,
+  Card, Row, Col, Input, Button,
 } from 'react-materialize';
 // import Login from './Login';
 
@@ -16,7 +17,8 @@ class Header extends React.Component {
   }
 
   toggle() {
-    if (this.state.opened) {
+    const { opened } = this.state;
+    if (opened) {
       console.log('close');
       this.setState({ opened: false });
     } else {
@@ -25,32 +27,33 @@ class Header extends React.Component {
     }
   }
 
-  render() {
-    function loginDisplay(login) {
-      if (!login) {
-        return (
-          <div>
-            <Input s={12} label="用户名" />
-            <Input s={12} type="email" label="邮箱" />
-            <Input s={12} type="password" label="密码" />
-            <Input s={12} type="password" label="确认密码" />
-            <center>
-              <Button waves="light" s={12}>注册账号</Button>
-            </center>
-          </div>
-        );
-      }
+  loginDisplay() {
+    const { login } = this.state;
+    if (login) {
       return (
         <div>
-          <Input s={12} label="用户名/邮箱" />
+          <Input s={12} label="用户名" />
+          <Input s={12} type="email" label="邮箱" />
           <Input s={12} type="password" label="密码" />
+          <Input s={12} type="password" label="确认密码" />
           <center>
-            <Button waves="light" s={12}>登录</Button>
+            <Button waves="light" s={12}>注册账号</Button>
           </center>
         </div>
       );
     }
+    return (
+      <div>
+        <Input s={12} label="用户名/邮箱" />
+        <Input s={12} type="password" label="密码" />
+        <center>
+          <Button waves="light" s={12}>登录</Button>
+        </center>
+      </div>
+    );
+  }
 
+  render() {
     const navStyle = {
       width: '100%',
       height: '60px',
@@ -86,6 +89,8 @@ class Header extends React.Component {
       backgroundColor: 'white',
     };
 
+    const { opened } = this.state;
+
     const maskStyle = {
       position: 'fixed',
       width: '100%',
@@ -95,7 +100,7 @@ class Header extends React.Component {
       backgroundColor: 'rgba(0,0,0,0.5)',
       alignItems: 'center',
       justifyContent: 'center',
-      display: this.state.opened ? 'flex' : 'none',
+      display: opened ? 'flex' : 'none',
       zIndex: '1',
     };
 
@@ -106,34 +111,55 @@ class Header extends React.Component {
             <a style={navRightItemStyle} href="/">UCSD CSSA 短租平台</a>
           </div>
           <div style={navRightStyle}>
-            <a style={navRightItemStyle} onClick={() => this.toggle()}>登陆</a>
+            <Button
+              style={navRightItemStyle}
+              onClick={() => this.toggle()}
+              onKeyDown={() => this.toggle()}
+            >
+登陆
+            </Button>
             <a style={navRightItemStyle} href="/searchpage">搜索房源</a>
             <a style={navRightItemStyle} href="/publish">发布房源</a>
           </div>
         </nav>
-        <div style={maskStyle} onClick={() => this.toggle()}>
-          <div style={loginStyle} onClick={e => e.stopPropagation()}>
+        <div
+          style={maskStyle}
+          onClick={() => this.toggle()}
+          onKeyDown={() => this.toggle()}
+          role="presentation"
+        >
+          <div
+            style={loginStyle}
+            onClick={e => e.stopPropagation()}
+            onKeyDown={e => e.stopPropagation()}
+            role="presentation"
+          >
             <center>
               <Card>
                 <Row>
                   <Col style={{ width: '50%' }}>
                     <center>
-                      <a
+                      <Button
                         style={buttonStyle}
                         onClick={() => {
                           this.setState({
                             login: true,
                           });
                         }}
+                        onKeyDown={() => {
+                          this.setState({
+                            login: true,
+                          });
+                        }}
                       >
                         <h5>登录</h5>
-                      </a>
+                      </Button>
                     </center>
                   </Col>
 
                   <Col style={{ width: '50%' }}>
                     <center>
-                      <a
+                      <Button
                         style={buttonStyle}
                         onClick={() => {
                           this.setState({
@@ -142,12 +168,12 @@ class Header extends React.Component {
                         }}
                       >
                         <h5>注册</h5>
-                      </a>
+                      </Button>
                     </center>
                   </Col>
                 </Row>
                 <Row>
-                  { loginDisplay(this.state.login) }
+                  { this.loginDisplay() }
                 </Row>
               </Card>
             </center>

From 1a90febfd54d536c4af0e6d6c518da71db446dcf Mon Sep 17 00:00:00 2001
From: ZixinShen <zis053@ucsd.edu>
Date: Wed, 7 Nov 2018 17:49:41 -0800
Subject: [PATCH 2/3] update on css style

---
 src/components/Header.jsx         | 101 +++++++++++-------------------
 src/components/styles/header.scss |  34 ++++++++++
 2 files changed, 71 insertions(+), 64 deletions(-)
 create mode 100644 src/components/styles/header.scss

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index e936dcf..97ec097 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,11 +1,11 @@
 // @flow
 
 import React from 'react';
+import './styles/header.scss';
 
 import {
   Card, Row, Col, Input, Button,
 } from 'react-materialize';
-// import Login from './Login';
 
 class Header extends React.Component {
   constructor(props) {
@@ -16,6 +16,22 @@ class Header extends React.Component {
     };
   }
 
+  getStyle() {
+    const { opened } = this.state;
+    return {
+      position: 'fixed',
+      width: '100%',
+      height: '100%',
+      left: '0',
+      top: '0',
+      backgroundColor: 'rgba(0,0,0,0.5)',
+      alignItems: 'center',
+      justifyContent: 'center',
+      display: opened ? 'flex' : 'none',
+      zIndex: '1',
+    };
+  }
+
   toggle() {
     const { opened } = this.state;
     if (opened) {
@@ -53,83 +69,40 @@ class Header extends React.Component {
     );
   }
 
-  render() {
-    const navStyle = {
-      width: '100%',
-      height: '60px',
-      backgroundColor: 'rgba(186, 0, 0, 1)',
-      display: 'flex',
-      zIndex: '1000000',
-      boxShadow: '0 0 5px rgba(0, 0, 0, 0.3)',
-    };
-
-    const navLeftStyle = {
-      display: 'flex',
-    };
-
-    const navRightStyle = {
-      flexGrow: '1000000',
-      flexFlow: 'row-reverse',
-      display: 'flex',
-    };
-
-    const navRightItemStyle = {
-      lineHeight: '60px',
-      padding: '0 15px',
-    };
-
-    const buttonStyle = {
-      color: 'black',
-      cursor: 'pointer',
-    };
-
-    const loginStyle = {
-      width: '50%',
-      height: '60%',
-      backgroundColor: 'white',
-    };
-
-    const { opened } = this.state;
-
-    const maskStyle = {
-      position: 'fixed',
-      width: '100%',
-      height: '100%',
-      left: '0',
-      top: '0',
-      backgroundColor: 'rgba(0,0,0,0.5)',
-      alignItems: 'center',
-      justifyContent: 'center',
-      display: opened ? 'flex' : 'none',
-      zIndex: '1',
-    };
 
+  render() {
     return (
-      <div>
-        <nav style={navStyle}>
-          <div style={navLeftStyle}>
-            <a style={navRightItemStyle} href="/">UCSD CSSA 短租平台</a>
+      <div className="header">
+        <nav className="nav">
+          <div className="navLeft">
+            <a
+              className="navRightItem"
+              href="/"
+            >
+            UCSD CSSA 短租平台
+            </a>
           </div>
-          <div style={navRightStyle}>
+          <div className="navRight">
             <Button
-              style={navRightItemStyle}
+              className="navRightItem"
               onClick={() => this.toggle()}
               onKeyDown={() => this.toggle()}
             >
-登陆
+            登陆
             </Button>
-            <a style={navRightItemStyle} href="/searchpage">搜索房源</a>
-            <a style={navRightItemStyle} href="/publish">发布房源</a>
+            <a className="navRightItem" href="/searchpage">搜索房源</a>
+            <a className="navRightItem" href="/publish">发布房源</a>
           </div>
         </nav>
         <div
-          style={maskStyle}
+          className="mask"
+          style={this.getStyle()}
           onClick={() => this.toggle()}
           onKeyDown={() => this.toggle()}
           role="presentation"
         >
           <div
-            style={loginStyle}
+            className="login"
             onClick={e => e.stopPropagation()}
             onKeyDown={e => e.stopPropagation()}
             role="presentation"
@@ -140,7 +113,7 @@ class Header extends React.Component {
                   <Col style={{ width: '50%' }}>
                     <center>
                       <Button
-                        style={buttonStyle}
+                        className="button"
                         onClick={() => {
                           this.setState({
                             login: true,
@@ -160,7 +133,7 @@ class Header extends React.Component {
                   <Col style={{ width: '50%' }}>
                     <center>
                       <Button
-                        style={buttonStyle}
+                        className="button"
                         onClick={() => {
                           this.setState({
                             login: false,
diff --git a/src/components/styles/header.scss b/src/components/styles/header.scss
new file mode 100644
index 0000000..ad09bd8
--- /dev/null
+++ b/src/components/styles/header.scss
@@ -0,0 +1,34 @@
+.header .nav {
+    width: '100%';
+    height: '60px';
+    background-color: 'rgba(186; 0, 0, 1)';
+    display: 'flex';
+    z-Index: '1000000';
+    box-shadow: '0 0 5px rgba(0, 0, 0, 0.3)';
+}
+
+.header .nav .navLeft {
+    display: 'flex';
+}
+
+.header .nav .navRight {
+    flex-grow: '1000000';
+    flex-flow: 'row-reverse';
+    display: 'flex';
+}
+
+.header .navRightItem {
+    line-height: '60px';
+    padding: '0 15px';
+}
+
+.header .button {
+    color: 'black';
+    cursor: 'pointer';
+}
+
+.header .login {
+    width: '50%';
+    height: '60%';
+    background-color: 'white';
+}

From 116fe5164838b4dbf12c0504f951678b7dca0922 Mon Sep 17 00:00:00 2001
From: ZixinShen <zis053@ucsd.edu>
Date: Sat, 17 Nov 2018 19:47:32 -0800
Subject: [PATCH 3/3] fix flowtype errors and put Header.jsx,header.scss into a
 new folder

---
 src/components/ChangePassword.jsx        |  4 +--
 src/components/about/About.jsx           |  4 +--
 src/components/{ => header}/Header.jsx   | 13 ++++++---
 src/components/header/styles/header.scss | 34 ++++++++++++++++++++++++
 src/components/styles/header.scss        | 34 ------------------------
 5 files changed, 47 insertions(+), 42 deletions(-)
 rename src/components/{ => header}/Header.jsx (95%)
 create mode 100644 src/components/header/styles/header.scss
 delete mode 100644 src/components/styles/header.scss

diff --git a/src/components/ChangePassword.jsx b/src/components/ChangePassword.jsx
index a91fdba..eba13a0 100644
--- a/src/components/ChangePassword.jsx
+++ b/src/components/ChangePassword.jsx
@@ -12,10 +12,10 @@ import React from 'react';
 import {
   Input, Button, Card, Row, Col,
 } from 'react-materialize';
-import Header from './Header.jsx';
+import Header from './header/Header';
 
 // eslint-disable-next-line react/prefer-stateless-function
-class ChangePassword extends React.Component {
+class ChangePassword extends React.Component<{}> {
   render() {
     return (
       <div>
diff --git a/src/components/about/About.jsx b/src/components/about/About.jsx
index 6c1a17d..642d85c 100644
--- a/src/components/about/About.jsx
+++ b/src/components/about/About.jsx
@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react';
-import Header from '~/components/Header';
+import Header from '~/components/header/Header';
 import Developer from './Developer';
 import type { DeveloperInfo } from './types/DeveloperInfo';
 
@@ -25,7 +25,7 @@ class About extends React.Component<{}, AboutState> {
 
   render() {
     const { members } = this.state;
-    
+
     return (
       <div>
         <Header />
diff --git a/src/components/Header.jsx b/src/components/header/Header.jsx
similarity index 95%
rename from src/components/Header.jsx
rename to src/components/header/Header.jsx
index 97ec097..9e05441 100644
--- a/src/components/Header.jsx
+++ b/src/components/header/Header.jsx
@@ -1,4 +1,4 @@
-// @flow
+//@flow
 
 import React from 'react';
 import './styles/header.scss';
@@ -7,9 +7,14 @@ import {
   Card, Row, Col, Input, Button,
 } from 'react-materialize';
 
-class Header extends React.Component {
-  constructor(props) {
-    super(props);
+type HeaderState = {
+  login: boolean,
+  opened: boolean
+};
+
+class Header extends React.Component<{},HeaderState> {
+  constructor(props:{},context:HeaderState) {
+    super(props,context);
     this.state = {
       login: true,
       opened: false,
diff --git a/src/components/header/styles/header.scss b/src/components/header/styles/header.scss
new file mode 100644
index 0000000..b1c7bb6
--- /dev/null
+++ b/src/components/header/styles/header.scss
@@ -0,0 +1,34 @@
+.header .nav {
+    width: 100%;
+    height: 60px;
+    background-color: rgba(186, 0, 0, 1);
+    display: flex;
+    z-Index: 1000000;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}
+
+.header .nav .navLeft {
+    display: flex;
+}
+
+.header .nav .navRight {
+    flex-grow: 1000000;
+    flex-flow: row-reverse;
+    display: flex;
+}
+
+.header .navRightItem {
+    line-height: 60px;
+    padding: 0 15px;
+}
+
+.header .button {
+    color: black;
+    cursor: pointer;
+}
+
+.header .login {
+    width: 50%;
+    height: 60%;
+    background-color: white;
+}
diff --git a/src/components/styles/header.scss b/src/components/styles/header.scss
deleted file mode 100644
index ad09bd8..0000000
--- a/src/components/styles/header.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-.header .nav {
-    width: '100%';
-    height: '60px';
-    background-color: 'rgba(186; 0, 0, 1)';
-    display: 'flex';
-    z-Index: '1000000';
-    box-shadow: '0 0 5px rgba(0, 0, 0, 0.3)';
-}
-
-.header .nav .navLeft {
-    display: 'flex';
-}
-
-.header .nav .navRight {
-    flex-grow: '1000000';
-    flex-flow: 'row-reverse';
-    display: 'flex';
-}
-
-.header .navRightItem {
-    line-height: '60px';
-    padding: '0 15px';
-}
-
-.header .button {
-    color: 'black';
-    cursor: 'pointer';
-}
-
-.header .login {
-    width: '50%';
-    height: '60%';
-    background-color: 'white';
-}