Merge pull request #61 from ICT-FUNney/feat/uploadPage

Feat/upload page

client/finds_client/public/index.html

@@ -24,8 +24,8 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <style>
-      body{
-        margin:0;
+      body {
+        margin: 0;
       }
     </style>
     <title>React App</title>

client/finds_client/src/App.js

@@ -8,23 +8,24 @@ import Home from "./components/home";
 import Error from "./components/Error";
 import DocumentDetailPage from "./components/DocumentDetailPage";
 import MyPage from "./components/myPage";
+import UploadPage from "./components/UploadPage";
 import TopAppBar from './components/TopAppBar';
 
 function App() {
   var url = window.location.href;
   return (
     <div>
-
-    <ConnectedRouter history={history}>
-      <Switch>
-        <Route exact path="/login" component={Login} />
-        <Route exact path="/home" component={Home} />
-        <Route path="/detail" component={DocumentDetailPage} />
-        <Route exact path="/result" component={Result}/>
-        <Route exact path="/myPage" component={MyPage} />
-        <Route path="/" component={Login} />
-      </Switch>
-    </ConnectedRouter>
+      <ConnectedRouter history={history}>
+        <Switch>
+          <Route exact path="/login" component={Login} />
+          <Route exact path="/home" component={Home} />
+          <Route path="/detail" component={DocumentDetailPage} />
+          <Route exact path="/result" component={Result} />
+          <Route exact path="/myPage" component={MyPage} />
+          <Route exact path="/UploadPage" component={UploadPage} />
+          <Route path="/" component={Login} />
+        </Switch>
+      </ConnectedRouter>
     </div>
   );
 }

client/finds_client/src/apis/Search.js

@@ -1,11 +1,11 @@
 import * as request from "superagent";
 
 export const getSearchResult = (docName) => {
-    return request.get(`https://private-anon-14c3863ce4-finds1.apiary-mock.com/search/${docName}`)
+    return request.get(`https://private-anon-09b303e34c-finds1.apiary-mock.com/search/${docName}`)
         .then(res => {
-            return {res:res.body};
+            return { res: res.body };
         }).catch(err => {
             console.log(err);
-            return {err};
+            return { err };
         })
 }

client/finds_client/src/apis/UserDoc.js

@@ -1,11 +1,11 @@
 import * as request from "superagent";
 
 export const getUserDocument = (id) => {
-    return request.get(`https://private-anon-14c3863ce4-finds1.apiary-mock.com/documents/${id}`)
+    return request.get(`https://private-anon-09b303e34c-finds1.apiary-mock.com/search/${id}`)
         .then(res => {
-            return {res:res.body};
+            return { res: res.body };
         }).catch(err => {
             console.log(err);
-            return {err};
+            return { err };
         })
 }

client/finds_client/src/apis/UserInfo.js

@@ -1,12 +1,12 @@
 import * as request from "superagent";
 
 export const getUserInfo = (userId) => {
-    return request.get(`http://private-anon-14c3863ce4-finds1.apiary-mock.com/userinfo/${userId}`)
+    return request.get(`https://private-anon-09b303e34c-finds1.apiary-mock.com/search/${userId}`)
         .then(res => {
             console.log(res)
             return { res: res.body };
         }).catch(err => {
             console.log(err);
-            return {err};
+            return { err };
         })
 }

client/finds_client/src/components/UploadPage.js

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import { withRouter } from 'react-router';
+import Box from '@material-ui/core/Box';
+import {
+    makeStyles,
+    withStyles
+} from '@material-ui/core/styles';
+import { push } from "connected-react-router";
+import { useDispatch, useSelector } from "react-redux";
+import Button from '@material-ui/core/Button';
+import { IconButton } from '@material-ui/core';
+import Publish from '@material-ui/icons/Publish';
+import Input from '@material-ui/core/Input';
+import TextField from '@material-ui/core/TextField';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import { deepPurple } from '@material-ui/core/colors';
+import '../styles/uploadPage.css';
+const darkViolet = deepPurple['A700'];
+
+const useStyles = makeStyles(theme => ({
+    upload_icon_margin: {
+        display: "block",
+        margin: "0 auto"
+    },
+    upload_icon: {
+        color: "black",
+        fontSize: "35px",
+    },
+    upload_input: {
+        marginTop: "5px"
+    },
+    upload_button_bottom: {
+        marginTop: "5%"
+    }
+}));
+
+const ColorButton = withStyles(theme => ({
+    root: {
+        color: theme.palette.getContrastText(darkViolet),
+        backgroundColor: darkViolet,
+        '&:hover': {
+            backgroundColor: darkViolet,
+        },
+    },
+}))(Button);
+
+const UploadPage = props => {
+    const classes = useStyles();
+    const dispatch = useDispatch();
+    const moveToHome = () => {
+        return (dispatch(push("/home")));
+    }
+    return (
+        <div className="upload_reset">
+            <div className="upload_margin"></div>
+            <Box borderRadius="10%" className="upload_box">
+                <div className="upload_inner">
+                    <IconButton className={classes.upload_icon_margin}>
+                        <Publish className={classes.upload_icon} />
+                    </IconButton>
+                    <p className="upload_icon_bottom">ノートをアップロードする</p>
+                </div>
+            </Box>
+            <div className="upload_input_inner">
+                <p className="white_text">ノートとタイトルと説明</p>
+                <Box className="sentence_box">
+                    <TextField label="ノートタイトル" helperText="（必須、40文字まで）" fullWidth inputProps={{ 'aria-label': 'description' }} className={classes.upload_input} />
+                    <TextField label="説明(分野、工夫した点、特徴、注意点など)" helperText="（任意、1000文字まで）" fullWidth inputProps={{ 'aria-label': 'description' }} className={classes.upload_input} />
+                </Box>
+                <p className="white_text">価格</p>
+                <Box className="sentence_box">
+                    <Input
+                        type="number"
+                        fullWidth
+                        endAdornment={<InputAdornment position="end">FUNney</InputAdornment>}
+                        className="input_number"
+                    />
+                </Box>
+            </div>
+            <div className="upload_button_space">
+                <div className="upload_button_inner">
+                    <ColorButton
+                        variant="contained"
+                        onClick={moveToHome}
+                    >
+                        投稿する
+                    </ColorButton>
+                    <ColorButton
+                        variant="contained"
+                        className={classes.upload_button_bottom}
+                        onClick={moveToHome}
+                    >
+                        キャンセル
+                </ColorButton>
+                </div>
+            </div>
+        </div >
+    )
+}
+export default withRouter(UploadPage)

client/finds_client/src/components/home.js

@@ -1,13 +1,26 @@
 import React from 'react';
+import { push } from "connected-react-router";
+import { useDispatch, useSelector } from "react-redux";
 import TopAppBar from './TopAppBar';
 import MyDocumentList from './MyDocumentsList';
-
+import Fab from '@material-ui/core/Fab';
+import AddIcon from '@material-ui/icons/Add';
+import '../styles/home.css';
 
 const Home = props => {
+    const dispatch = useDispatch();
+    const moveToUploadPage = () => {
+        return (dispatch(push("/uploadPage")));
+    }
     return (
         <div>
             <TopAppBar />
-            <MyDocumentList/>
+            <MyDocumentList />
+            <div className="positionFixed">
+                <Fab color="primary" aria-label="add" className="positionFixed" onClick={moveToUploadPage}>
+                    <AddIcon />
+                </Fab>
+            </div>
         </div>
     )
 }

client/finds_client/src/components/myPage.js

@@ -1,4 +1,4 @@
-import React ,{useEffect}from 'react';
+import React, { useEffect } from 'react';
 import { withRouter } from 'react-router';
 import '../styles/myPage.css';
 import {
@@ -10,7 +10,7 @@ import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
 import { deepPurple } from '@material-ui/core/colors';
 import { push } from "connected-react-router";
-import { useDispatch ,useSelector} from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import TopAppBar from './TopAppBar';
 import { getUserInfoRequest } from "../actions/actionTypes";
 const darkViolet = deepPurple['A700'];
@@ -45,9 +45,9 @@ const Mypage = props => {
     const classes = useStyles();
     const dispatch = useDispatch();
     const { userInfo } = useSelector(state => state.userInfo);
-    useEffect(()=>{
-     dispatch(getUserInfoRequest("b1018000"))
-   },[])
+    useEffect(() => {
+        dispatch(getUserInfoRequest("b1018000"))
+    }, [])
     const moveToLogin = () => {
         return (dispatch(push("/login")));
     }
@@ -58,9 +58,9 @@ const Mypage = props => {
             </div>
             <div className="inner">
                 <ColorBox color="text.primary" borderRadius="10%" className="box">
-                    <img src={userInfo.userIcon||"https://www.stickpng.com/assets/images/585e4bf3cb11b227491c339a.png"} class="material-icons" alt="sdfreghtrjy"></img><br></br>
+                    <img src={userInfo.userIcon || "https://www.stickpng.com/assets/images/585e4bf3cb11b227491c339a.png"} class="material-icons" alt="sdfreghtrjy"></img><br></br>
                     <Typography className="text_inner">
-      　　　　　　　　　　<span className="studentNumber">{userInfo.userId}</span>
+                        <span className="studentNumber">{userInfo.userId}</span>
                         <span className="funneyRest">のこり</span>
                         <span className="funneyNumber">{userInfo.balance}</span>
                         <span className="funneyUnit">FUNney</span>

client/finds_client/src/styles/home.css

@@ -0,0 +1,5 @@
+.positionFixed {
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+}

client/finds_client/src/styles/myPage.css

@@ -1,6 +1,6 @@
 .inner {
-  width: 40%;
-  margin: 5% auto;
+  width: 50%;
+  margin: 10% auto 0 auto;
   text-align: center;
 }
 
@@ -9,9 +9,9 @@
   padding-bottom: 10%;
 }
 
-.material-icons{
-width: 60px;
-height:60px;
+.material-icons {
+  width: 60px;
+  height: 60px;
 }
 
 .text_inner {

client/finds_client/src/styles/uploadPage.css

@@ -0,0 +1,59 @@
+.upload_reset {
+  background-color: #a9a9a9;
+  height: 100vh;
+}
+
+.upload_margin {
+  height: 3vh;
+  background-color: #a9a9a9;
+}
+
+.upload_box {
+  display: flex;
+  flex-direction: column;
+  height: 30vh;
+  margin: 0 25%;
+  background-color: white;
+}
+
+.upload_inner {
+  margin: auto;
+}
+
+.upload_icon_bottom {
+  display: block;
+  font-size: 13px;
+  color: black;
+  margin: 0 auto;
+}
+
+.upload_input_inner {
+  height: 30vh;
+}
+
+.white_text {
+  display: block;
+  color: white;
+  margin-top: 1vh;
+  margin-bottom: 0;
+}
+
+.sentence_box {
+  background-color: white;
+  padding: 0px 10px 10px 10px;
+}
+
+.input_number {
+  padding-top: 10px;
+}
+
+.upload_button_space {
+  margin-top: 15vh;
+  height: 20vh;
+}
+
+.upload_button_inner {
+  margin: 0% 15%;
+  display: flex;
+  flex-direction: column;
+}