Ready to deploy and connect to api

ajax27 · May 3, 2019 · f7dfa99 · f7dfa99
commit f7dfa99
Show file tree

Hide file tree

Showing 47 changed files with 25,202 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,9 @@
+/node_modules
+/build
+/.vscode
+/.pnp
+.pnp.js
+.env
+
+# testing
+/coverage
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "front",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "body-scroll-lock": "^2.6.1",
+    "mdbreact": "^4.13.0",
+    "node-sass": "^4.11.0",
+    "react": "^16.8.5",
+    "react-dom": "^16.8.5",
+    "react-google-login": "^5.0.4",
+    "react-google-recaptcha": "^1.0.5",
+    "react-recaptcha": "^2.3.10",
+    "react-router-dom": "^5.0.0",
+    "react-scripts": "2.1.8"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <meta name="theme-color" content="#000000" />
+  <!--
+      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" />
+  <link href="https://fonts.googleapis.com/css?family=Kaushan+Script|Pacifico|Roboto:700" rel="stylesheet">
+  <link rel="stylesheet"
+    href="https://unpkg.com/[email protected]/dist/css/bootstrap-material-design.min.css"
+    integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
+    integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+  <title>Social Reaction</title>
+</head>
+<br />
+<br />
+
+<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/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,34 @@
+::-webkit-scrollbar {
+  width: 8px;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+  border-radius: 4px;
+}
+
+.modal-open {
+  overflow:hidden;
+  overflow-y:scroll;
+  padding-right:0 !important;
+}
+
+@media (max-width: 767px) {
+    .column-1,
+    .column-2 {
+        width: 100%;
+    }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+    .column-1 {
+        width: 50%;
+    }
+    .column-2 {
+        width: 100%;
+    }
+}
+@media (min-width: 992px) {
+    .column-2,
+    .column-1 {
+        width: 33%;
+    }
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import MainRouter from './MainRouter';
+import './App.css';
+
+const App = () => (
+  <BrowserRouter>
+    <MainRouter />
+  </BrowserRouter>
+);
+
+export default App;
diff --git a/src/MainRouter.js b/src/MainRouter.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Route, Switch } from 'react-router-dom';
+import Home from './core/Home';
+import Menu from './core/Menu';
+import Signup from './user/Signup';
+import Signin from './user/Signin';
+import Profile from './user/Profile';
+import Users from './user/Users';
+import EditProfile from './user/EditProfile';
+import FindPeople from './user/FindPeople';
+import NewPost from "./post/NewPost";
+import EditPost from "./post/EditPost";
+import SinglePost from "./post/SinglePost";
+import ForgotPassword from "./user/ForgotPassword";
+import ResetPassword from "./user/ResetPassword";
+import PrivateRoute from './auth/PrivateRoute';
+import NotFound from './core/NotFound';
+import Admin from './admin/Admin';
+
+const MainRouter = () => (
+  <div>
+    <Menu />
+    <Switch>
+      <Route exact path="/" component={Home} />
+      <Route exact path="/forgot-password" component={ForgotPassword} />
+      <Route exact path="/reset-password/:resetPasswordToken" component={ResetPassword} />
+      <PrivateRoute exact path="/post/create" component={NewPost} />
+      <PrivateRoute exact path="/post/edit/:postId" component={EditPost} />
+      <Route exact path="/post/:postId" component={SinglePost} />
+      <Route exact path="/users" component={Users} />
+      <Route exact path="/signup" component={Signup} />
+      <Route exact path="/signin" component={Signin} />
+      <PrivateRoute exact path="/admin" component={Admin} />
+      <PrivateRoute exact path="/user/:userId" component={Profile} />
+      <PrivateRoute exact path="/findpeople" component={FindPeople} />
+      <PrivateRoute exact path="/user/edit/:userId" component={EditProfile} />
+      <Route component={NotFound} />
+    </Switch>
+  </div>
+);
+
+export default MainRouter;
diff --git a/src/admin/Admin.js b/src/admin/Admin.js
@@ -0,0 +1,48 @@
+import React, { Component } from "react";
+import Posts from "../post/Posts";
+import Users from "../user/Users";
+import { isAuthenticated } from "../auth";
+import { Redirect } from "react-router-dom";
+
+class Admin extends Component {
+  state = {
+    redirectToHome: false
+  };
+
+  componentDidMount() {
+    if (isAuthenticated().user.role !== "admin") {
+      this.setState({ redirectToHome: true });
+    }
+  }
+
+  render() {
+    if (this.state.redirectToHome) {
+      return <Redirect to="/" />;
+    }
+
+    return (
+      <div style={{ background: '#DEE4E5' }}>
+        <div className="jumbotron text-center" style={{ background: '#9ad8ed' }}>
+          <h2>Admin Dashboard</h2>
+          <p className="lead">Welcome Admin, what would you like to do today!</p>
+        </div>
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-md-6">
+              <h2 className="text-center">To Edit Or Delete</h2>
+              <hr />
+              <Posts />
+            </div>
+            <div className="col-md-6">
+              <h2 className="text-center">Click On User Or Post</h2>
+              <hr />
+              <Users />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Admin;
diff --git a/src/auth/PrivateRoute.js b/src/auth/PrivateRoute.js
@@ -0,0 +1,25 @@
+import React, { Component } from "react";
+import { Route, Redirect } from "react-router-dom";
+import { isAuthenticated } from "./index";
+
+const PrivateRoute = ({ component: Component, ...rest }) => (
+  // prop components passed down to this private route component
+  <Route
+    {...rest}
+    render={props =>
+      isAuthenticated() ? (
+        <Component {...props} />
+      ) : (
+          <Redirect
+            to={{
+              pathname: "/signin",
+              state: { from: props.location }
+            }}
+          />
+        )
+    }
+  />
+);
+
+export default PrivateRoute;
+
diff --git a/src/auth/index.js b/src/auth/index.js
@@ -0,0 +1,118 @@
+export const signup = user => {
+  return fetch(`${process.env.REACT_APP_API_URL}/signup`, {
+      method: "POST",
+      headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json"
+      },
+      body: JSON.stringify(user)
+  })
+      .then(response => {
+          return response.json();
+      })
+      .catch(err => console.log(err));
+};
+
+export const signin = user => {
+  return fetch(`${process.env.REACT_APP_API_URL}/signin`, {
+      method: "POST",
+      headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json"
+      },
+      body: JSON.stringify(user)
+  })
+      .then(response => {
+          return response.json();
+      })
+      .catch(error => console.log(error.message));
+};
+
+export const authenticate = (jwt, next) => {
+  if (typeof window !== "undefined") {
+      localStorage.setItem("jwt", JSON.stringify(jwt));
+      next();
+  }
+};
+
+export const setName = (name, next) => {
+  if (typeof window !== "undefined") {
+      localStorage.setItem("username", JSON.stringify(name));
+      next();
+  }
+};
+
+export const signout = next => {
+  if (typeof window !== "undefined") localStorage.removeItem("jwt");
+  next();
+  return fetch(`${process.env.REACT_APP_API_URL}/signout`, {
+      method: "GET"
+  })
+      .then(response => {
+          console.log("signout", response);
+          return response.json();
+      })
+      .catch(err => console.log(err));
+};
+
+export const isAuthenticated = () => {
+  if (typeof window == "undefined") {
+      return false;
+  }
+
+  if (localStorage.getItem("jwt")) {
+      return JSON.parse(localStorage.getItem("jwt"));
+  } else {
+      return false;
+  }
+};
+
+export const forgotPassword = email => {
+  console.log("email: ", email);
+  return fetch(`${process.env.REACT_APP_API_URL}/forgot-password/`, {
+      method: "PUT",
+      headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ email })
+  })
+      .then(response => {
+          console.log("forgot password response: ", response);
+          return response.json();
+      })
+      .catch(err => console.log(err));
+};
+
+export const resetPassword = resetInfo => {
+  return fetch(`${process.env.REACT_APP_API_URL}/reset-password/`, {
+      method: "PUT",
+      headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json"
+      },
+      body: JSON.stringify(resetInfo)
+  })
+      .then(response => {
+          console.log("forgot password response: ", response);
+          return response.json();
+      })
+      .catch(err => console.log(err));
+};
+
+export const socialLogin = user => {
+  return fetch(`${process.env.REACT_APP_API_URL}/social-login/`, {
+      method: "POST",
+      headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json"
+      },
+      // credentials: "include", // works only in the same origin
+      body: JSON.stringify(user)
+  })
+      .then(response => {
+          console.log("signin response: ", response);
+          return response.json();
+      })
+      .catch(err => console.log(err));
+};
diff --git a/src/config/dev.js b/src/config/dev.js
@@ -0,0 +1,3 @@
+module.exports = {
+  googleClientID: '964065615567-reme3m7opjq3521rks0j4m90gdddqqoa.apps.googleusercontent.com',
+};