diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..c5c6e8a --- /dev/null +++ b/src/App.css @@ -0,0 +1,28 @@ +.App { + text-align: center; +} + +.App-logo { + animation: App-logo-spin infinite 20s linear; + height: 80px; +} + +.App-header { + background-color: #222; + height: 150px; + padding: 20px; + color: white; +} + +.App-title { + font-size: 1.5em; +} + +.App-intro { + font-size: large; +} + +@keyframes App-logo-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..5a2a38a --- /dev/null +++ b/src/App.js @@ -0,0 +1,31 @@ +import React, { Component } from 'react'; +import logo from './logo.svg'; +import './App.css'; +import {In} from './components/sign-in/sign-in'; +import Up from './components/sign-up/sign-up'; +import User from './components/user/user'; +import ReactDOM from 'react-dom'; +import { + Link, + BrowserRouter, + Route, + Switch, + withRouter, + +} from "react-router-dom"; + +class App extends Component { + render() { + + return ( +
+ + + + +
+ ); + } +} + +export default App; diff --git a/src/App.test.js b/src/App.test.js new file mode 100644 index 0000000..a754b20 --- /dev/null +++ b/src/App.test.js @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + ReactDOM.unmountComponentAtNode(div); +}); diff --git a/src/actions.js b/src/actions.js new file mode 100644 index 0000000..71b1711 --- /dev/null +++ b/src/actions.js @@ -0,0 +1,6 @@ +export const incrementCounter = (payload) => { + return { + type: 'INCREMENT', + payload, + }; +}; diff --git a/src/components/sign-in/sign-in.css b/src/components/sign-in/sign-in.css new file mode 100644 index 0000000..2f8e879 --- /dev/null +++ b/src/components/sign-in/sign-in.css @@ -0,0 +1,31 @@ +body { + margin: 0; + padding: 0; + font-family: sans-serif; +} +#first { + height: 100px; + width: 100%; + border: 4px solid black; +} +#signIn { + float: right; + margin: 20px; + padding: 20px; +} +#logo { + float: right; + margin: 20px; + padding: 20px; +} +#up { + width: 50%; + border: 4px solid black; + margin-top: 100px; + padding: 20px; +} +#signUp { + float: right; + margin: 20px; + padding: 20px; +} \ No newline at end of file diff --git a/src/components/sign-in/sign-in.js b/src/components/sign-in/sign-in.js new file mode 100644 index 0000000..f577067 --- /dev/null +++ b/src/components/sign-in/sign-in.js @@ -0,0 +1,132 @@ +import React, {Component} from 'react'; +import { + Link, + BrowserRouter, + Route, + Switch, + withRouter, + browserHistory +} from "react-router-dom"; +import {connect} from 'react-redux'; +import './sign-in.css' +import {incrementCounter} from '../../actions'; + + +let url3 = 'https://flatearth-api.herokuapp.com/api/v1/auth/login' +let url = 'https://flatearth-api.herokuapp.com/api/v1/auth/secret/' + +var user1 = { + user:"", + password:"" +} + + +class Inn extends Component{ + state = { + userS: '', + passwordS: '', + status: [] + }; + + inputChangeUser = (event)=> { + this.setState({ + userS: event.target.value, + }); + } + inputChangePassword = (event)=> { + this.setState({ + passwordS: event.target.value, + }); + } + addToUser =()=>{ + const {emailS,userS,passwordS} = this.state; + + user1.user = userS + user1.password = passwordS + fetch( url3 , { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(user1) + }).then(user => { + return user.json() + }).then(status => { + this.setState({status}) + + fetch( url , { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${status.message.token}` + }, + + }).then(user => { + return user.json() + }).then(secret => { + this.setState({secret}) + const {incrementCounter}=this.props; + //incrementCounter(status.message.token) + incrementCounter( secret.message) + }); + + }); + + } + + render(){ + const {userS,passwordS,status} = this.state; + + + return( +
+
+
+
Sign-Up
+ +
+
+
+
+
+

well come flat earch

+
+ + Username
+ Password +
+ +

запомнить

+
+ +
+
+
+
+ ) + } +} + + +const mapStateToProps = (state) => { + console.log(state) + return { + counter: state.counter, + redux: 'is a power' + }; +}; + +const mapDispatchToProps = { + incrementCounter, + +}; + +export const In = connect(mapStateToProps, mapDispatchToProps)(Inn); + + diff --git a/src/components/sign-up/sign-up.css b/src/components/sign-up/sign-up.css new file mode 100644 index 0000000..239a0a2 --- /dev/null +++ b/src/components/sign-up/sign-up.css @@ -0,0 +1,31 @@ +body { + margin: 0; + padding: 0; + font-family: sans-serif; +} +#second { + width: 50%; + border: 4px solid black; + margin-top: 100px; +} +#signIn { + float: right; + margin: 20px; + padding: 20px; +} +#logo { + float: right; + margin: 20px; + padding: 20px; +} +#up { + width: 50%; + border: 4px solid black; + margin-top: 100px; + padding: 20px; +} +#signUp { + float: right; + margin: 20px; + padding: 20px; +} \ No newline at end of file diff --git a/src/components/sign-up/sign-up.js b/src/components/sign-up/sign-up.js new file mode 100644 index 0000000..01d8ac4 --- /dev/null +++ b/src/components/sign-up/sign-up.js @@ -0,0 +1,104 @@ +import React, {Component} from 'react'; +import { + Link, + BrowserRouter, + Route, + Switch, + withRouter, + +} from "react-router-dom"; +import './sign-up.css' + +var user1 = { + email:"", + user:"", + password:"" +} +let url2 = 'https://flatearth-api.herokuapp.com/api/v1/auth/signup' +class Up extends Component{ + constructor(props){ + super(props); + this.state = { + emailS: '', + userS: '', + passwordS: '', + }; + } + + + inputChangeEmail = (event)=> { + this.setState({ + emailS: event.target.value, + }); + } + inputChangeUser = (event)=> { + this.setState({ + userS: event.target.value, + }); + } + inputChangePassword = (event)=> { + this.setState({ + passwordS: event.target.value, + }); + } + + addToUser =()=>{ + const {emailS,userS,passwordS} = this.state; + + user1.email = emailS + user1.user = userS + user1.password = passwordS + fetch( url2 , { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(user1) + }).then(user => { + return user.json() + }).then(us => { + console.log(us); + }); + console.log(user1); + } + + + + + render(){ + const {emailS,userS,passwordS} = this.state; + + + return( +
+
+
+
Sign-In
+ +
+
+
+
+ email
+
+ name
+
+ password
+
+ +
+
+
+ ) + } +} +export default Up; \ No newline at end of file diff --git a/src/components/user/user.js b/src/components/user/user.js new file mode 100644 index 0000000..c220119 --- /dev/null +++ b/src/components/user/user.js @@ -0,0 +1,67 @@ +import React, {Component} from 'react'; +import { + Link, + BrowserRouter, + Route, + Switch, + withRouter, + browserHistory +} from "react-router-dom"; +import {connect} from 'react-redux'; +let url = 'https://flatearth-api.herokuapp.com/api/v1/auth/secret/' + + +class User extends Component{ + + render(){ + + +const {token1} = this.props; +var Li = ()=>{ + console.log(`token1`, token1) + var obj = token1; + var f = []; + for (var prop in obj) { + console.log(`obj`, obj[prop].name) + f.push(obj[prop].name) + } + console.log(`f`, f) + return f.map((element,j) => { + return
  • +
    + {element} +
    +
    • + }); +} + return( +
    +
    +
    +
    Sign-In
    + +
    +
    + +
    +
    + + + +
    + ) + } +} + + +let mapStateToProps = (state) => { + console.log(`stateghjkgkkg`, state.counter.counter) + + return { + token1: state.counter.counter + } +} +export default connect(mapStateToProps)(User); \ No newline at end of file diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..b4cc725 --- /dev/null +++ b/src/index.css @@ -0,0 +1,5 @@ +body { + margin: 0; + padding: 0; + font-family: sans-serif; +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..06e50b9 --- /dev/null +++ b/src/index.js @@ -0,0 +1,27 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; +import {Provider} from 'react-redux'; + +import 'bootstrap/dist/css/bootstrap.css' +import allReducers from './reducers/index' +import {store} from './store'; +import { + Link, + BrowserRouter, + Route, + Switch, + withRouter, +} from "react-router-dom"; + +//const store = createStore(allReducers); + +ReactDOM.render( + + + + + , + document.getElementById('root')); + diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 0000000..6b60c10 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/reducers/index.js b/src/reducers/index.js new file mode 100644 index 0000000..60d54e7 --- /dev/null +++ b/src/reducers/index.js @@ -0,0 +1,11 @@ +import {combineReducers} from 'redux'; +import Recipes from './recipes'; +//import In from '../components/sign-in/sign-in'; + +const allReducers = combineReducers ({ + recipes: Recipes, + //in: In, + +}); + +export default allReducers; \ No newline at end of file diff --git a/src/reducers/recipes.js b/src/reducers/recipes.js new file mode 100644 index 0000000..8cb7299 --- /dev/null +++ b/src/reducers/recipes.js @@ -0,0 +1,13 @@ +var Recipes = () => { + return [ + { + id: 1, + name: 'Борщ', + ingridients: [ + 'cabadge','carot' + ] + + }] +} + +export default Recipes diff --git a/src/reducers/reducer.js b/src/reducers/reducer.js new file mode 100644 index 0000000..3c0cc52 --- /dev/null +++ b/src/reducers/reducer.js @@ -0,0 +1,21 @@ +import {combineReducers} from 'redux'; + +const initialState = {counter: 0}; +export const counterReducer = (state = initialState, action) => { + switch (action.type) { + case 'INCREMENT': { + return { + ...state, + counter: action.payload, + }; + } + + default: { + return state; + } + } +}; + +export const reducer = combineReducers({ + counter: counterReducer, +}); \ No newline at end of file diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js new file mode 100644 index 0000000..a3e6c0c --- /dev/null +++ b/src/registerServiceWorker.js @@ -0,0 +1,117 @@ +// In production, we register a service worker to serve assets from local cache. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on the "N+1" visit to a page, since previously +// cached resources are updated in the background. + +// To learn more about the benefits of this model, read https://goo.gl/KwvDNy. +// This link also includes instructions on opting out of this behavior. + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.1/8 is considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + +export default function register() { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (isLocalhost) { + // This is running on localhost. Lets check if a service worker still exists or not. + checkValidServiceWorker(swUrl); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service ' + + 'worker. To learn more, visit https://goo.gl/SC7cgQ' + ); + }); + } else { + // Is not local host. Just register service worker + registerValidSW(swUrl); + } + }); + } +} + +function registerValidSW(swUrl) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the old content will have been purged and + // the fresh content will have been added to the cache. + // It's the perfect time to display a "New content is + // available; please refresh." message in your web app. + console.log('New content is available; please refresh.'); + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + if ( + response.status === 404 || + response.headers.get('content-type').indexOf('javascript') === -1 + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl); + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.' + ); + }); +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready.then(registration => { + registration.unregister(); + }); + } +} diff --git a/src/store.js b/src/store.js new file mode 100644 index 0000000..c4ece87 --- /dev/null +++ b/src/store.js @@ -0,0 +1,7 @@ +import {createStore, applyMiddleware} from 'redux'; + + +import {reducer} from './reducers/reducer'; + + +export const store = createStore(reducer); \ No newline at end of file