add use context

Author: fluid14

.gitignore

@@ -5,6 +5,9 @@
 /.pnp
 .pnp.js
 
+.idea/
+.idea/*
+
 # testing
 /coverage
 

.idea/inspectionProfiles/Project_Default.xml

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^7.2.1",
     "axios": "^0.19.2",
     "bootstrap": "^4.4.1",
+    "dotenv": "^8.2.0",
     "eslint": "^6.6.0",
     "formik": "^2.1.4",
     "google-map-react": "^1.1.7",
@@ -60,5 +61,6 @@
     "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-react-hooks": "^1.7.0",
     "prettier": "^1.19.1"
-  }
+  },
+  "proxy": "http://127.0.0.1:5000"
 }

package.json

@@ -17,6 +17,7 @@ const Wrap = styled.div`
   position: fixed;
   top: 0;
   left: 0;
+  z-index: 9999;
 `;
 
 const NavBar = () => {

src/components/NavBar/NavBar.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const UserContext = React.createContext({
+  userContext: {
+    username: '',
+    id: '',
+    role: '',
+  },
+});
+
+export default UserContext;

src/context/userContext/UserContext.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ThemeC ontext } from './theme-context';
+
+export default class ThemeProvider extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      setColor: this.setColor.bind(this),
+      color: 'yellow',
+    };
+  }
+  setColor(color) {
+    this.setState({ color });
+  }
+  render() {
+    return (
+      <ThemeContext.Provider
+        value={{
+          themeContext: {
+            ...this.state,
+          },
+        }}
+      >
+        {this.props.children}
+      </ThemeContext.Provider>
+    );
+  }
+}

src/context/userContext/UserContextProvider.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import UserContext from './UserContext';
+
+export function withTheme(Component) {
+  return function UserComponent(props) {
+    return (
+      <UserContext.Consumer>
+        {contexts => <Component {...props} {...contexts} />}
+      </UserContext.Consumer>
+    );
+  };
+}

src/context/userContext/withUserContext.js

@@ -1,19 +1,28 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import GlobalStyle from 'theme/GlobalStyle';
 import theme from 'theme/theme';
 import { ThemeProvider } from 'styled-components/macro';
-// import Preloader from '../components/Preloader/Preloader';
 
-const GlobalTemplate = ({ children }) => (
-  <>
-    <ThemeProvider theme={theme}>
-      <GlobalStyle />
-      {/*<Preloader/>*/}
-      {children}
-    </ThemeProvider>
-  </>
-);
+class GlobalTemplate extends Component {
+  state = {
+    user: {
+      userName: '',
+      id: '',
+      role: '',
+    },
+  };
+
+  render() {
+    const { children } = this.props;
+    return (
+      <ThemeProvider theme={theme}>
+        <GlobalStyle />
+        {children}
+      </ThemeProvider>
+    );
+  }
+}
 
 GlobalTemplate.propTypes = {
   children: PropTypes.element.isRequired,

src/templates/GlobalTemplate.js

@@ -1,6 +1,10 @@
 import React from 'react';
 import styled from 'styled-components/macro';
-import { Col, Row, Button, Form, FormGroup, Label, Input, Container } from 'reactstrap';
+import { Col, Row, Button, FormGroup, Label, Container } from 'reactstrap';
+import { Formik, Form as FormikForm, Field } from 'formik';
+
+import axios from 'axios';
+import context from 'react-router/modules/RouterContext';
 
 const LoginWrap = styled.div`
   width: 100%;
@@ -22,25 +26,49 @@ const LoginView = () => (
       <p className="lead d-block mb-0">Jakub Dolata</p>
       <p className="lead d-block">Filip Baumgart</p>
     </TitleContainer>
-    <Row class="mt-5">
+    <Row className="mt-5">
       <Col md={12}>
-        <Form>
-          <Row form>
-            <Col md={12}>
-              <FormGroup>
-                <Label for="login">Login</Label>
-                <Input type="text" name="login" id="login" />
-              </FormGroup>
-            </Col>
-            <Col md={12}>
-              <FormGroup>
-                <Label for="password">Hasło</Label>
-                <Input type="password" name="password" id="password" />
-              </FormGroup>
-            </Col>
-          </Row>
-          <Button>Zaloguj się</Button>
-        </Form>
+        <Formik
+          initialValues={{ username: '', password: '' }}
+          onSubmit={(values, { setSubmitting }) => {
+            // const api = process.env.API_URL;
+            const { username, password } = values;
+            axios
+              .post('http://127.0.0.1:5000/login', {
+                username: username,
+                password: password,
+              })
+              .then(function(response) {
+                console.log(response);
+              })
+              .catch(function(error) {
+                console.log(error);
+              });
+            setSubmitting(false);
+          }}
+        >
+          {({ isSubmitting }) => (
+            <FormikForm>
+              <Row form>
+                <Col md={12}>
+                  <FormGroup>
+                    <Label for="username">Login</Label>
+                    <Field type="text" className="form-control" name="username" required />
+                  </FormGroup>
+                </Col>
+                <Col md={12}>
+                  <FormGroup>
+                    <Label for="password">Hasło</Label>
+                    <Field type="password" className="form-control" name="password" required />
+                  </FormGroup>
+                </Col>
+              </Row>
+              <Button type="submit" color="info" disabled={isSubmitting}>
+                Zaloguj
+              </Button>
+            </FormikForm>
+          )}
+        </Formik>
       </Col>
     </Row>
   </LoginWrap>