Sw api

.gitignore

@@ -26,4 +26,3 @@ yarn-error.log*
 
 src/config/index.tsx
 src/**/*.css
-

package.json

@@ -10,19 +10,29 @@
   },
   "dependencies": {
     "@testing-library/react": "^9.4.0",
+    "@types/google-map-react": "^1.1.4",
     "@types/react-redux": "^7.1.6",
     "@types/react-router": "^5.1.4",
     "@types/react-router-dom": "^5.1.3",
+    "@types/styled-components": "^4.4.2",
     "axios": "^0.19.1",
+    "formik": "^2.1.4",
+    "google-map-react": "^1.1.5",
     "immutability-helper": "^3.0.1",
+    "node-sass": "^4.13.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-loading-overlay": "^1.0.1",
     "react-redux": "^7.1.3",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
+    "react-spinners": "^0.8.0",
+    "reactjs-popup": "^1.5.0",
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "styled-components": "^5.0.0",
+    "uuid": "^3.4.0"
   },
   "devDependencies": {
     "@types/jest": "^24.9.0",

src/actions/googleMap.ts

@@ -0,0 +1,56 @@
+import { Dispatch } from "redux";
+import {
+  CREATE_MAP_POINT,
+  DELETE_MAP_POINT,
+  CHANGE_GOOGLE_MAP_MARK_TEXT,
+} from "../constants";
+
+export function createMapPoint(
+  lat: number,
+  lng: number,
+  newPointText: string,
+  pointId: string,
+) {
+  return (dispatch: Dispatch) => {
+    dispatch({
+      type: CREATE_MAP_POINT,
+      payload: {
+        lat,
+        lng,
+        newPointText,
+        pointId,
+        inFocus: false
+      }
+    });
+  };
+}
+
+export function changeGoogleMapMarkText(
+  pointId: string,
+  value: string,
+  lat: number,
+  lng: number
+) {
+  return (dispatch: Dispatch) => {
+    dispatch({
+      type: CHANGE_GOOGLE_MAP_MARK_TEXT,
+      payload: {
+        pointId,
+        value,
+        lat,
+        lng
+      }
+    });
+  };
+}
+
+export function deleteMapPoint(pointId: string) {
+  return (dispatch: Dispatch) => {
+    dispatch({
+      type: DELETE_MAP_POINT,
+      payload: {
+        pointId
+      }
+    });
+  };
+}

src/actions/index.ts

@@ -1,6 +1,5 @@
 import { Dispatch } from "redux";
-
-export const CHANGE_STATE_PROP = "_CHANGE_STATE_PROP";
+import { CHANGE_STATE_PROP } from "../constants";
 
 export function changeStateProp(prop: string, value: number, reducer: string) {
   return (dispatch: Dispatch): void => {

src/actions/main.ts

@@ -1,20 +1,18 @@
 import { Dispatch } from "redux";
-
-export const INCREMENT = 'INCREMENT'
-export const DECREMENT = 'DECREMENT'
+import { INCREMENT, DECREMENT } from "../constants";
 
 export function increment() {
   return (dispatch: Dispatch) => {
     dispatch({
       type: INCREMENT
-    })
-  }
+    });
+  };
 }
 
 export function decrement() {
   return (dispatch: Dispatch) => {
     dispatch({
       type: DECREMENT
-    })
-  }
+    });
+  };
 }

src/actions/ui.ts

@@ -0,0 +1,18 @@
+import { Dispatch } from "redux";
+import { SHOW_LOADING, HIDE_LOADING } from "../constants";
+
+export function showLoading() {
+  return (dispatch: Dispatch) => {
+    dispatch({
+      type: SHOW_LOADING
+    });
+  };
+}
+
+export function hideLoading() {
+  return (dispatch: Dispatch) => {
+    dispatch({
+      type: HIDE_LOADING
+    });
+  };
+}

src/components/App.test.tsx

@@ -5,7 +5,7 @@ import { App } from "./App";
 it("renders without crashing", () => {
   const div = document.createElement("div");
   ReactDOM.render(
-    <App value={15} changeStateProp={() => {}} myCustomPropsFunc={() => {}} />,
+    <App value={15} changeStateProp={() => {}} myCustomPropsFunc={() => {}} isLoading={false}/>,
     div
   );
   ReactDOM.unmountComponentAtNode(div);

src/components/App.tsx

@@ -1,19 +1,28 @@
-// @ts-ignore
 import React from "react";
-// router
 import { Route, Switch } from "react-router";
 import { HashRouter, Link, RouteComponentProps } from "react-router-dom";
-// components
 import ComponentAContainer from "./ComponentsA/ComponentAContainer";
 import ComponentBContainer from "./ComponentsB/ComponentBContainer";
-// @ts-ignore
-import logo from "../assets/images/logo.svg";
-import "./App.css";
-import { IProps } from "./AppInterfaces";
+import PersonsContainer from "./Persons/PersonsContainer";
+import PlanetsContainer from "./Planets/PlanetsContainer";
+import StarshipsContainer from "./Starships/StarshipsContainer";
+import GoogleMapsContainer from "./GoogleMaps/GoogleMapsContainer"
+import GoogleMapsMarkFormContainer from "./GoogleMapsMarkForm/GoogleMapsMarkFormContainer"
+import { AppElement, AppIntro } from "./AppElements";
+import { Spinner } from "./Spinner/Spinner";
+import { StyledLoader } from "./AppElements";
+
+interface IProps {
+  isLoading: boolean | null;
+  value: number;
+  changeStateProp: (first: string, second: number, third: string) => void;
+  myCustomPropsFunc: any;
+}
 
 const NotFound = () => {
   return (
     <Route
+      // @ts-ignore
       render={({ staticContext }: RouteComponentProps<string, any, string>) => {
         if (staticContext) {
           staticContext.status = 404;
@@ -31,68 +40,92 @@ const NotFound = () => {
 export const App: React.FC<IProps> = props => {
   return (
     <HashRouter>
-      <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
-        </div>
-
-        <div>
-          <ul>
-            <li>
-              <Link to="/">AppContainer(Home)</Link>
-            </li>
-            <li>
-              <Link to="/componentA">ComponentAContainer</Link>
-            </li>
-            <li>
-              <Link to="/componentB">ComponentBContainer</Link>
-            </li>
-          </ul>
-        </div>
+      <StyledLoader
+        active={props.isLoading}
+        spinner={<Spinner />}
+      >
+        <AppElement>
+          <div>
+            <ul>
+              <li>
+                <Link to="/">AppContainer(Home)</Link>
+              </li>
+              <li>
+                <Link to="/componentA">ComponentAContainer</Link>
+              </li>
+              <li>
+                <Link to="/componentB">ComponentBContainer</Link>
+              </li>
+              <li>
+                <Link to="/person">Person</Link>
+              </li>
+              <li>
+                <Link to="/planet">Planet</Link>
+              </li>
+              <li>
+                <Link to="/starships">Starships</Link>
+              </li>
+              <li>
+                <Link to="/googleMaps">googleMaps</Link>
+              </li>
+            </ul>
+          </div>
 
-        <div>
-          <Switch>
-            <Route
-              exact
-              path="/"
-              render={() => {
-                return (
-                  <div>
-                    <h2>Welcome to App</h2>
-                    <p className="App-intro">
-                      <code>src/components/App.js</code>
-                    </p>
-                    <p>Value: {props.value}</p>
-                    <p>
-                      <button
-                        onClick={() =>
-                          props.changeStateProp("value", 0, "main")
-                        }
-                      >
-                        Reset to "0"
-                      </button>
-                    </p>
-                  </div>
-                );
-              }}
-            />
-            <Route path="/componentA" component={ComponentAContainer} />
-            <Route
-              path="/componentB"
-              render={obj => {
-                return (
-                  <ComponentBContainer
-                    {...obj}
-                    description="Value (custom description)"
-                  />
-                );
-              }}
-            />
-            <Route component={NotFound} />
-          </Switch>
-        </div>
-      </div>
+          <div>
+            <Switch>
+              <Route
+                exact
+                path="/"
+                render={() => {
+                  return (
+                    <div>
+                      <h2>Welcome to App</h2>
+                      <AppIntro>
+                        <code>src/components/App.js</code>
+                      </AppIntro>
+                      <p>Value: {props.value}</p>
+                      <p>
+                        <button
+                          onClick={() =>
+                            props.changeStateProp("value", 0, "main")
+                          }
+                        >
+                          Reset to "0"
+                        </button>
+                      </p>
+                    </div>
+                  );
+                }}
+              />
+              <Route
+                path="/componentB"
+                render={obj => {
+                  return (
+                    <ComponentBContainer
+                      {...obj}
+                      description="Value (custom description)"
+                    />
+                  );
+                }}
+              />
+              <Route path="/componentA" component={ComponentAContainer} />
+              <Route path="/person" component={PersonsContainer} />
+              <Route path="/planet" component={PlanetsContainer} />
+              <Route path="/starships" component={StarshipsContainer} />
+              <Route path="/googleMaps" component={GoogleMapsContainer} />
+              <Route path="/addGoogleMapMark" component={GoogleMapsMarkFormContainer} />
+              <Route path="/editGoogleMapMark"
+                     render={(props: any) => {
+                       return(
+                         <GoogleMapsMarkFormContainer {...props.location.state}/>
+                       )
+                     }}
+              />
+              <Route component={NotFound} />
+            </Switch>
+          </div>
+        </AppElement>
+      </StyledLoader>
     </HashRouter>
   );
 };