diff --git a/src/components/App.js b/src/components/App.js index 455faff..d41ba35 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,13 +1,13 @@ import React, { Suspense } from "react"; import { Route, Switch } from "react-router-dom"; import HomePage from "./home/HomePage"; -import AboutPage from "./about/AboutPage"; import Header from "./layout/Header"; import PageNotFound from "./PageNotFound"; import { ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css"; import SessionContainer from "../features/session/components/SessionContainer"; import ReleaseNotesContainer from "../features/releaseNotes/components/ReleaseNotesContainer"; +import AboutContainer from "../features/about/components/AboutContainer"; function App() { const contentStyle = { @@ -22,7 +22,7 @@ function App() {
- + diff --git a/src/components/about/AboutPage.js b/src/components/about/AboutPage.js deleted file mode 100644 index 70b312a..0000000 --- a/src/components/about/AboutPage.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react"; - -const AboutPage = () => ( -
-

About

-

- This app uses React, Redux, React Router, and many other helpful - libraries. -

-
-); - -export default AboutPage; diff --git a/src/components/home/HomePage.js b/src/components/home/HomePage.js index 7ceb753..c751752 100644 --- a/src/components/home/HomePage.js +++ b/src/components/home/HomePage.js @@ -1,5 +1,4 @@ import React from "react"; -import PropTypes from "prop-types"; import SystemContainer from "../../features/system/components/SystemContainer"; const HomePage = () => { @@ -10,8 +9,6 @@ const HomePage = () => { ); }; -HomePage.propTypes = { - actions: PropTypes.object.isRequired -}; +HomePage.propTypes = {}; export default HomePage; diff --git a/src/features/about/components/AboutComponent.js b/src/features/about/components/AboutComponent.js new file mode 100644 index 0000000..29e7449 --- /dev/null +++ b/src/features/about/components/AboutComponent.js @@ -0,0 +1,116 @@ +import React from "react"; +import { makeStyles } from "@material-ui/core/styles"; +import clsx from "clsx"; +import Card from "@material-ui/core/Card"; +import CardHeader from "@material-ui/core/CardHeader"; +import CardContent from "@material-ui/core/CardContent"; +import CardActions from "@material-ui/core/CardActions"; +import Collapse from "@material-ui/core/Collapse"; +import Avatar from "@material-ui/core/Avatar"; +import IconButton from "@material-ui/core/IconButton"; +import Typography from "@material-ui/core/Typography"; +import FavoriteIcon from "@material-ui/icons/Favorite"; +import ShareIcon from "@material-ui/icons/Share"; +import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; +import MoreVertIcon from "@material-ui/icons/MoreVert"; + +const useStyles = makeStyles((theme) => ({ + expand: { + transform: "rotate(0deg)", + marginLeft: "auto", + transition: theme.transitions.create("transform", { + duration: theme.transitions.duration.shortest + }) + }, + expandOpen: { + transform: "rotate(180deg)" + }, + avatar: { + backgroundColor: "#F15B2A" + } +})); + +const AboutComponent = () => { + const classes = useStyles(); + const [expanded, setExpanded] = React.useState(false); + + const handleExpandClick = () => { + setExpanded(!expanded); + }; + + return ( + + + R + + } + action={ + + + + } + title="Shrimp and Chorizo Paella" + subheader="September 14, 2016" + /> + + + Aici se va descrie la ce e bun reverse proxy-ul asta si ce face el in + 2 3 linii. Poate contine si o poza. + + + + + + + + + + + + + + + + Method: + + Aici se va descrie tehnic si detaliat ce e un reverse proxy. Poate + contine si o poza. + + + Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet + over medium-high heat. Add chicken, shrimp and chorizo, and cook, + stirring occasionally until lightly browned, 6 to 8 minutes. + Transfer shrimp to a large plate and set aside, leaving chicken and + chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, + onion, salt and pepper, and cook, stirring often until thickened and + fragrant, about 10 minutes. Add saffron broth and remaining 4 1/2 + cups chicken broth; bring to a boil. + + + Add rice and stir very gently to distribute. Top with artichokes and + peppers, and cook without stirring, until most of the liquid is + absorbed, 15 to 18 minutes. Reduce heat to medium-low, add reserved + shrimp and mussels, tucking them down into the rice, and cook again + without stirring, until mussels have opened and rice is just tender, + 5 to 7 minutes more. (Discard any mussels that don’t open.) + + + Set aside off of the heat to let rest for 10 minutes, and then + serve. + + + + + ); +}; + +export default AboutComponent; diff --git a/src/features/about/components/AboutContainer.js b/src/features/about/components/AboutContainer.js new file mode 100644 index 0000000..81265d8 --- /dev/null +++ b/src/features/about/components/AboutContainer.js @@ -0,0 +1,34 @@ +import React from "react"; +import { connect } from "react-redux"; +import { bindActionCreators } from "redux"; +import PropTypes from "prop-types"; +import AboutComponent from "./AboutComponent"; +import TechnologiesComponent from "./TechnologiesComponent"; + +const AboutContainer = () => { + return ( + <> +
+ +
+
+ + + ); +}; + +AboutContainer.propTypes = { + actions: PropTypes.object.isRequired +}; + +function mapStateToProps() { + return {}; +} + +function mapDispatchToProps(dispatch) { + return { + actions: bindActionCreators({}, dispatch) + }; +} + +export default connect(mapStateToProps, mapDispatchToProps)(AboutContainer); diff --git a/src/features/about/components/TechnologiesComponent.js b/src/features/about/components/TechnologiesComponent.js new file mode 100644 index 0000000..4e99674 --- /dev/null +++ b/src/features/about/components/TechnologiesComponent.js @@ -0,0 +1,118 @@ +import React from "react"; +import { makeStyles } from "@material-ui/core/styles"; +import clsx from "clsx"; +import Card from "@material-ui/core/Card"; +import CardHeader from "@material-ui/core/CardHeader"; +import CardContent from "@material-ui/core/CardContent"; +import CardActions from "@material-ui/core/CardActions"; +import Collapse from "@material-ui/core/Collapse"; +import Avatar from "@material-ui/core/Avatar"; +import IconButton from "@material-ui/core/IconButton"; +import Typography from "@material-ui/core/Typography"; +import FavoriteIcon from "@material-ui/icons/Favorite"; +import ShareIcon from "@material-ui/icons/Share"; +import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; +import MoreVertIcon from "@material-ui/icons/MoreVert"; + +const useStyles = makeStyles((theme) => ({ + expand: { + transform: "rotate(0deg)", + marginLeft: "auto", + transition: theme.transitions.create("transform", { + duration: theme.transitions.duration.shortest + }) + }, + expandOpen: { + transform: "rotate(180deg)" + }, + avatar: { + backgroundColor: "#F15B2A" + } +})); + +const TechnologiesComponent = () => { + const classes = useStyles(); + const [expanded, setExpanded] = React.useState(false); + + const handleExpandClick = () => { + setExpanded(!expanded); + }; + + return ( + + + T + + } + action={ + + + + } + title="Technologies" + subheader="September 14, 2016" + /> + + + Aici se vor enumera tehnologiile folosite intr-o propozitie, gen: + Pentru construirea acestui sistem a fost utilizata o gama larga de + tehnologii, bla bla bla si enumerate: .NET Core, ProxyKit, SQL Server. + + + + + + + + + + + + + + + + Method: + + In zona asta va fi un tabel ca si celelalte cu tehnologiile folosite + si doua trei cuvinte despre ce face fiecare. SQL Server - baza de + date, Windows service - hostat serverul, docker hostat api-ul + + + Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet + over medium-high heat. Add chicken, shrimp and chorizo, and cook, + stirring occasionally until lightly browned, 6 to 8 minutes. + Transfer shrimp to a large plate and set aside, leaving chicken and + chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, + onion, salt and pepper, and cook, stirring often until thickened and + fragrant, about 10 minutes. Add saffron broth and remaining 4 1/2 + cups chicken broth; bring to a boil. + + + Add rice and stir very gently to distribute. Top with artichokes and + peppers, and cook without stirring, until most of the liquid is + absorbed, 15 to 18 minutes. Reduce heat to medium-low, add reserved + shrimp and mussels, tucking them down into the rice, and cook again + without stirring, until mussels have opened and rice is just tender, + 5 to 7 minutes more. (Discard any mussels that don’t open.) + + + Set aside off of the heat to let rest for 10 minutes, and then + serve. + + + + + ); +}; + +export default TechnologiesComponent; diff --git a/src/features/system/components/SystemComponent.js b/src/features/system/components/SystemComponent.js index 27ca24b..8e79937 100644 --- a/src/features/system/components/SystemComponent.js +++ b/src/features/system/components/SystemComponent.js @@ -1 +1,117 @@ -//TO DO +import React from "react"; +import { makeStyles } from "@material-ui/core/styles"; +import clsx from "clsx"; +import Card from "@material-ui/core/Card"; +import CardHeader from "@material-ui/core/CardHeader"; +import CardContent from "@material-ui/core/CardContent"; +import CardActions from "@material-ui/core/CardActions"; +import Collapse from "@material-ui/core/Collapse"; +import Avatar from "@material-ui/core/Avatar"; +import IconButton from "@material-ui/core/IconButton"; +import Typography from "@material-ui/core/Typography"; +import FavoriteIcon from "@material-ui/icons/Favorite"; +import ShareIcon from "@material-ui/icons/Share"; +import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; +import MoreVertIcon from "@material-ui/icons/MoreVert"; + +const useStyles = makeStyles((theme) => ({ + expand: { + transform: "rotate(0deg)", + marginLeft: "auto", + transition: theme.transitions.create("transform", { + duration: theme.transitions.duration.shortest + }) + }, + expandOpen: { + transform: "rotate(180deg)" + }, + avatar: { + backgroundColor: "#F15B2A" + } +})); + +const SystemComponent = () => { + const classes = useStyles(); + const [expanded, setExpanded] = React.useState(false); + + const handleExpandClick = () => { + setExpanded(!expanded); + }; + + return ( + + + R + + } + action={ + + + + } + title="Shrimp and Chorizo Paella" + subheader="September 14, 2016" + /> + + + This impressive paella is a perfect party dish and a fun meal to cook + together with your guests. Add 1 cup of frozen peas along with the + mussels, if you like. + + + + + + + + + + + + + + + + Method: + + Heat 1/2 cup of the broth in a pot until simmering, add saffron and + set aside for 10 minutes. + + + Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet + over medium-high heat. Add chicken, shrimp and chorizo, and cook, + stirring occasionally until lightly browned, 6 to 8 minutes. + Transfer shrimp to a large plate and set aside, leaving chicken and + chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, + onion, salt and pepper, and cook, stirring often until thickened and + fragrant, about 10 minutes. Add saffron broth and remaining 4 1/2 + cups chicken broth; bring to a boil. + + + Add rice and stir very gently to distribute. Top with artichokes and + peppers, and cook without stirring, until most of the liquid is + absorbed, 15 to 18 minutes. Reduce heat to medium-low, add reserved + shrimp and mussels, tucking them down into the rice, and cook again + without stirring, until mussels have opened and rice is just tender, + 5 to 7 minutes more. (Discard any mussels that don’t open.) + + + Set aside off of the heat to let rest for 10 minutes, and then + serve. + + + + + ); +}; + +export default SystemComponent; diff --git a/src/features/system/components/SystemContainer.js b/src/features/system/components/SystemContainer.js index bb064b8..a8469bb 100644 --- a/src/features/system/components/SystemContainer.js +++ b/src/features/system/components/SystemContainer.js @@ -3,6 +3,7 @@ import { connect } from "react-redux"; import { bindActionCreators } from "redux"; import PropTypes from "prop-types"; import { loadSystemDateTime, loadSystemVersion } from "../actionCreators"; +import SystemComponent from "./SystemComponent"; const SystemContainer = ({ actions }) => { useEffect(() => { @@ -10,12 +11,12 @@ const SystemContainer = ({ actions }) => { actions.loadSystemVersion(); }, []); - return
TEST
; + return ; }; SystemContainer.propTypes = { actions: PropTypes.object.isRequired, - releaseNotes: PropTypes.array.isRequired + system: PropTypes.object.isRequired }; function mapStateToProps(state) {