about component

config.js

@@ -0,0 +1,7 @@
+const dev = {
+  REVERSE_PROXY_API_URL: "https://toodle.ddns.net/reverse-proxy-api",
+  CHATBOT_API_URL: "http://localhost:5061",
+  REVERSE_PROXY_DOCS_URL: "https://toodle.ddns.net/docs/books/reverse-proxy"
+};
+
+module.exports = { dev };

public/locales/en/translations.json

@@ -127,5 +127,18 @@
       "Message7": "I don't think I understand '{previousValue}'. You mean, like, flowers?",
       "Message9": "I think you're wasting my time. Farewell!"
     }
+  },
+  "About": {
+    "Title": "Overview",
+    "Subtitle": "Expand to see details",
+    "Content1": "A reverse proxy is a server that accepts a request from a client, forwards the request to another one of many other servers and returns the results from the server that actually processed the request to the client as if the proxy server had processed the request itself.",
+    "Content2": "A reverse proxy is a type of proxy server. Unlike a traditional proxy server, which is used to protect clients, a reverse proxy is used to protect servers.",
+    "Content3": "The client only communicates directly with the reverse proxy server and it does not know that some other server actually processed its request.",
+    "Actions": {
+      "Documentation": "Documentation"
+    },
+    "Technologies": {
+      "Title": "Technologies"
+    }
   }
 }

public/locales/ro/translations.json

@@ -118,5 +118,18 @@
       "Message7": "Nu cred că am înțeles '{previousValue}'. Vrei să spui, cum ar fi, flori?",
       "Message9": "Cred că îmi irosesti timpul. Ramas bun!"
     }
+  },
+  "About": {
+    "Title": "Prezentare generală",
+    "Subtitle": "Extindeţi pentru a vedea detalii",
+    "Content1": "Un proxy invers este un server care acceptă o cerere de la un client, redirecționează cererea către altul din multe alte servere și returnează rezultatele de la serverul care a procesat efectiv solicitarea către client ca și cum serverul proxy ar fi procesat solicitarea de unul singur.",
+    "Content2": "Un proxy invers este un tip de server proxy. Spre deosebire de un server proxy tradițional, care este utilizat pentru a proteja clienții, un proxy invers este utilizat pentru a proteja serverele.",
+    "Content3": "Clientul comunică direct cu serverul proxy invers și nu știe că un alt server i-a procesat cererea.",
+    "Actions": {
+      "Documentation": "Documentație"
+    },
+    "Technologies": {
+      "Title": "Tehnologii"
+    }
   }
 }

src/features/about/components/AboutComponent.js

@@ -1,4 +1,5 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { makeStyles } from "@material-ui/core/styles";
 import clsx from "clsx";
 import {
@@ -9,18 +10,21 @@ import {
   Collapse,
   Avatar,
   IconButton,
-  Typography
+  Typography,
+  Grid,
+  Tooltip
 } from "@material-ui/core";
-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";
+import LibraryBooksIcon from "@material-ui/icons/LibraryBooks";
 import styles from "../../../components/common/styles/expandableCardStyles";
+import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(styles);
 
-const AboutComponent = () => {
+const AboutComponent = ({ onOpenDocumentation }) => {
   const classes = useStyles();
+  const { t } = useTranslation();
   const [expanded, setExpanded] = React.useState(false);
 
   const handleExpandClick = () => {
@@ -40,22 +44,20 @@ const AboutComponent = () => {
             <MoreVertIcon />
           </IconButton>
         }
-        title="Shrimp and Chorizo Paella"
+        title={t("About.Title")}
-        subheader="September 14, 2016"
+        subheader={t("About.Subtitle")}
       />
       <CardContent>
         <Typography variant="body2" color="textSecondary" component="p">
-          Aici se va descrie la ce e bun reverse proxy-ul asta si ce face el in
+          {t("About.Content1")}
-          2 3 linii. Poate contine si o poza.
         </Typography>
       </CardContent>
       <CardActions disableSpacing>
-        <IconButton aria-label="add to favorites">
+        <Tooltip title={t("About.Actions.Documentation")}>
-          <FavoriteIcon />
+          <IconButton aria-label="documentation" onClick={onOpenDocumentation}>
-        </IconButton>
+            <LibraryBooksIcon />
-        <IconButton aria-label="share">
-          <ShareIcon />
           </IconButton>
+        </Tooltip>
         <IconButton
           className={clsx(classes.expand, {
             [classes.expandOpen]: expanded
@@ -69,37 +71,32 @@ const AboutComponent = () => {
       </CardActions>
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent>
-          <Typography paragraph>Method:</Typography>
+          <Grid container spacing={1}>
+            <Grid item xs={12}>
+              <Typography paragraph>{t("About.Content2")}</Typography>
+            </Grid>
+
+            <Grid item xs={12}>
+              <img
+                className={classes.image}
+                src="public/images/reverse-proxy2.jpg"
+                alt="..."
+              />
+            </Grid>
+            <Grid item xs={12}>
               <Typography paragraph>
-            Aici se va descrie tehnic si detaliat ce e un reverse proxy. Poate
+                {t("About.Content1")} {t("About.Content3")}
-            contine si o poza. Link catre swagger pe undeva
-          </Typography>
-          <Typography paragraph>
-            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.
-          </Typography>
-          <Typography paragraph>
-            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.)
-          </Typography>
-          <Typography>
-            Set aside off of the heat to let rest for 10 minutes, and then
-            serve.
               </Typography>
+            </Grid>
+          </Grid>
         </CardContent>
       </Collapse>
     </Card>
   );
 };
 
+AboutComponent.propTypes = {
+  onOpenDocumentation: PropTypes.func.isRequired
+};
+
 export default AboutComponent;

src/features/about/components/AboutContainer.js

@@ -6,9 +6,15 @@ import AboutComponent from "./AboutComponent";
 import TechnologiesComponent from "./TechnologiesComponent";
 
 const AboutContainer = () => {
+  const handleOpenDocumentation = event => {
+    const url = process.env.REVERSE_PROXY_DOCS_URL;
+    window.open(url, "_blank");
+    event.preventDefault();
+  };
+
   return (
     <>
-      <AboutComponent />
+      <AboutComponent onOpenDocumentation={handleOpenDocumentation} />
       <br />
       <br />
       <TechnologiesComponent />

src/features/about/components/TechnologiesComponent.js

@@ -16,11 +16,24 @@ import ShareIcon from "@material-ui/icons/Share";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import MoreVertIcon from "@material-ui/icons/MoreVert";
 import styles from "../../../components/common/styles/expandableCardStyles";
+import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(styles);
 
+/*
+https://codepen.io/emreavcilar/pen/eYmejLP
+https://codepen.io/ajaykarwal/pen/bqwWNy
+https://www.npmjs.com/package/react-skills-bars
+https://www.npmjs.com/package/react-skillbars
+https://kevincastejon.github.io/react-skills/documentation/
+
+
+
+*/
+
 const TechnologiesComponent = () => {
   const classes = useStyles();
+  const { t } = useTranslation();
   const [expanded, setExpanded] = React.useState(false);
 
   const handleExpandClick = () => {
@@ -40,7 +53,7 @@ const TechnologiesComponent = () => {
             <MoreVertIcon />
           </IconButton>
         }
-        title="Technologies"
+        title={t("About.Technologies.Title")}
         subheader="September 14, 2016"
       />
       <CardContent>

webpack.config.dev.js

@@ -1,9 +1,15 @@
 const webpack = require("webpack");
 const path = require("path");
+const config = require("./config");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 process.env.NODE_ENV = "development";
 
+let configs = {};
+Object.keys(config.dev).forEach(z => {
+  configs[`process.env.${z}`] = JSON.stringify(config.dev[z]);
+});
+
 module.exports = {
   mode: "development",
   target: "web",
@@ -23,12 +29,7 @@ module.exports = {
     https: false
   },
   plugins: [
-    new webpack.DefinePlugin({
+    new webpack.DefinePlugin(configs),
-      "process.env.REVERSE_PROXY_API_URL": JSON.stringify(
-        "http://localhost:5050"
-      ),
-      "process.env.CHATBOT_API_URL": JSON.stringify("http://localhost:5061")
-    }),
     new HtmlWebpackPlugin({
       template: "src/index.html",
       favicon: "src/favicon.ico"