[ ADD ] react configuration

react/src/components/Controls/Button/Button.js

@@ -0,0 +1,10 @@
+import React from "react";
+import Button from '@material-ui/core/Button';
+
+export const Btn = ({text , handleClick}) => {
+  return (
+    <Button variant="contained" color="primary" onClick={handleClick}>
+      {text}
+    </Button>
+  );
+};

react/src/components/Controls/InputField/InputField.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { TextField } from "@material-ui/core";
+
+export const InputField = ({
+  name,
+  label,
+  value,
+  error,
+  handleChange,
+  helperText,
+  isMultiline,
+  isRequired
+}) => {
+
+  return (
+    <TextField
+      className="my-3"
+      name={name}
+      type="text"
+      label={isRequired ? label+"*" : label}
+      inputProps={{ maxLength: isMultiline ? 500 : 50 }}
+      variant="outlined"
+      fullWidth
+      value={value}
+      error={error}
+      helperText={error && helperText}
+      onChange={handleChange}
+      multiline={isMultiline}
+      rows={isMultiline ? 3 : 1}
+    />
+  );
+};

react/src/components/Loader/Loader.js

@@ -0,0 +1,14 @@
+import React from "react";
+import "./Loader.scss";
+
+const Loader = () => {
+  return (
+    <div className="spinnerContainer d-flex justify-content-center align-items-center h-100">
+      <div className="spinner-border text-primary" role="status">
+        <span className="sr-only">Loading...</span>
+      </div>
+    </div>
+  );
+};
+
+export default Loader;

react/src/components/Loader/Loader.scss

@@ -0,0 +1,31 @@
+.spinnerContainer {
+  height: 100vh;
+  width: 100%;
+}
+
+.loading-indicator:before {
+  content: "";
+  background: #000000cc;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+
+.loading-indicator:after {
+  content: "\f1ce";
+  font-family: FontAwesome;
+  position: fixed;
+  width: 100%;
+  top: 50%;
+  left: 0;
+  z-index: 1001;
+  color: white;
+  text-align: center;
+  font-weight: 100;
+  font-size: 4rem;
+  -webkit-animation: fa-spin 1s infinite linear;
+  animation: fa-spin 1s infinite linear;
+}

react/src/components/Navbar/Navbar.js

@@ -0,0 +1,33 @@
+import React from "react";
+import messages from "./../../assets/Local/messages";
+import { useSelector, useDispatch } from "react-redux";
+import { setCurrentLang } from "../../store/Lang/LangAction";
+import { Link } from "react-router-dom";
+import { Btn } from "../Controls/Button/Button";
+
+export default function Navbar() {
+  const lang = useSelector(state => state.lang);
+  const dispatch = useDispatch();
+  const message = messages[lang];
+  const switchLanguage = lang => {
+    dispatch(setCurrentLang(lang === "ar" ? "en" : "ar"));
+  };
+
+  return (
+    <>
+      <nav className="navbar navbar-dark bg-dark">
+        <a className="navbar-brand">{message.hello}</a>
+        <div className="d-flex align-items-center">
+          {/* This private route won't be accessible if no token in lcoal storage */}
+          <Link to="/" className="text-white mx-3">
+            Private Route
+          </Link>
+          <Btn
+            handleClick={() => switchLanguage(lang)}
+            text={message.langBtn}
+          />
+        </div>
+      </nav>
+    </>
+  );
+}

react/src/components/NotFound/NotFound.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+const NotFound = () => {
+  return (
+    <React.Fragment>
+      <div className="text-center">
+        <h1 className="my-5 pt-5">Sorry we can’t find this page</h1>
+      </div>
+    </React.Fragment>
+  );
+};
+export default NotFound;

react/src/components/Snackbar/Snackbar.js

@@ -0,0 +1,33 @@
+import React from "react";
+import Snackbar from "@material-ui/core/Snackbar";
+import MuiAlert from "@material-ui/lab/Alert";
+import { useSelector, useDispatch } from "react-redux";
+import { hideSnackbarAction } from "../../store/Snackbar/SnackbarAction";
+
+function Alert(props) {
+  return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
+
+export function MaterialSnackbar(props) {
+  const { isOpen, message, type } = useSelector(state => state.snackbar);
+  const dispatch = useDispatch();
+  const handleClose = (event, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    dispatch(hideSnackbarAction());
+  };
+  return (
+    <Snackbar
+      open={isOpen}
+      autoHideDuration={4000}
+      anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+      key={`bottom,center`}
+      onClose={() => handleClose}
+    >
+      <Alert onClose={handleClose} severity={type} className="medium_font">
+        {message}
+      </Alert>
+    </Snackbar>
+  );
+}