Merge pull request #35 from butsuli-shine/master

Apiをたたく処理をapiクラスに移動した. sass-loaderのバージョンを下げた

package.json

@@ -5,10 +5,10 @@
   "main": "index.js",
   "scripts": {
     "prettier": "prettier ./src --ext ts,tsx --write",
-    "start": "webpack-dev-server",
+    "start": "webpack-cli serve --mode development",
     "build": "webpack",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
-    "lint:fix":" eslint --fix 'src/**/*.{js,jsx,ts,tsx}'"
+    "lint:fix": " eslint --fix 'src/**/*.{js,jsx,ts,tsx}'"
   },
   "keywords": [],
   "author": "",
@@ -17,9 +17,12 @@
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "axios": "^0.21.1",
+    "bootstrap": "^4.6.0",
     "css-loader": "^5.0.1",
+    "framer-motion": "^3.3.0",
     "js-base64": "^3.6.0",
     "react": "^17.0.1",
+    "react-bootstrap": "^1.4.3",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "sass": "^1.32.7",
@@ -41,7 +44,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "html-webpack-plugin": "^4.5.1",
     "prettier": "^2.2.1",
-    "sass-loader": "11.0.1",
+    "sass-loader": "7.3.1",
     "ts-loader": "^8.0.17",
     "ts-node": "^9.1.1",
     "typescript": "^4.1.5",

src/api/api.ts

@@ -0,0 +1,39 @@
+import axios from 'axios';
+import { Base64 } from 'js-base64';
+
+class Api {
+  URL: string;
+
+  email: string;
+
+  passWord: string;
+
+  constructor(email: string, passWord: string) {
+    this.URL = 'https://api.kokasai.com';
+    this.email = email;
+    this.passWord = passWord;
+  }
+
+  login() {
+    const encodeToBase64 = (email: string, passWord: string): string => Base64.encode(`${email}:${passWord}`);
+    const createHeader = (): { [key: string]: string } => {
+      const emailAndPassword: string = encodeToBase64(this.email, this.passWord);
+      const headers: {
+          [key: string]: string;
+        } = {
+          Authorization: `Basic ${emailAndPassword}`,
+        };
+      return headers;
+    };
+    const loginEndPointUrl = `${this.URL}/login`;
+    const header = createHeader();
+    axios
+      .post(loginEndPointUrl, null, {
+        headers: header,
+      })
+      .then(() => true)
+      .catch(() => false);
+  }
+}
+
+export default Api;

src/components/App.scss

@@ -1,3 +1,13 @@
-.app{
-    font-family: "Noto Sans Japanese";
+.app {
+  font-family: "Noto Sans Japanese";
+}
+
+.home,
+.project,
+.busInfo,
+.access,
+.login {
+  margin: 0 auto;
+  width: 80%;
+  max-width: 500px;
 }

src/components/App.tsx

@@ -1,7 +1,5 @@
 import React, { useState, FC } from 'react';
-import {
-  BrowserRouter as Router, Switch, Route,
-} from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import Home from './pages/Home';
 import Project from './pages/Project';
 import Access from './pages/Access';
@@ -25,8 +23,16 @@ const App: FC = (): JSX.Element => {
             <Route path="/project" component={Project} />
             <Route path="/access" component={Access} />
             <Route path="/busInfo" component={BusInfo} />
-            <Route path="/login" render={() => <Login setIsLoggedIn={setIsLoggedIn} setUser={setUser} />} />
-            <Route path="/account" render={() => <Account user={user} isLoggedIn={isLoggedIn} />} />
+            <Route
+              path="/login"
+              render={() => (
+                <Login setIsLoggedIn={setIsLoggedIn} setUser={setUser} />
+              )}
+            />
+            <Route
+              path="/account"
+              render={() => <Account user={user} isLoggedIn={isLoggedIn} />}
+            />
             <Route path="/auth" render={() => <Auth />} />
           </Switch>
         </div>

src/components/atoms/Text.tsx

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+
+type Props = {
+  children?: React.ReactNode;
+  className?: string;
+};
+
+const Text: FC<Props> = (props) => {
+  const { children, className } = props;
+  return <div className={className}>{children}</div>;
+};
+export default Text;

src/components/atoms/button.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { Button } from 'react-bootstrap';
+
+type Props = {
+  children: React.ReactNode;
+  onClick?: React.MouseEvent<HTMLInputElement>;
+  size: 'sm' | 'lg';
+  color?: string;
+};
+const Btn: FC<Props> = (props) => {
+  const {
+    children, onClick, size, color,
+  } = props;
+  return (
+    <Button onClick={() => onClick} size={size} variant={color}>
+      {children}
+    </Button>
+  );
+};
+
+export default Btn;

src/components/common/Header.scss

@@ -1,99 +1,159 @@
-$bgDefault      : #80e464;
-$bgHighlight    : #e07f2d;
-$colDefault     : #121611;
-$colHighlight   : #f6fbf6;
-$dropDown       : true;
+$bgDefault: #80e464;
+$bgHighlight: #e07f2d;
+$colDefault: #121611;
+$colHighlight: #f6fbf6;
+$dropDown: true;
 .navbar {
   background-color: $bgDefault;
   .navbar-brand {
     color: $colDefault;
-    &:hover, &:focus {
-      color: $colHighlight; }}
+    &:hover,
+    &:focus {
+      color: $colHighlight;
+    }
+  }
   .navbar-text {
     color: $colDefault;
     a {
       color: $colHighlight;
-      &:hover, &:focus {
-        color: $colHighlight; }}}
+      &:hover,
+      &:focus {
+        color: $colHighlight;
+      }
+    }
+  }
   .navbar-nav {
     .nav-link {
       color: $colDefault;
-      border-radius: .25rem;
+      border-radius: 0.25rem;
       margin: 0 0.25em;
       &:not(.disabled) {
-        &:hover, &:focus {
-          color: $colHighlight; }}}
+        &:hover,
+        &:focus {
+          color: $colHighlight;
+        }
+      }
+    }
     @if ($dropDown) {
       .dropdown-menu {
         background-color: $bgDefault;
         border-color: $bgHighlight;
         .dropdown-item {
           color: $colDefault;
-          &:hover, &:focus, &.active {
+          &:hover,
+          &:focus,
+          &.active {
             color: $colHighlight;
-            background-color: $bgHighlight; }}
+            background-color: $bgHighlight;
+          }
+        }
         .dropdown-divider {
-          border-top-color: $bgHighlight; }}}
-    .nav-item.active, .nav-item.show {
-      .nav-link, .nav-link:hover, .nav-link:focus {
+          border-top-color: $bgHighlight;
+        }
+      }
+    }
+    .nav-item.active,
+    .nav-item.show {
+      .nav-link,
+      .nav-link:hover,
+      .nav-link:focus {
         color: $colHighlight;
-        background-color: $bgHighlight; }}}
+        background-color: $bgHighlight;
+      }
+    }
+  }
   .navbar-toggler {
     border-color: $bgHighlight;
-    &:hover, &:focus {
-      background-color: $bgHighlight; }
+    &:hover,
+    &:focus {
+      background-color: $bgHighlight;
+    }
     .navbar-toggler-icon {
-        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30'xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(51, 51, 51, 1)'stroke-width='3' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
-      };}
+      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30'xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(51, 51, 51, 1)'stroke-width='3' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
+    }
+  }
 
   .navbar-collapse,
   .navbar-form {
-    border-color: $colDefault; }
+    border-color: $colDefault;
+  }
   .navbar-link {
     color: $colDefault;
     &:hover {
-      color: $colHighlight; }}}
+      color: $colHighlight;
+    }
+  }
+}
 @media (max-width: 575px) {
   .navbar-expend-sm .navbar-nav .show .dropdown-menu {
     .dropdown-item {
       color: $colDefault;
-      &:hover, &:focus {
-        color: $colHighlight; }}
+      &:hover,
+      &:focus {
+        color: $colHighlight;
+      }
+    }
     .dropdown-item.active {
       color: $colHighlight;
-      background-color: $bgHighlight; }}}
+      background-color: $bgHighlight;
+    }
+  }
+}
 @media (max-width: 767px) {
   .navbar-expend-md .navbar-nav .show .dropdown-menu {
     .dropdown-item {
       color: $colDefault;
-      &:hover, &:focus {
-        color: $colHighlight; }}
+      &:hover,
+      &:focus {
+        color: $colHighlight;
+      }
+    }
     .dropdown-item.active {
       color: $colHighlight;
-      background-color: $bgHighlight; }}}
+      background-color: $bgHighlight;
+    }
+  }
+}
 @media (max-width: 991px) {
   .navbar-expend-lg .navbar-nav .show .dropdown-menu {
     .dropdown-item {
       color: $colDefault;
-      &:hover, &:focus {
-        color: $colHighlight; }}
+      &:hover,
+      &:focus {
+        color: $colHighlight;
+      }
+    }
     .dropdown-item.active {
       color: $colHighlight;
-      background-color: $bgHighlight; }}}
+      background-color: $bgHighlight;
+    }
+  }
+}
 @media (max-width: 1199px) {
   .navbar-expend-xl .navbar-nav .show .dropdown-menu {
     .dropdown-item {
       color: $colDefault;
-      &:hover, &:focus {
-        color: $colHighlight; }}
+      &:hover,
+      &:focus {
+        color: $colHighlight;
+      }
+    }
     .dropdown-item.active {
       color: $colHighlight;
-      background-color: $bgHighlight; }}}
+      background-color: $bgHighlight;
+    }
+  }
+}
 .navbar-expend .navbar-nav .show .dropdown-menu {
   .dropdown-item {
     color: $colDefault;
-    &:hover, &:focus {
-      color: $colHighlight; }}
+    &:hover,
+    &:focus {
+      color: $colHighlight;
+    }
+  }
   .dropdown-item.active {
     color: $colHighlight;
-    background-color: $bgHighlight; }}
+    background-color: $bgHighlight;
+  }
+}