Merge branch 'lesson-6'

sergei-zelinsky · Nov 24, 2019 · d2d6438 · d2d6438
2 parents c70fa6e + 998f9f8
commit d2d6438
Show file tree

Hide file tree

Showing 45 changed files with 9,639 additions and 0 deletions.
diff --git a/.gitignore → lesson-5/.gitignore b/.gitignore → lesson-5/.gitignore
diff --git a/package.json → lesson-5/package.json b/package.json → lesson-5/package.json
diff --git a/public/favicon.ico → lesson-5/public/favicon.ico b/public/favicon.ico → lesson-5/public/favicon.ico
diff --git a/public/index.html → lesson-5/public/index.html b/public/index.html → lesson-5/public/index.html
diff --git a/public/logo192.png → lesson-5/public/logo192.png b/public/logo192.png → lesson-5/public/logo192.png
diff --git a/public/logo512.png → lesson-5/public/logo512.png b/public/logo512.png → lesson-5/public/logo512.png
diff --git a/public/manifest.json → lesson-5/public/manifest.json b/public/manifest.json → lesson-5/public/manifest.json
diff --git a/public/robots.txt → lesson-5/public/robots.txt b/public/robots.txt → lesson-5/public/robots.txt
diff --git a/src/App.js → lesson-5/src/App.js b/src/App.js → lesson-5/src/App.js
diff --git a/src/ContextSampleApp/index.css → lesson-5/src/ContextSampleApp/index.css b/src/ContextSampleApp/index.css → lesson-5/src/ContextSampleApp/index.css
diff --git a/src/ContextSampleApp/index.js → lesson-5/src/ContextSampleApp/index.js b/src/ContextSampleApp/index.js → lesson-5/src/ContextSampleApp/index.js
diff --git a/src/FormSampleApp/index.css → lesson-5/src/FormSampleApp/index.css b/src/FormSampleApp/index.css → lesson-5/src/FormSampleApp/index.css
diff --git a/src/FormSampleApp/index.js → lesson-5/src/FormSampleApp/index.js b/src/FormSampleApp/index.js → lesson-5/src/FormSampleApp/index.js
diff --git a/src/ReduxSampleApp/ReduxSampleApp.js → ...on-5/src/ReduxSampleApp/ReduxSampleApp.js b/src/ReduxSampleApp/ReduxSampleApp.js → ...on-5/src/ReduxSampleApp/ReduxSampleApp.js
diff --git a/src/ReduxSampleApp/actions.js → lesson-5/src/ReduxSampleApp/actions.js b/src/ReduxSampleApp/actions.js → lesson-5/src/ReduxSampleApp/actions.js
diff --git a/src/ReduxSampleApp/index.css → lesson-5/src/ReduxSampleApp/index.css b/src/ReduxSampleApp/index.css → lesson-5/src/ReduxSampleApp/index.css
diff --git a/src/ReduxSampleApp/index.js → lesson-5/src/ReduxSampleApp/index.js b/src/ReduxSampleApp/index.js → lesson-5/src/ReduxSampleApp/index.js
diff --git a/src/ReduxSampleApp/reducer.js → lesson-5/src/ReduxSampleApp/reducer.js b/src/ReduxSampleApp/reducer.js → lesson-5/src/ReduxSampleApp/reducer.js
diff --git a/src/RenderPropsApp/StudentsManager.js → ...n-5/src/RenderPropsApp/StudentsManager.js b/src/RenderPropsApp/StudentsManager.js → ...n-5/src/RenderPropsApp/StudentsManager.js
diff --git a/src/RenderPropsApp/index.css → lesson-5/src/RenderPropsApp/index.css b/src/RenderPropsApp/index.css → lesson-5/src/RenderPropsApp/index.css
diff --git a/src/RenderPropsApp/index.js → lesson-5/src/RenderPropsApp/index.js b/src/RenderPropsApp/index.js → lesson-5/src/RenderPropsApp/index.js
diff --git a/src/RoutingSampleApp/OneStudentPage.js → ...-5/src/RoutingSampleApp/OneStudentPage.js b/src/RoutingSampleApp/OneStudentPage.js → ...-5/src/RoutingSampleApp/OneStudentPage.js
diff --git a/src/RoutingSampleApp/StudentsListPage.js → .../src/RoutingSampleApp/StudentsListPage.js b/src/RoutingSampleApp/StudentsListPage.js → .../src/RoutingSampleApp/StudentsListPage.js
diff --git a/src/RoutingSampleApp/constants.js → lesson-5/src/RoutingSampleApp/constants.js b/src/RoutingSampleApp/constants.js → lesson-5/src/RoutingSampleApp/constants.js
diff --git a/src/RoutingSampleApp/index.css → lesson-5/src/RoutingSampleApp/index.css b/src/RoutingSampleApp/index.css → lesson-5/src/RoutingSampleApp/index.css
diff --git a/src/RoutingSampleApp/index.js → lesson-5/src/RoutingSampleApp/index.js b/src/RoutingSampleApp/index.js → lesson-5/src/RoutingSampleApp/index.js
diff --git a/src/App.css → lesson-5/src/app.css b/src/App.css → lesson-5/src/app.css
diff --git a/src/index.js → lesson-5/src/index.js b/src/index.js → lesson-5/src/index.js
diff --git a/yarn.lock → lesson-5/yarn.lock b/yarn.lock → lesson-5/yarn.lock
diff --git a/lesson-6/.gitignore b/lesson-6/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/lesson-6/package.json b/lesson-6/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "lesson-6",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^4.7.0",
+    "@material-ui/icons": "^4.5.1",
+    "final-form": "^4.18.6",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-final-form": "^6.3.3",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.2.0",
+    "uuid": "^3.3.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/lesson-6/public/favicon.ico b/lesson-6/public/favicon.ico
diff --git a/lesson-6/public/index.html b/lesson-6/public/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="logo192.png" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+    />
+    <!--
+      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/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/lesson-6/public/logo192.png b/lesson-6/public/logo192.png
diff --git a/lesson-6/public/logo512.png b/lesson-6/public/logo512.png
diff --git a/lesson-6/public/manifest.json b/lesson-6/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/lesson-6/public/robots.txt b/lesson-6/public/robots.txt
@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
diff --git a/lesson-6/src/index.js b/lesson-6/src/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Root from './screens/Root';
+
+ReactDOM.render(<Root />, document.getElementById('root'));
diff --git a/lesson-6/src/screens/Root/Header/index.js b/lesson-6/src/screens/Root/Header/index.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import AppBar from '@material-ui/core/AppBar';
+import {Toolbar, Typography, ButtonBase} from '@material-ui/core';
+import {Link} from 'react-router-dom';
+
+export default () => {
+  return (
+    <AppBar position="static">
+      <Toolbar>
+        <ButtonBase component={Link} to="/">
+          <Typography variant="h6">#react-course</Typography>
+        </ButtonBase>
+      </Toolbar>
+    </AppBar>
+  );
+};
diff --git a/lesson-6/src/screens/Root/index.js b/lesson-6/src/screens/Root/index.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import {
+  CssBaseline,
+  MuiThemeProvider,
+  createMuiTheme,
+  makeStyles,
+} from '@material-ui/core';
+import Header from './Header';
+import StudentsListScreen from '../StudentsListScreen';
+import StudentScreen from '../StudentScreen';
+import {Switch, BrowserRouter, Route, Redirect} from 'react-router-dom';
+
+const theme = createMuiTheme({
+  palette: {
+    type: 'dark',
+  },
+});
+
+const useStyles = makeStyles(theme => ({
+  content: {
+    paddingTop: theme.spacing(5),
+  },
+}));
+
+const Root = () => {
+  const classes = useStyles();
+  return (
+    <>
+      <MuiThemeProvider theme={theme}>
+        <CssBaseline />
+        <BrowserRouter>
+          <Header />
+          <div className={classes.content}>
+            <Switch>
+              <Redirect path="/" exact to="/students" />
+              <Route path="/students" exact component={StudentsListScreen} />
+              <Route path="/students/create" exact component={StudentScreen} />
+              <Route
+                path="/students/:studentId"
+                exact
+                component={StudentScreen}
+              />
+            </Switch>
+          </div>
+        </BrowserRouter>
+      </MuiThemeProvider>
+    </>
+  );
+};
+
+export default Root;
diff --git a/lesson-6/src/screens/StudentScreen/index.js b/lesson-6/src/screens/StudentScreen/index.js
@@ -0,0 +1,105 @@
+import React, {useEffect, useState, useCallback} from 'react';
+import * as APIService from '../../services/APIService';
+import {
+  Container,
+  Typography,
+  Button,
+  TextField,
+  makeStyles,
+} from '@material-ui/core';
+import {Form, Field} from 'react-final-form';
+
+const useStyles = makeStyles(theme => ({
+  title: {
+    marginBottom: theme.spacing(4),
+  },
+  field: {
+    marginBottom: theme.spacing(2),
+  },
+}));
+
+const StudentScreen = ({match, history}) => {
+  const studentId = match.params.studentId;
+  const [student, setStudent] = useState(null);
+
+  useEffect(() => {
+    if (studentId) {
+      const currentStudent = APIService.getStudent(studentId);
+
+      setStudent(currentStudent);
+    }
+  }, [studentId]);
+
+  const handleFormSubmit = useCallback(
+    values => {
+      if (studentId) {
+        APIService.updateStudent(studentId, values);
+      } else {
+        APIService.addStudent(values);
+      }
+
+      history.push('/students');
+    },
+    [studentId, history]
+  );
+
+  const classes = useStyles();
+
+  return (
+    <Container maxWidth="sm">
+      <Typography variant="h6" className={classes.title}>
+        {studentId ? 'Update Student' : 'Create Student'}
+      </Typography>
+      <Form onSubmit={handleFormSubmit} initialValues={student}>
+        {({handleSubmit}) => (
+          <>
+            <Field name="avatar">
+              {({input}) => (
+                <TextField
+                  className={classes.field}
+                  label="Avatar URL"
+                  variant="outlined"
+                  fullWidth
+                  {...input}
+                />
+              )}
+            </Field>
+            <Field name="name">
+              {({input}) => (
+                <TextField
+                  className={classes.field}
+                  label="Name"
+                  variant="outlined"
+                  fullWidth
+                  {...input}
+                />
+              )}
+            </Field>
+            <Field name="address">
+              {({input}) => (
+                <TextField
+                  className={classes.field}
+                  label="Address"
+                  variant="outlined"
+                  fullWidth
+                  {...input}
+                />
+              )}
+            </Field>
+            <Button
+              onClick={handleSubmit}
+              fullWidth
+              color="primary"
+              variant="contained"
+              size="large"
+            >
+              Submit
+            </Button>
+          </>
+        )}
+      </Form>
+    </Container>
+  );
+};
+
+export default StudentScreen;
diff --git a/lesson-6/src/screens/StudentsListScreen/index.js b/lesson-6/src/screens/StudentsListScreen/index.js
@@ -0,0 +1,64 @@
+import React from 'react';
+import {
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Avatar,
+  ListSubheader,
+  Fab,
+  makeStyles,
+} from '@material-ui/core';
+import {Add as AddIcon} from '@material-ui/icons';
+import StudentsList from '../common/StudentsList';
+import {Link} from 'react-router-dom';
+
+const useStyles = makeStyles(theme => ({
+  list: {
+    paddingBottom: theme.spacing(10),
+  },
+  fab: {
+    position: 'fixed',
+    bottom: theme.spacing(2),
+    right: theme.spacing(2),
+  },
+}));
+
+export default () => {
+  const classes = useStyles();
+  return (
+    <>
+      <List className={classes.list}>
+        <ListSubheader>Students</ListSubheader>
+        <StudentsList>
+          {({students}) =>
+            students.map(student => (
+              <ListItem
+                key={student.id}
+                button
+                component={Link}
+                to={`/students/${student.id}`}
+              >
+                <ListItemAvatar>
+                  <Avatar src={student.avatar} />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={student.name}
+                  secondary={student.address}
+                />
+              </ListItem>
+            ))
+          }
+        </StudentsList>
+      </List>
+      <Fab
+        className={classes.fab}
+        color="primary"
+        component={Link}
+        to="/students/create"
+      >
+        <AddIcon />
+      </Fab>
+    </>
+  );
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# https://www.robotstxt.org/robotstxt.html
		User-agent: *