Merge pull request #17 from oslabs-beta/addReduxAndMikos

Fixed demo render, live preview, darkmode, and misc visual bugs

Author: kr1spybacon

app/src/components/bottom/CodePreview.tsx

@@ -45,11 +45,6 @@ const CodePreview: React.FC<{
   );
 
   const [input, setInput] = useState();
-  
-  useEffect(() => {
-    console.log('CodePreview input', input);
-    console.log('currentComponent.code', currentComponent.code);
-  }, [input])
 
   useEffect(() => {
     startService();

app/src/components/form/Selector.tsx

@@ -8,7 +8,7 @@ const FormSelector = (props): JSX.Element => {
   const items = [];
   let key = 1;
   props.items.forEach(el => {
-    items.push(<MenuItem value={el.value} key={`menu${key}`}>{el.text}</MenuItem>);
+    items.push(<MenuItem style={{ color: 'black' }} value={el.value} key={`menu${key}`}>{el.text}</MenuItem>);
     key++
   })
   return (

app/src/components/left/DragDropPanel.tsx

@@ -28,7 +28,7 @@ const DragDropPanel = (props): JSX.Element => {
   };
 
   // filter out separator so that it will not appear on the html panel
-  const htmlTypesToRender = state.HTMLTypes.filter(type => type.name !== 'separator' && type.name !== 'Route');
+  const htmlTypesToRender = state.HTMLTypes.filter(type => type.name !== 'separator');
   return (
     <div className="HTMLItems">
       <div id="HTMLItemsTopHalf">
@@ -37,7 +37,7 @@ const DragDropPanel = (props): JSX.Element => {
         >
           <h3 style={ {color: isThemeLight ? '#000' : '#fff'} }>HTML ELEMENTS</h3>
           {htmlTypesToRender.map(option => {
-            if (!['Switch', 'LinkTo', 'LinkHref', 'Image'].includes(option.name)) {
+            if (!['Switch', 'LinkTo', 'LinkHref', 'Image', 'Route'].includes(option.name)) {
               return (
                 <HTMLItem
                   name={option.name}
@@ -53,7 +53,7 @@ const DragDropPanel = (props): JSX.Element => {
           })}
           {state.projectType === "Classic React" ? <h3 style={ {color: isThemeLight ? '#000' : '#fff' } }>REACT ROUTER</h3> : null}
           {htmlTypesToRender.map(option => {
-            if ((option.name === 'Switch' || option.name === 'LinkTo') && state.projectType === "Classic React") {
+            if ((option.name === 'Switch' || option.name === 'LinkTo' || option.name === 'Route') && state.projectType === "Classic React") {
               return (
                 <HTMLItem
                   name={option.name}

app/src/components/left/HTMLPanel.tsx

@@ -172,6 +172,11 @@ const HTMLPanel = (props): JSX.Element => {
                 onChange={handleTagChange}
                 className={isThemeLight ? `${classes.input} ${classes.lightThemeFontColor}` : `${classes.input} ${classes.darkThemeFontColor}`}
                 style={{ margin: '10px' }}
+                InputProps={{
+                  style: {
+                    color: isThemeLight ? 'black' : 'white'
+                  }
+                }}
               />
 
               {(!tag.charAt(0).match(/[A-Za-z]/) || !alphanumeric(tag) || tag.trim() === '' || checkNameDupe(tag))
@@ -192,8 +197,14 @@ const HTMLPanel = (props): JSX.Element => {
               onChange={handleNameChange}
               autoComplete="off"
               className={isThemeLight ? `${classes.input} ${classes.lightThemeFontColor}` : `${classes.input} ${classes.darkThemeFontColor}`}
-              style={{ margin: '10px' }}
+              style={{}}
+              InputProps={{
+                style: {
+                  color: isThemeLight ? 'black' : 'white'
+                }
+              }}
             />
+            
 
             {(!name.charAt(0).match(/[A-Za-z]/) || !alphanumeric(name) || name.trim() === '' || name.length > 10 || checkNameDupe(name))
               && <span className={isThemeLight ? `${classes.errorMessage} ${classes.errorMessageLight}` : `${classes.errorMessage} ${classes.errorMessageDark}`}>
@@ -244,8 +255,8 @@ const useStyles = makeStyles({
     textOverflow: 'ellipsis',
     backgroundColor: 'rgba(255,255,255,0.15)',
     margin: '0px 0px 0px 0px',
-    width: '160px',
-    height: '30px',
+    // width: '200px',
+    // height: '75px',
     alignSelf: 'center',
     border: '2px solid grey'
   },

app/src/components/login/SignIn.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect, createContext } from 'react';
 import { LoginInt } from '../../interfaces/Interfaces';
 import {
   Link as RouteLink,
@@ -18,6 +18,25 @@ import Container from '@material-ui/core/Container';
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 import { newUserIsCreated } from '../../helperFunctions/auth';
 import randomPassword from '../../helperFunctions/randomPassword';
+import { connect } from 'react-redux';
+import * as actions from '../../redux/actions/actions.js';
+
+import { MuiThemeProvider } from '@material-ui/core/styles';
+import { SigninDark, SigninLight } from '../../../../app/src/public/styles/theme';
+import Brightness3Icon from '@material-ui/icons/Brightness3';
+import Brightness5Icon from '@material-ui/icons/Brightness5';
+
+const mapDispatchToProps = (dispatch) => ({
+  darkModeToggle: () => {
+    dispatch(actions.darkModeToggle());
+  }
+});
+
+const mapStateToProps = (state) => {
+  return {
+    darkMode: state.darkModeSlice.darkMode
+  }
+};
 
 function Copyright() {
   return (
@@ -184,95 +203,115 @@ const SignIn: React.FC<LoginInt & RouteComponentProps> = props => {
     'MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-submit-4 MuiButton-fullWidth';
 
   return (
-    <Container component="main" maxWidth="xs">
-      <CssBaseline />
-      <div className={classes.paper}>
-        <Avatar className={classes.avatar}>
-          <LockOutlinedIcon />
-        </Avatar>
-        <Typography component="h1" variant="h5" color="textPrimary">
-          Sign in
-        </Typography>
-        <TextField
-          className={classes.root}
-          variant="outlined"
-          margin="normal"
-          required
-          fullWidth
-          id="username"
-          label="Username"
-          name="username"
-          autoComplete="username"
-          autoFocus
-          value={username}
-          onChange={handleChange}
-          helperText={invalidUserMsg}
-          error={invalidUser}
-        />
-        <TextField
-          className={classes.root}
-          variant="outlined"
-          margin="normal"
-          required
-          fullWidth
-          name="password"
-          label="Password"
-          type="password"
-          id="password"
-          autoComplete="current-password"
-          value={password}
-          onChange={handleChange}
-          helperText={invalidPassMsg}
-          error={invalidPass}
-        />
+    <MuiThemeProvider theme={!props.darkMode ? SigninLight : SigninDark}>
+      <Container component="main" maxWidth="xs">
+        <CssBaseline />
+        <div className={classes.paper}>
+          <Button
+            color="primary"
+            style={{ 
+              minWidth: '113.97px',
+              top: 10,
+              right: 20,
+              position: "absolute"
+            }}
+            // variant="contained"
+            endIcon={
+              props.darkMode ? <Brightness3Icon /> : <Brightness5Icon />
+            }
+            onClick={() => {
+              props.darkModeToggle();
+            }}
+          >
+            {`Dark Mode: ${props.darkMode}`}
+          </Button>
+          <Avatar className={classes.avatar}>
+            <LockOutlinedIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5" color="textPrimary">
+            Sign in
+          </Typography>
+          <TextField
+            className={classes.root}
+            variant="outlined"
+            margin="normal"
+            required
+            fullWidth
+            id="username"
+            label="Username"
+            name="username"
+            autoComplete="username"
+            autoFocus
+            value={username}
+            onChange={handleChange}
+            helperText={invalidUserMsg}
+            error={invalidUser}
+          />
+          <TextField
+            className={classes.root}
+            variant="outlined"
+            margin="normal"
+            required
+            fullWidth
+            name="password"
+            label="Password"
+            type="password"
+            id="password"
+            autoComplete="current-password"
+            value={password}
+            onChange={handleChange}
+            helperText={invalidPassMsg}
+            error={invalidPass}
+          />
 
-        <Button
-          fullWidth
-          id="SignIn"
-          variant="contained"
-          color="default"
-          className={classes.submit}
-          onClick={e => handleLogin(e)}
-        >
-          Sign In
-        </Button>
-        <Button
-          fullWidth
-          id="SignInWithGithub"
-          variant="contained"
-          color="default"
-          className={classes.submit}
-          onClick={e => handleGithubLogin(e)}
-        >
-          Sign In With Github
-        </Button>
-        <Button
-          fullWidth
-          variant="contained"
-          color="default"
-          className={classes.submit}
-          onClick={e => handleLoginGuest(e)}
-        >
-          Continue as Guest
-        </Button>
-        <Grid container>
-          <Grid item xs>
-            <RouteLink to={`/signup`} className="nav_link">
-              Forgot password?
-            </RouteLink>
-          </Grid>
-          <Grid item>
-            <RouteLink to={`/signup`} className="nav_link">
-              Don't have an account? Sign Up
-            </RouteLink>
+          <Button
+            fullWidth
+            id="SignIn"
+            variant="contained"
+            color="primary"
+            className={classes.submit}
+            onClick={e => handleLogin(e)}
+          >
+            Sign In
+          </Button>
+          <Button
+            fullWidth
+            id="SignInWithGithub"
+            variant="contained"
+            color="primary"
+            className={classes.submit}
+            onClick={e => handleGithubLogin(e)}
+          >
+            Sign In With Github
+          </Button>
+          <Button
+            fullWidth
+            variant="contained"
+            color="primary"
+            className={classes.submit}
+            onClick={e => handleLoginGuest(e)}
+          >
+            Continue as Guest
+          </Button>
+          <Grid container>
+            <Grid item xs>
+              <RouteLink to={`/signup`} className="nav_link">
+                Forgot password?
+              </RouteLink>
+            </Grid>
+            <Grid item>
+              <RouteLink to={`/signup`} className="nav_link">
+                Don't have an account? Sign Up
+              </RouteLink>
+            </Grid>
           </Grid>
-        </Grid>
-      </div>
-      <Box mt={8}>
-        <Copyright />
-      </Box>
-    </Container>
+        </div>
+        <Box mt={8}>
+          <Copyright />
+        </Box>
+      </Container>
+    </MuiThemeProvider>
   );
 };
 
-export default withRouter(SignIn);
+export default connect(mapStateToProps, mapDispatchToProps)(SignIn);