test version: holding username and password in global state

Author: akbuma

package.json

@@ -145,7 +145,7 @@
     "react-dom": "^16.4.1",
     "react-draggable": "^3.0.5",
     "react-konva": "^16.12.0-0",
-    "react-redux": "^5.0.7",
+    "react-redux": "^7.2.0",
     "react-simple-code-editor": "^0.11.0",
     "react-sortable-tree": "^2.2.0",
     "react-syntax-highlighter": "^10.2.1",

src/components/login/SignIn.tsx

@@ -1,4 +1,9 @@
-import React from 'react';
+import React, { Component } from 'react';
+import { connect } from 'react';
+import { LoginInt } from '../../interfaces/Interfaces';
+import { setUsername, setPassword } from '../../actions/actionCreators';
+import { useSelector } from 'react-redux';
+
 import Avatar from '@material-ui/core/Avatar';
 import Button from '@material-ui/core/Button';
 import CssBaseline from '@material-ui/core/CssBaseline';
@@ -10,15 +15,31 @@ import Grid from '@material-ui/core/Grid';
 import Box from '@material-ui/core/Box';
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
+import { render } from 'enzyme';
+
+const mapStateToProps = (store: any) => ({
+  username: store.credentials.username,
+  password: store.credentials.password
+})
+
+const mapDispatchToProps = (dispatch: any) => ({
+  setUsername: (username: string) => dispatch(setUsername(username)),
+  setPassword: (password: string) => dispatch(setPassword(password))
+})
+
+interface LoginProps extends LoginInt {
+  setUsername(username: string): void,
+  setPassword(username: string): void
+}
 
 function Copyright() {
   return (
     <Typography variant="body2" color="textSecondary" align="center">
       {'Copyright © '}
       <Link color="inherit" href="https://material-ui.com/">
-        Your Website
+        ReacType
       </Link>{' '}
       {new Date().getFullYear()}
       {'.'}
@@ -46,8 +67,9 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default function SignIn() {
+const SignIn: React.FC<LoginProps> = (props) => {
   const classes = useStyles();
+  const count = useSelector(state => state);
 
   return (
     <Container component="main" maxWidth="xs">
@@ -114,4 +136,6 @@ export default function SignIn() {
       </Box>
     </Container>
   );
-}
+}
+
+export default SignIn;

src/index.js

@@ -7,18 +7,16 @@ import store from './store';
 
 import SignIn from './components/login/SignIn.tsx';
 
-
+/*
 ReactDOM.render(
   <Provider store={store}>
     <App />
   </Provider>,
   document.getElementById('app'),
 );
+*/
 
-
-/*
 ReactDOM.render(
-  <SignIn/>,
+  <Provider store={store}><SignIn/></Provider>,
   document.getElementById('app'),
 );
-*/