Home Explore Help
Sign In
ver2ex
/
Project
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

shoto neponyatnoe

Vadym Hlushko 3 years ago
parent
b2367bd65a
commit
e28938eb4e
32 changed files with 3091 additions and 77 deletions
Unified View Show Diff Stats
  1. 2499 0
      projectreact/package-lock.json
  2. 8 2
      projectreact/package.json
  3. BIN
      projectreact/public/favicon.ico
  4. 13 3
      projectreact/public/index.html
  5. BIN
      projectreact/public/logo.png
  6. BIN
      projectreact/public/logo192.png
  7. BIN
      projectreact/public/logo512.png
  8. 3 3
      projectreact/public/manifest.json
  9. 23 16
      projectreact/src/App.css
  10. 16 2
      projectreact/src/App.js
  11. 0 8
      projectreact/src/App.test.js
  12. 73 1
      projectreact/src/actions/index.js
  13. 53 0
      projectreact/src/components/avatar
  14. 17 0
      projectreact/src/components/coursor.js
  15. 0 8
      projectreact/src/components/future-nick.js
  16. 17 0
      projectreact/src/components/header.js
  17. 15 0
      projectreact/src/components/nick.js
  18. 18 0
      projectreact/src/components/nickHeader.js
  19. 14 0
      projectreact/src/images/ava.js
  20. 8 0
      projectreact/src/images/logo.js
  21. BIN
      projectreact/src/images/logo.png
  22. 8 0
      projectreact/src/images/profile.js
  23. BIN
      projectreact/src/logo.png
  24. 33 0
      projectreact/src/pages/cabinet.js
  25. 91 8
      projectreact/src/pages/homePage.js
  26. 69 0
      projectreact/src/pages/login.js
  27. 9 0
      projectreact/src/pages/projects.js
  28. 59 21
      projectreact/src/pages/reg.js
  29. 42 0
      projectreact/src/pages/upload.js
  30. BIN
      projectreact/src/profileWall.jpeg
  31. 3 5
      projectreact/src/reducers/index.js
  32. BIN
      projectreact/src/user.png

File diff suppressed because it is too large
+ 2499 - 0
projectreact/package-lock.json


+ 8 - 2
projectreact/package.json
View File 

@@ -2,19 +2,25 @@
 
   "name": "projectreact",
 
   "name": "projectreact",
 
   "version": "0.1.0",
 
   "version": "0.1.0",
 
   "private": true,
 
   "private": true,
 
+  "proxy": "http://snippet.asmer.fs.a-level.com.ua",
 
   "dependencies": {
 
   "dependencies": {
 
     "@testing-library/jest-dom": "^5.14.1",
 
     "@testing-library/jest-dom": "^5.14.1",
 
     "@testing-library/react": "^11.2.7",
 
     "@testing-library/react": "^11.2.7",
 
     "@testing-library/user-event": "^12.8.3",
 
     "@testing-library/user-event": "^12.8.3",
 
+    "ace-builds": "^1.4.12",
 
+    "mdbreact": "^5.1.0",
 
     "react": "^17.0.2",
 
     "react": "^17.0.2",
 
+    "react-ace": "^9.4.4",
 
+    "react-animated-cursor": "^2.2.0",
 
+    "react-avatar-edit": "^1.0.0",
 
     "react-dom": "^17.0.2",
 
     "react-dom": "^17.0.2",
 
+    "react-dropzone": "^11.4.2",
 
     "react-redux": "^7.2.5",
 
     "react-redux": "^7.2.5",
 
     "react-router-dom": "^5.3.0",
 
     "react-router-dom": "^5.3.0",
 
     "react-scripts": "4.0.3",
 
     "react-scripts": "4.0.3",
 
     "redux": "^4.1.1",
 
     "redux": "^4.1.1",
 
     "redux-thunk": "^2.3.0",
 
     "redux-thunk": "^2.3.0",
 
-    "web-vitals": "^1.1.2",
 
-    "proxy": "http://snippet.asmer.fs.a-level.com.ua"
 
+    "web-vitals": "^1.1.2"
 
   },
 
   },
 
   "scripts": {
 
   "scripts": {
 
     "start": "react-scripts start",
 
     "start": "react-scripts start",

BIN
projectreact/public/favicon.ico
View File


+ 13 - 3
projectreact/public/index.html
View File 

@@ -2,19 +2,27 @@
 
 <html lang="en">
 
 <html lang="en">
 
   <head>
 
   <head>
 
     <meta charset="utf-8" />
 
     <meta charset="utf-8" />
 
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 
+    <link rel="icon" href="logo.png" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <meta name="theme-color" content="#000000" />
 
     <meta name="theme-color" content="#000000" />
 
     <meta
 
     <meta
 
       name="description"
 
       name="description"
 
       content="Web site created using create-react-app"
 
       content="Web site created using create-react-app"
 
     />
 
     />
 
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
+    <link rel="apple-touch-icon" href="logo.png" />
 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
 
+    <link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">
 
+ 
+    
     <!--
 
     <!--
 
       manifest.json provides metadata used when your web app is installed on a
 
       manifest.json provides metadata used when your web app is installed on a
 
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 
     -->
 
     -->
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
 
+    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
 
+
 
+    
     <!--
 
     <!--
 
       Notice the use of %PUBLIC_URL% in the tags above.
 
       Notice the use of %PUBLIC_URL% in the tags above.
 
       It will be replaced with the URL of the `public` folder during the build.
 
       It will be replaced with the URL of the `public` folder during the build.
 
@@ -27,7 +35,9 @@
 
     <title>React App</title>
 
     <title>React App</title>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
-    <noscript>You need to enable JavaScript to run this app.</noscript>
 
+    
+    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
 
+  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
 
     <div id="root"></div>
 
     <div id="root"></div>
 
     <!--
 
     <!--
 
       This HTML file is a template.
 
       This HTML file is a template.

BIN
projectreact/public/logo.png
View File


BIN
projectreact/public/logo192.png
View File


BIN
projectreact/public/logo512.png
View File


+ 3 - 3
projectreact/public/manifest.json
View File 

@@ -3,17 +3,17 @@
 
   "name": "Create React App Sample",
 
   "name": "Create React App Sample",
 
   "icons": [
 
   "icons": [
 
     {
 
     {
 
-      "src": "favicon.ico",
 
+      "src": "logo.png",
 
       "sizes": "64x64 32x32 24x24 16x16",
 
       "sizes": "64x64 32x32 24x24 16x16",
 
       "type": "image/x-icon"
 
       "type": "image/x-icon"
 
     },
 
     },
 
     {
 
     {
 
-      "src": "logo192.png",
 
+      "src": "logo.png",
 
       "type": "image/png",
 
       "type": "image/png",
 
       "sizes": "192x192"
 
       "sizes": "192x192"
 
     },
 
     },
 
     {
 
     {
 
-      "src": "logo512.png",
 
+      "src": "logo.png",
 
       "type": "image/png",
 
       "type": "image/png",
 
       "sizes": "512x512"
 
       "sizes": "512x512"
 
     }
 
     }

+ 23 - 16
projectreact/src/App.css
View File 

@@ -1,18 +1,20 @@
 
 .App {
 
 .App {
 
-  text-align: center;
 
+  font: 400 14px 'Open Sans', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
 
 }
 
 }
 
 
 
-.App-logo {
 
-  height: 40vmin;
 
-  pointer-events: none;
 
+.editor {
 
+display: inline-block;
 
+
 
 }
 
 }
 
 
 
-@media (prefers-reduced-motion: no-preference) {
 
-  .App-logo {
 
-    animation: App-logo-spin infinite 20s linear;
 
-  }
 
+.ava {
 
+  cursor: pointer;
 
 }
 
 }
 
 
 
+/* .ace_marker-layer .ace_selected-word {
 
+  border: 1px solid #494949
 
+} */
 
+
 
 .App-header {
 
 .App-header {
 
   background-color: #282c34;
 
   background-color: #282c34;
 
   min-height: 100vh;
 
   min-height: 100vh;
 
@@ -28,11 +30,16 @@
 
   color: #61dafb;
 
   color: #61dafb;
 
 }
 
 }
 
 
 
-@keyframes App-logo-spin {
 
-  from {
 
-    transform: rotate(0deg);
 
-  }
 
-  to {
 
-    transform: rotate(360deg);
 
-  }
 
-}
 
+.form-elegant .font-small {
 
+  font-size: 0.8rem; }
 
+
 
+.form-elegant .z-depth-1a {
 
+  -webkit-box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25);
 
+  box-shadow: 0 2px 5px 0 rgba(55, 161, 255, 0.26), 0 4px 12px 0 rgba(121, 155, 254, 0.25); }
 
+
 
+.form-elegant .z-depth-1-half,
 
+.form-elegant .btn:hover {
 
+  -webkit-box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15);
 
+  box-shadow: 0 5px 11px 0 rgba(85, 182, 255, 0.28), 0 4px 15px 0 rgba(36, 133, 255, 0.15); }
 
+
 
+

+ 16 - 2
projectreact/src/App.js
View File 

@@ -6,7 +6,12 @@ import thunk from 'redux-thunk';
 
 import {createStore, combineReducers, applyMiddleware} from 'redux';
 
 import {createStore, combineReducers, applyMiddleware} from 'redux';
 
 import store from './reducers';
 
 import store from './reducers';
 
 import RegForm from './pages/reg';
 
 import RegForm from './pages/reg';
 
+import { LogForm } from './pages/login';
 
 import Home from './pages/homePage';
 
 import Home from './pages/homePage';
 
+import Cabinet from './pages/cabinet';
 
+import Projects from './pages/projects';
 
+import ConUpload from './pages/upload';
 
+import { imgFind } from './actions';
 
 import {
 
 import {
 
   BrowserRouter as Router,
 
   BrowserRouter as Router,
 
   Switch,
 
   Switch,
 
@@ -14,16 +19,25 @@ import {
 
   Link
 
   Link
 
 } from "react-router-dom";
 
 } from "react-router-dom";
 
 
 
+
 
+
 
+
 
 function App() {
 
 function App() {
 
   return (
 
   return (
 
     <div className="App">
 
     <div className="App">
 
+      <div className = 'contentDiv'>
 
       <Provider store = {store}>
 
       <Provider store = {store}>
 
+       
       <Router history = {createHistory()}>
 
       <Router history = {createHistory()}>
 
-      <Route exact path='/' component={Home}/>
 
+      <Route exact path='/' component={Home} />
 
       <Route exact path='/registration' component={RegForm}/>
 
       <Route exact path='/registration' component={RegForm}/>
 
+      <Route exact path='/login' component={LogForm}/>
 
+      <Route exact path='/cabinet' component={Cabinet}/>
 
+      <Route exact path='/projects' component={Projects}/>
 
+      <Route exact path='/upload' component={ConUpload}/>
 
       </Router>
 
       </Router>
 
       </Provider>
 
       </Provider>
 
-     
+      </div>
 
     </div>
 
     </div>
 
   );
 
   );
 
 }
 
 }

+ 0 - 8
projectreact/src/App.test.js
View File 

@@ -1,8 +0,0 @@
 
-import { render, screen } from '@testing-library/react';
 
-import App from './App';
 
-
 
-test('renders learn react link', () => {
 
-  render(<App />);
 
-  const linkElement = screen.getByText(/learn react/i);
 
-  expect(linkElement).toBeInTheDocument();
 
-});

+ 73 - 1
projectreact/src/actions/index.js
View File 

@@ -1,3 +1,4 @@
 
+import store from "../reducers"
 
 const getGQL = url => 
 const getGQL = url => 
     (query, variables={}) => fetch(url, {
 
     (query, variables={}) => fetch(url, {
 
         method: 'POST',
 
         method: 'POST',
 
@@ -59,6 +60,7 @@ export const actionAuthLogin = token => ({type:'LOGIN', token})
 
 export const actionAuthLogout = () => ({type:'LOGOUT'})
 
 export const actionAuthLogout = () => ({type:'LOGOUT'})
 
 export const actionFullLogin = (login , password) => async dispatch => {
 
 export const actionFullLogin = (login , password) => async dispatch => {
 
   let result = await dispatch(actionPromise("login",log(login,password)))
 
   let result = await dispatch(actionPromise("login",log(login,password)))
 
+  console.log(result)
 
   if (result?.data?.login !== null){
 
   if (result?.data?.login !== null){
 
   dispatch(actionAuthLogin(result.data.login))
 
   dispatch(actionAuthLogin(result.data.login))
 
   }
 
   }
 
@@ -74,7 +76,8 @@ export const actionRegister = (login,password) => async dispatch => {
 
 
 
 export const actionFullRegister = (login,password) => async dispatch => {
 
 export const actionFullRegister = (login,password) => async dispatch => {
 
   let result =  await dispatch (actionRegister(login,password))
 
   let result =  await dispatch (actionRegister(login,password))
 
-  if (result?.errors === undefined) {
 
+  
+  if (result?.data?.createUser !== null) {
 
       await dispatch (actionFullLogin(login,password))
 
       await dispatch (actionFullLogin(login,password))
 
   }
 
   }
 
   else { 
   else { 
@@ -83,3 +86,72 @@ export const actionFullRegister = (login,password) => async dispatch => {
 
   }
 
   }
 
 }
 
 }
 
 
 
+export const imgFind = async() => {
 
+ return await gql(`query fhbg{
 
+    ImageFind(query:"[{}]"){
 
+      url owner{
 
+        nick
 
+      }
 
+    }
 
+  }`)
 
+}
 
+
 
+const userFind = async(id) => {
 
+    let query = `query userOne {
 
+      UserFindOne(query:"[{\"_id\":\"6151892f68554b3e33cd8134\"}]"){
 
+        _id avatar{
 
+          url
 
+        }
 
+      }
 
+    }`
 
+
 
+      let qVariables = {id}
 
+
 
+      let res = await gql(query,qVariables)
 
+      console.log(res)
 
+      return res
 
+}
 
+
 
+let ava = async (idUser , id) => {
 
+  let query = `mutation setAvatar{
 
+    UserUpsert(user:{_id: "6151892f68554b3e33cd8134", avatar: {_id: "61518b0b68554b3e33cd813c"}}){
 
+        _id, avatar{
 
+            _id
 
+        }
 
+    }
 
+}`
 
+let qVariables = {idUser , id}
 
+
 
+let res = await gql(query, qVariables)
 
+return res
 
+}
 
+
 
+export const actionImgFind = () => async dispatch => {
 
+  return await dispatch(actionPromise('img'),imgFind())
 
+}
 
+
 
+
 
+export const actionFindUser = () => async dispatch => {
 
+  return await dispatch (actionPromise('findUser'), userFind(store.getState().auth.payload.sub.id) )
 
+}
 
+
 
+
 
+export const actionSetAvatar = (idUser , id) => async dispatch => {
 
+  return await dispatch (actionPromise('setAvatar') , ava(idUser , id))
 
+}
 
+
 
+export const actionUploadFile = (files) => async dispatch => { 
+  let fd = new FormData()
 
+  fd.append('photo' , files)
 
+  return await dispatch (actionPromise('upload',  fetch('/upload', {
 
+  method: "POST",
 
+  headers: localStorage.authToken ? {Authorization: 'Bearer ' + localStorage.authToken} : {},
 
+  body: fd
 
+}).then(res => res.json())))
 
+}
 
+
 
+export const actionFullAvatar = (idUser , id) => async dispatch => {
 
+ let result = await dispatch (actionUploadFile())
 
+ await dispatch (actionSetAvatar(idUser,id))
 
+}
 
+

+ 53 - 0
projectreact/src/components/avatar
View File 

@@ -0,0 +1,53 @@
 
+import React from 'react'
 
+import ReactDOM from 'react-dom'
 
+import Avatar from 'react-avatar-edit'
 
+
 
+class App extends React.Component {
 
+
 
+  constructor(props) {
 
+    super(props)
 
+    const src = './example/einshtein.jpg'
 
+    this.state = {
 
+      preview: null,
 
+      src
 
+    }
 
+    this.onCrop = this.onCrop.bind(this)
 
+    this.onClose = this.onClose.bind(this)
 
+    this.onBeforeFileLoad = this.onBeforeFileLoad.bind(this)
 
+  }
 
+  
+  onClose() {
 
+    this.setState({preview: null})
 
+  }
 
+  
+  onCrop(preview) {
 
+    this.setState({preview})
 
+  }
 
+
 
+  onBeforeFileLoad(elem) {
 
+    if(elem.target.files[0].size > 71680){
 
+      alert("File is too big!");
 
+      elem.target.value = "";
 
+    };
 
+  }
 
+  
+ 
+}
 
+
 
+const Avatar = () => {
 
+    return (
 
+      <div>
 
+        <Avatar
 
+          width={390}
 
+          height={295}
 
+          onCrop={this.onCrop}
 
+          onClose={this.onClose}
 
+          onBeforeFileLoad={this.onBeforeFileLoad}
 
+          src={this.state.src}
 
+        />
 
+        <img src={this.state.preview} alt="Preview" />
 
+      </div>
 
+    )
 
+    }
 
+
 
+    export default Avatar

+ 17 - 0
projectreact/src/components/coursor.js
View File 

@@ -0,0 +1,17 @@
 
+import React from "react";
 
+import AnimatedCursor from "react-animated-cursor"
 
+
 
+const Coursor = () =>  {
 
+  return (
 
+    <AnimatedCursor
 
+      innerSize={8}
 
+      outerSize={8}
 
+      color='193, 11, 111'
 
+      outerAlpha={0.2}
 
+      innerScale={0.7}
 
+      outerScale={5}
 
+    />
 
+  );
 
+}
 
+
 
+export default Coursor

+ 0 - 8
projectreact/src/components/future-nick.js
View File 

@@ -1,8 +0,0 @@
 
-const NickName =  ({nick}) => {
 
-    return (
 
-      <p></p>,
 
-      <a href = '#'>{nick || 'anon'}</a>
 
-      )
 
-    }
 
-    
-    const ConnectedNick = connect(state => ({nick:state?.auth?.payload?.sub?.login }))(NickName)

+ 17 - 0
projectreact/src/components/header.js
View File 

@@ -0,0 +1,17 @@
 
+import React from "react"
 
+import ConnectedNick from "./nickHeader"
 
+import { connect } from "react-redux"
 
+import Avatar from "react-avatar-edit"
 
+import ImgLogo from "../images/logo"
 
+
 
+const Header = () => {
 
+    return (
 
+<nav className="navbar navbar-expand-lg navbar-light bg-white m-0">
 
+    <ImgLogo px = {'70px'} />
 
+     <ConnectedNick/>
 
+     {/* <Avatar/> */}
 
+</nav>
 
+    )
 
+}
 
+
 
+export default Header

+ 15 - 0
projectreact/src/components/nick.js
View File 

@@ -0,0 +1,15 @@
 
+import { connect } from "react-redux"
 
+
 
+const Nick =  ({nick}) => {
 
+    return (
 
+      <>
 
+      <div>
 
+      <p>{nick}</p>
 
+      </div>
 
+      
+      </>
 
+      )
 
+    }
 
+    
+    const ConnectNickName = connect(state => ({nick:state?.auth?.payload?.sub?.login }))(Nick)
 
+    export default ConnectNickName

+ 18 - 0
projectreact/src/components/nickHeader.js
View File 

@@ -0,0 +1,18 @@
 
+import { connect } from "react-redux"
 
+import AvaLogo from "../images/ava"
 
+
 
+const NickName =  ({nick}) => {
 
+    return (
 
+      <>
 
+      <div style ={{position:'relative', left:'80%'}}>
 
+      <span style ={{color:'black'}}>Your nickname </span>
 
+      <a href = '/cabinet' style = {{textDecoration:'none' , color:"#5F9EA0"}}>{nick} &nbsp;&nbsp;
 
+      <AvaLogo px = '50px'/>
 
+      </a>
 
+      </div>
 
+      </>
 
+      )
 
+    }
 
+    
+    const ConnectedNick = connect(state => ({nick:state?.auth?.payload?.sub?.login }))(NickName)
 
+    export default ConnectedNick

+ 14 - 0
projectreact/src/images/ava.js
View File 

@@ -0,0 +1,14 @@
 
+import React from "react";
 
+import avatar from '../user.png'
 
+import { imgFind } from "../actions";
 
+import {createStore, combineReducers,applyMiddleware } from 'redux';
 
+import { reducers } from "../reducers";
 
+import thunk from "redux-thunk";
 
+const store = createStore(combineReducers(reducers), applyMiddleware(thunk))
 
+
 
+function AvaLogo({px}) {
 
+    // Import result is the URL of your image
 
+    return <img src='http://localhost:3000/images/5d6600e2254cff050d32c6967bcf3104' className = 'ava' alt="avatar" style = {{width: px}} />;
 
+  }
 
+  
+  export default AvaLogo;

+ 8 - 0
projectreact/src/images/logo.js
View File 

@@ -0,0 +1,8 @@
 
+import React from "react";
 
+import logo from '../logo.png'
 
+
 
+function ImgLogo({px}) {
 
+    return <a href="/"> <img src={logo} alt="Logo" style = {{width: px}} /> </a>
 
+  }
 
+  
+  export default ImgLogo;

BIN
projectreact/src/images/logo.png
View File


+ 8 - 0
projectreact/src/images/profile.js
View File 

@@ -0,0 +1,8 @@
 
+import React from "react";
 
+import wall from '../profileWall.jpeg'
 
+
 
+function ImgProfile({px}) {
 
+    return <a href="/"> <img src={wall} alt="wall" style = {{width: px}} /> </a>
 
+  }
 
+  
+  export default ImgProfile;

BIN
projectreact/src/logo.png
View File


+ 33 - 0
projectreact/src/pages/cabinet.js
View File 

@@ -0,0 +1,33 @@
 
+import React from "react";
 
+import { connect } from "react-redux";
 
+import ConnectNickName from "../components/nick";
 
+import AvaLogo from "../images/ava";
 
+import ImgProfile from "../images/profile";
 
+import ConUpload from "./upload";
 
+import { imgFind } from "../actions";
 
+import { actionFindUser } from "../actions";
 
+
 
+const Cabinet = () => {
 
+    return (
 
+    <>
 
+    <div class="container d-flex justify-content-center align-items-center mt-5">
 
+    <div class="card">
 
+        <div class="upper"> <ImgProfile px ={'300px'}/> </div>
 
+        <div class="user text-center">
 
+            <div class="profile mt-3" > <ConUpload width = {'100px'}/> </div>
 
+        </div>
 
+        <div class="mt-5 text-center">
 
+            <h4 class="mb-0"><ConnectNickName/></h4> 
+            <a href="/projects" className = 'text-decoration-none'><h6 >Your projects</h6></a>
 
+            {/* <span class="text-muted d-block mb-2">Los Angles</span>  */}
 
+            <div class="d-flex justify-content-center align-items-center mt-4 px-4">
 
+            <button class="btn btn-primary btn-sm mb-3 " onClick = {console.log('aaa')} >Main Page</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+</div>
 
+    </>
 
+    )
 
+}
 
+
 
+export default Cabinet

+ 91 - 8
projectreact/src/pages/homePage.js
View File 

@@ -1,15 +1,98 @@
 
+
 
 import React from "react";
 
 import React from "react";
 
-import {connect}   from 'react-redux';
 
-import {useState} from "react";
 
-import { Redirect } from "react-router";
 
-import { Link } from "react-router-dom";
 
+import { render } from "react-dom";
 
+import AceEditor from "react-ace";
 
+import Header from "../components/header";
 
+import { useState } from "react";
 
+
 
+import "ace-builds/src-noconflict/mode-html";
 
+import "ace-builds/src-noconflict/mode-css";
 
+import "ace-builds/src-noconflict/mode-javascript";
 
+import "ace-builds/src-noconflict/theme-monokai";
 
+import "ace-builds/src-noconflict/ext-language_tools"
 
+
 
+
 
+
 
+function onChangeHtml(newValue) {
 
+    console.log('html' + ' ' + newValue);
 
+  }
 
+function onChangeCss(newValue) {
 
+    console.log('css' + ' ' + newValue);
 
+  }
 
+function onChangeJs(newValue) {
 
+    console.log('js' + ' ' + newValue);
 
+  }
 
 
 
 const Home = () =>{
 
 const Home = () =>{
 
-    return (
 
+  const [html, setHtml] = useState(onChangeHtml);
 
+  const [css, setCss] = useState(onChangeCss);
 
+  const [js, setJs] = useState(onChangeJs);
 
+    return(
 
         <>
 
         <>
 
-        <h1>HOME</h1>
 
-        <Link to = '/registration'>Reg</Link>
 
-        </>
 
+    <Header/>
 
+    <AceEditor
 
+    width = 'calc(100% / 3)'
 
+    className = 'editor'
 
+    onChange= {onChangeHtml}
 
+  placeholder="Your HTML"
 
+  mode="html"
 
+  theme="monokai"
 
+  name="blah2"
 
+  fontSize={14}
 
+  showPrintMargin={true}
 
+  showGutter={true}
 
+  highlightActiveLine={true}
 
+  value={html}
 
+  setOptions={{
 
+  enableBasicAutocompletion: true,
 
+  enableLiveAutocompletion: true,
 
+  enableSnippets: false,
 
+  showLineNumbers: true,
 
+  tabSize: 2,
 
+  
+  }}/>
 
+ <AceEditor
 
+ width = 'calc(100% / 3)'
 
+ className = 'editor'
 
+ onChange={onChangeCss}
 
+  placeholder="Your CSS"
 
+  mode="css"
 
+  theme="monokai"
 
+  name="blah2"
 
+  fontSize={14}
 
+  showPrintMargin={true}
 
+  showGutter={true}
 
+  highlightActiveLine={true}
 
+  value={css}
 
+  setOptions={{
 
+  enableBasicAutocompletion: true,
 
+  enableLiveAutocompletion: true,
 
+  enableSnippets: false,
 
+  showLineNumbers: true,
 
+  tabSize: 2,
 
+  }}/>
 
+  
+<AceEditor
 
+width = 'calc(100% / 3)'
 
+className ='editor'
 
+onChange={onChangeJs}
 
+  placeholder="Your JavaScript"
 
+  mode="javascript"
 
+  theme="monokai"
 
+  name="blah2"
 
+  fontSize={14}
 
+  showPrintMargin={true}
 
+  showGutter={true}
 
+  highlightActiveLine={true}
 
+  value={js}
 
+  setOptions={{
 
+  enableBasicAutocompletion: true,
 
+  enableLiveAutocompletion: true,
 
+  enableSnippets: true,
 
+  showLineNumbers: true,
 
+  tabSize: 2,
 
+  }}/>
 
+  </>
 
     )
 
     )
 
 }
 
 }

+ 69 - 0
projectreact/src/pages/login.js
View File 

@@ -0,0 +1,69 @@
 
+import { connect } from "react-redux";
 
+import { useState} from "react";
 
+import { actionFullLogin } from "../actions";
 
+import { Redirect } from "react-router-dom";
 
+
 
+const Log = ({ onLog }) => {
 
+    const [login, setLogin] = useState("");
 
+    const [password, setPassword] = useState("");
 
+    const [click , setClick] = useState(false)
 
+        //надо тип инпуту
 
+    //надо проверку на пустоту инпутов и запрет кнопки (disabled)
 
+    //надо при кнопке отправить в onLogin login и пароль. onLogin - это функция-колбэк
 
+    return click ? <Redirect to = "/"/> :
 
+    (
 
+      <>
 
+        <div className="container">    
+        <div id="loginbox" style={{"margin-top":"50px"}} className="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">                    
+            <div className="panel panel-info" >
 
+                    <div className="panel-heading">
 
+                        <div className="panel-title">Sign In</div>
 
+                        <div style={{"float":"right", "font-size": "80%", "position": "relative", "top":"-10px"}}><a href="#">Forgot password?</a></div>
 
+                    </div>     
+
 
+                    <div style={{"padding-top":"30px"}} className="panel-body" >
 
+
 
+                        <div style={{"display":"none"}} id="login-alert" className="alert alert-danger col-sm-12"></div>
 
+                            
+                        <form id="loginform" className="form-horizontal" role="form">
 
+                                    
+                            <div style={{"margin-bottom": "25px"}} className="input-group">
 
+                                        <span className="input-group-addon"><i className="glyphicon glyphicon-user"></i></span>
 
+                                        <input id="login-username" type="text" className="form-control" name="username" value={login} onChange={(e) => setLogin(e.target.value)} placeholder="Login"/>                                        
+                                    </div>
 
+                                
+                            <div style={{"margin-bottom": "25px"}} className="input-group">
 
+                                        <span className="input-group-addon"><i className="glyphicon glyphicon-lock"></i></span>
 
+                                        <input id="login-password" type="password" className="form-control" name="password" placeholder="Password" value = {password} onChange={(e) => setPassword(e.target.value)}/>
 
+                                    </div>
 
+                                <div style={{'margin-top':"10px"}} className="form-group">
 
+                                    <div className="col-sm-12 controls">
 
+                                      <a id="btn-login" href="#" className="btn btn-success" onClick={() => (onLog(login, password),setClick(true))}>Login  </a>
 
+
 
+                                    </div>
 
+                                </div>
 
+
 
+
 
+                                <div className="form-group">
 
+                                    <div className="col-md-12 control">
 
+                                        <div style={{"border-top": "1px solid#888", "padding-top":"15px", "font-size":"85%"}}>
 
+                                        <a href="/registration">
 
+                                            Sign Up Here
 
+                                        </a>
 
+                                        </div>
 
+                                    </div>
 
+                                </div>    
+                            </form>     
+
 
+
 
+
 
+                        </div>                     
+                    </div>  
+        </div>
 
+    </div>
 
+        
+      </>
 
+    );
 
+  };
 
+  
+  export const LogForm = connect(null, {onLog: actionFullLogin})(Log)

+ 9 - 0
projectreact/src/pages/projects.js
View File 

@@ -0,0 +1,9 @@
 
+import React from "react";
 
+
 
+const Projects = () => {
 
+    return (
 
+    <h1>Your projects</h1>
 
+    )
 
+}
 
+
 
+export default Projects

+ 59 - 21
projectreact/src/pages/reg.js
View File 

@@ -4,27 +4,65 @@ import { actionFullRegister } from "../actions";
 
 import { Redirect } from "react-router-dom";
 
 import { Redirect } from "react-router-dom";
 
 
 
 const Reg = ({ onReg }) => {
 
 const Reg = ({ onReg }) => {
 
-    const [login, setLogin] = useState("");
 
-    const [password, setPassword] = useState("");
 
-    //надо тип инпуту
 
-    //надо проверку на пустоту инпутов и запрет кнопки (disabled)
 
-    //надо при кнопке отправить в onLogin login и пароль. onLogin - это функция-колбэк
 
-    return (
 
-      <>
 
-        <input value={login} onChange={(e) => setLogin(e.target.value)} />
 
-        <input
 
-          type="password"
 
-          value={password}
 
-          onChange={(e) => setPassword(e.target.value)}
 
-        />
 
-        <button
 
-          onClick={() => onReg(login, password)}
 
-          disabled={!login || !password}
 
-        >
 
-          Sign in
 
-        </button>
 
-        
-      </>
 
+  const [login, setLogin] = useState("");
 
+  const [password, setPassword] = useState("");
 
+  const [click , setClick] = useState(false)
 
+      //надо тип инпуту
 
+  //надо проверку на пустоту инпутов и запрет кнопки (disabled)
 
+  //надо при кнопке отправить в onLogin login и пароль. onLogin - это функция-колбэк
 
+  return click ? <Redirect to = "/"/> :
 
+  (
 
+    <>
 
+      <div className="container">    
+      <div id="loginbox" style={{"margin-top":"50px"}} className="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">                    
+          <div className="panel panel-info" >
 
+                  <div className="panel-heading">
 
+                      <div className="panel-title">Sign In</div>
 
+                      <div style={{"float":"right", "font-size": "80%", "position": "relative", "top":"-10px"}}><a href="#">Forgot password?</a></div>
 
+                  </div>     
+
 
+                  <div style={{"padding-top":"30px"}} className="panel-body" >
 
+
 
+                      <div style={{"display":"none"}} id="login-alert" className="alert alert-danger col-sm-12"></div>
 
+                          
+                      <form id="loginform" className="form-horizontal" role="form">
 
+                                  
+                          <div style={{"margin-bottom": "25px"}} className="input-group">
 
+                                      <span className="input-group-addon"><i className="glyphicon glyphicon-user"></i></span>
 
+                                      <input id="login-username" type="text" className="form-control" name="username" value={login} onChange={(e) => setLogin(e.target.value)} placeholder="Login"/>                                        
+                                  </div>
 
+                              
+                          <div style={{"margin-bottom": "25px"}} className="input-group">
 
+                                      <span className="input-group-addon"><i className="glyphicon glyphicon-lock"></i></span>
 
+                                      <input id="login-password" type="password" className="form-control" name="password" placeholder="Password" value = {password} onChange={(e) => setPassword(e.target.value)}/>
 
+                                  </div>
 
+                              <div style={{'margin-top':"10px"}} className="form-group">
 
+                                  <div className="col-sm-12 controls">
 
+                                    <a id="btn-login" href="#" className="btn btn-success" onClick={() => (onReg(login, password),setClick(true))}>Sign up  </a>
 
+
 
+                                  </div>
 
+                              </div>
 
+
 
+
 
+                              <div className="form-group">
 
+                                  <div className="col-md-12 control">
 
+                                      <div style={{"border-top": "1px solid#888", "padding-top":"15px", "font-size":"85%"}}>
 
+                                      <a href="/login">
 
+                                          Login Here
 
+                                      </a>
 
+                                      </div>
 
+                                  </div>
 
+                              </div>    
+                          </form>     
+
 
+
 
+
 
+                      </div>                     
+                  </div>  
+      </div>
 
+  </div>
 
+      
+    </>
 
     );
 
     );
 
   };
 
   };

+ 42 - 0
projectreact/src/pages/upload.js
View File 

@@ -0,0 +1,42 @@
 
+import React, { useRef } from 'react';
 
+import {useDropzone} from 'react-dropzone';
 
+import Coursor from '../components/coursor';
 
+import { actionUploadFile } from '../actions';
 
+import { connect } from 'react-redux';
 
+import AvaLogo from '../images/ava';
 
+
 
+
 
+// const Upload = () => {
 
+//     const formRef = useRef(null)
 
+//     return (
 
+//     <>
 
+// <form action="/upload" method="post" enctype="multipart/form-data" ref={formRef}>
 
+//   <input type="file" name="photo" id='photo'onChange = {async () => {
 
+//     fetch('/upload', {
 
+//         method: "POST",
 
+//         headers: localStorage.authToken ? {Authorization: 'Bearer ' + localStorage.authToken} : {},
 
+//         body: new FormData(formRef.current)
 
+//     })
 
+// }
 
+//   }/>
 
+// </form>
 
+// </>
 
+//     )
 
+// }
 
+
 
+const Upload = ({onUpload , width , up}) => {
 
+  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();
 
+  let files = acceptedFiles.map (file => onUpload(file))
 
+  return (
 
+      <div {...getRootProps({className: 'dropzone'})} style = {{display:'inline'}}>
 
+        <input {...getInputProps()} />
 
+        <AvaLogo px = {width}/>
 
+        <h1>{up}</h1>
 
+      </div>
 
+   
+  );
 
+}
 
+
 
+const ConUpload = connect(state => ({up:state?.promise?.upload?.[1]._id })  , {onUpload:actionUploadFile})(Upload)
 
+
 
+export default ConUpload;

BIN
projectreact/src/profileWall.jpeg
View File


+ 3 - 5
projectreact/src/reducers/index.js
View File 

@@ -26,7 +26,6 @@ function authReducer(state, action){ //....
 
     if (action.type === 'LOGIN'){
 
     if (action.type === 'LOGIN'){
 
         console.log('ЛОГИН')
 
         console.log('ЛОГИН')
 
         localStorage.authToken = action.token
 
         localStorage.authToken = action.token
 
-        console.log(action.token)
 
         function jwt_decode (token) {
 
         function jwt_decode (token) {
 
             var start64Url = token.split('.')[1]
 
             var start64Url = token.split('.')[1]
 
             return JSON.parse(atob(start64Url))
 
             return JSON.parse(atob(start64Url))
 
@@ -41,13 +40,12 @@ function authReducer(state, action){ //....
 
     }
 
     }
 
     return state
 
     return state
 
 }
 
 }
 
-
 
-
 
-let reducers = {
 
+export const reducers = {
 
     promise:promiseReducer,
 
     promise:promiseReducer,
 
     auth:authReducer
 
     auth:authReducer
 
 }
 
 }
 
 
 
-const store = createStore(combineReducers(reducers), applyMiddleware(thunk))
 
+export const store = createStore(combineReducers(reducers), applyMiddleware(thunk))
 
+const unsubscribe = store.subscribe(() => console.log('result here',store.getState()))
 
 
 
 export default store
 
 export default store

BIN
projectreact/src/user.png
View File