project done
This commit is contained in:
QkoSad
@@ -0,0 +1,3 @@
|
||||
node_modules
|
||||
default.json
|
||||
.vscode
|
||||
Generated
+28706
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,47 @@
|
||||
{
|
||||
"name": "client",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^1.1.3",
|
||||
"moment": "^2.29.4",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-moment": "^1.1.2",
|
||||
"react-redux": "^8.0.4",
|
||||
"react-router-dom": "^6.4.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"redux": "^4.2.0",
|
||||
"redux-devtools-extension": "^2.13.9",
|
||||
"redux-thunk": "^2.4.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"proxy":"http://localhost:5000/"
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
@@ -0,0 +1,21 @@
|
||||
<!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" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
|
||||
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<title>Welcome To DevConnector</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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"
|
||||
}
|
||||
@@ -0,0 +1,584 @@
|
||||
/* Global Styles */
|
||||
:root {
|
||||
--primary-color: #17a2b8;
|
||||
--dark-color: #343a40;
|
||||
--light-color: #f4f4f4;
|
||||
--danger-color: #dc3545;
|
||||
--success-color: #28a745;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Utilities */
|
||||
.container {
|
||||
max-width: 1100px;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
padding: 0 2rem;
|
||||
margin-top: 6rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
/* Text Styles*/
|
||||
.x-large {
|
||||
font-size: 4rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.large {
|
||||
font-size: 3rem;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.text-dark {
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
/* Padding */
|
||||
.p {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.p-1 {
|
||||
padding: 1rem;
|
||||
}
|
||||
.p-2 {
|
||||
padding: 2rem;
|
||||
}
|
||||
.p-3 {
|
||||
padding: 3rem;
|
||||
}
|
||||
.py {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
.py-1 {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.py-2 {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
.py-3 {
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
/* Margin */
|
||||
.m {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
.m-1 {
|
||||
margin: 1rem;
|
||||
}
|
||||
.m-2 {
|
||||
margin: 2rem;
|
||||
}
|
||||
.m-3 {
|
||||
margin: 3rem;
|
||||
}
|
||||
.my {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.my-1 {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.my-2 {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.my-3 {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
background: var(--light-color);
|
||||
color: #333;
|
||||
padding: 0.4rem 1.3rem;
|
||||
font-size: 1rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin-right: 0.5rem;
|
||||
transition: opacity 0.2s ease-in;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.1rem;
|
||||
text-align: center;
|
||||
margin: 0.3rem;
|
||||
background: var(--light-color);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 0.8rem;
|
||||
margin: 1rem 0;
|
||||
opacity: 0.9;
|
||||
background: var(--light-color);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.bg-primary,
|
||||
.badge-primary,
|
||||
.alert-primary {
|
||||
background: var(--primary-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-light,
|
||||
.bg-light,
|
||||
.badge-light,
|
||||
.alert-light {
|
||||
background: var(--light-color);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn-dark,
|
||||
.bg-dark,
|
||||
.badge-dark,
|
||||
.alert-dark {
|
||||
background: var(--dark-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-danger,
|
||||
.bg-danger,
|
||||
.badge-danger,
|
||||
.alert-danger {
|
||||
background: var(--danger-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-success,
|
||||
.bg-success,
|
||||
.badge-success,
|
||||
.alert-success {
|
||||
background: var(--success-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-white,
|
||||
.bg-white,
|
||||
.badge-white,
|
||||
.alert-white {
|
||||
background: #fff;
|
||||
color: #333;
|
||||
border: #ccc solid 1px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.bg-light,
|
||||
.badge-light {
|
||||
border: #ccc solid 1px;
|
||||
}
|
||||
|
||||
.round-img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 1px;
|
||||
background: #ccc;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
/* Overlay */
|
||||
.dark-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.form .form-group {
|
||||
margin: 1.2rem 0;
|
||||
}
|
||||
|
||||
.form .form-text {
|
||||
display: block;
|
||||
margin-top: 0.3rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.form input[type='text'],
|
||||
.form input[type='email'],
|
||||
.form input[type='password'],
|
||||
.form input[type='date'],
|
||||
.form select,
|
||||
.form textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.4rem;
|
||||
font-size: 1.2rem;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.form input[type='submit'],
|
||||
button {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.form .social-input {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.form .social-input i {
|
||||
padding: 0.5rem;
|
||||
width: 4rem;
|
||||
}
|
||||
|
||||
.form .social-input i.fa-twitter {
|
||||
color: #38a1f3;
|
||||
}
|
||||
.form .social-input i.fa-facebook {
|
||||
color: #3b5998;
|
||||
}
|
||||
.form .social-input i.fa-instagram {
|
||||
color: #3f729b;
|
||||
}
|
||||
.form .social-input i.fa-youtube {
|
||||
color: #c4302b;
|
||||
}
|
||||
.form .social-input i.fa-linkedin {
|
||||
color: #0077b5;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table th {
|
||||
background: var(--light-color);
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.7rem 2rem;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
border-bottom: solid 1px var(--primary-color);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.navbar ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: #fff;
|
||||
padding: 0.45rem;
|
||||
margin: 0 0.25rem;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.navbar .welcome span {
|
||||
margin-right: 0.6rem;
|
||||
}
|
||||
|
||||
/* Landing Page */
|
||||
.landing {
|
||||
position: relative;
|
||||
background: url('./img/vimCheatSheet.jpg') no-repeat center center/cover;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.landing-inner {
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Profiles Page */
|
||||
.profile {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 4fr 2fr;
|
||||
align-items: center;
|
||||
grid-gap: 2rem;
|
||||
padding: 1rem;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Profile Page */
|
||||
.profile-grid {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'top top'
|
||||
'about about'
|
||||
'exp edu'
|
||||
'github github';
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
.profile-top {
|
||||
grid-area: top;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profile-top img {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.profile-top .icons a {
|
||||
color: #fff;
|
||||
margin: 0 0.3rem;
|
||||
}
|
||||
|
||||
.profile-top .icons a:hover {
|
||||
color: var(--dark-color);
|
||||
}
|
||||
|
||||
.profile-about {
|
||||
grid-area: about;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profile-about .skills {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profile-exp {
|
||||
grid-area: exp;
|
||||
}
|
||||
|
||||
.profile-edu {
|
||||
grid-area: edu;
|
||||
}
|
||||
|
||||
.profile-exp h2,
|
||||
.profile-edu h2 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.profile-exp > div,
|
||||
.profile-edu > div {
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: #ccc 1px dotted;
|
||||
}
|
||||
|
||||
.profile-exp > div:last-child,
|
||||
.profile-edu > div:last-child {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.profile-exp p,
|
||||
.profile-edu p {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.profile-github {
|
||||
grid-area: github;
|
||||
}
|
||||
|
||||
.profile-github .repo {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.profile-github .repo > div:first-child {
|
||||
flex: 7;
|
||||
flex-basis: 70%;
|
||||
}
|
||||
|
||||
.profile-github > div:last-child {
|
||||
flex: 3;
|
||||
flex-basis: 20%;
|
||||
}
|
||||
|
||||
/* Posts Page */
|
||||
.post-form .post-form-header {
|
||||
background: var(--primary-color);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.post {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr;
|
||||
grid-gap: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.post > div:first-child {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.post img {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.post .comment-count {
|
||||
background: var(--light-color);
|
||||
color: var(--primary-color);
|
||||
padding: 0.1rem 0.2rem;
|
||||
border-radius: 5px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.post .post-date {
|
||||
color: #aaa;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Mobile Styles */
|
||||
@media (max-width: 700px) {
|
||||
.container {
|
||||
margin-top: 8rem;
|
||||
}
|
||||
|
||||
.hide-sm {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Text Styles */
|
||||
.x-large {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.large {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
.navbar {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbar ul {
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navbar h1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.navbar .welcome {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Profiles Page */
|
||||
.profile {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profile ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Profile Page */
|
||||
|
||||
.profile-top img,
|
||||
.profile img {
|
||||
width: 200px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.profile-grid {
|
||||
grid-template-areas:
|
||||
'top'
|
||||
'about'
|
||||
'exp'
|
||||
'edu'
|
||||
'github';
|
||||
}
|
||||
|
||||
.profile-about .skills {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dash-buttons a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.post {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.post a,
|
||||
.post button {
|
||||
padding: 0.3rem 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-wrapper {
|
||||
position: fixed;
|
||||
top: 4rem;
|
||||
right: 2rem;
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
|
||||
import Navbar from "./components/layout/Navbar";
|
||||
import Landing from "./components/layout/Landing";
|
||||
import Register from "./components/auth/Register";
|
||||
import Login from "./components/auth/Login";
|
||||
import Alert from "./components/layout/Alert";
|
||||
import Dashboard from "./components/dashboard/Dashboard";
|
||||
import ProfileForm from "./components/profile-forms/ProfileForm";
|
||||
import AddExperience from "./components/profile-forms/AddExperience";
|
||||
import AddEducation from "./components/profile-forms/AddEducation";
|
||||
import Profiles from "./components/profiles/Profiles";
|
||||
import Profile from "./components/profile/Profile";
|
||||
import Posts from "./components/posts/Posts";
|
||||
import Post from "./components/post/Post";
|
||||
import NotFound from "./components/layout/NotFound";
|
||||
import PrivateRoute from "./components/routing/PrivateRoute";
|
||||
import { LOGOUT } from "./actions/types";
|
||||
|
||||
// Redux
|
||||
import { Provider } from "react-redux";
|
||||
import store from "./store";
|
||||
import { loadUser } from "./actions/auth";
|
||||
import setAuthToken from "./utils/setAuthToken";
|
||||
|
||||
import "./App.css";
|
||||
|
||||
const App = () => {
|
||||
useEffect(() => {
|
||||
// check for token in LS when app first runs
|
||||
if (localStorage.token) {
|
||||
// if there is a token set axios headers for all requests
|
||||
setAuthToken(localStorage.token);
|
||||
}
|
||||
// try to fetch a user, if no token or invalid token we
|
||||
// will get a 401 response from our API
|
||||
store.dispatch(loadUser());
|
||||
|
||||
// log user out from all tabs if they log out in one tab
|
||||
window.addEventListener("storage", () => {
|
||||
if (!localStorage.token) store.dispatch({ type: LOGOUT });
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<Router>
|
||||
<Navbar />
|
||||
<Alert />
|
||||
<Routes>
|
||||
<Route path="/" element={<Landing />} />
|
||||
<Route path="register" element={<Register />} />
|
||||
<Route path="login" element={<Login />} />
|
||||
<Route path="profiles" element={<Profiles />} />
|
||||
<Route path="porifles/:id" element={<Profile />} />
|
||||
<Route
|
||||
path="dashboard"
|
||||
element={<PrivateRoute component={Dashboard} />}
|
||||
/>
|
||||
<Route
|
||||
path="create-profile"
|
||||
element={<PrivateRoute component={ProfileForm} />}
|
||||
/>
|
||||
<Route
|
||||
path="edit-profile"
|
||||
element={<PrivateRoute component={ProfileForm} />}
|
||||
/>
|
||||
<Route
|
||||
path="add-experience"
|
||||
element={<PrivateRoute component={AddExperience} />}
|
||||
/>
|
||||
<Route
|
||||
path="add-education"
|
||||
element={<PrivateRoute component={AddEducation} />}
|
||||
/>
|
||||
<Route path="posts" element={<PrivateRoute component={Posts} />} />
|
||||
<Route path="posts/:id" element={<PrivateRoute component={Post} />} />
|
||||
<Route path="/*" element={<NotFound />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
</Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,12 @@
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { SET_ALERT, REMOVE_ALERT } from './types';
|
||||
|
||||
export const setAlert = (msg, alertType, timeout = 5000) => dispatch => {
|
||||
const id = uuidv4();
|
||||
dispatch({
|
||||
type: SET_ALERT,
|
||||
payload: { msg, alertType, id }
|
||||
});
|
||||
|
||||
setTimeout(() => dispatch({ type: REMOVE_ALERT, payload: id }), timeout);
|
||||
};
|
||||
@@ -0,0 +1,86 @@
|
||||
import api from "../utils/api";
|
||||
import { setAlert } from "./alert";
|
||||
import {
|
||||
REGISTER_SUCCESS,
|
||||
REGISTER_FAIL,
|
||||
USER_LOADED,
|
||||
AUTH_ERROR,
|
||||
LOGIN_SUCCESS,
|
||||
LOGIN_FAIL,
|
||||
LOGOUT,
|
||||
} from "./types";
|
||||
|
||||
/*
|
||||
NOTE: we don't need a config object for axios as the
|
||||
default headers in axios are already Content-Type: application/json
|
||||
also axios stringifies and parses JSON for you, so no need for
|
||||
JSON.stringify or JSON.parse
|
||||
*/
|
||||
|
||||
// Load User
|
||||
|
||||
export const loadUser = () => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.get("/auth");
|
||||
dispatch({
|
||||
type: USER_LOADED,
|
||||
payload: res.data,
|
||||
});
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: AUTH_ERROR,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Register User
|
||||
export const register = (formData) => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.post("/users", formData);
|
||||
|
||||
dispatch({
|
||||
type: REGISTER_SUCCESS,
|
||||
payload: res.data,
|
||||
});
|
||||
dispatch(loadUser());
|
||||
} catch (err) {
|
||||
const errors = err.response.data.errors;
|
||||
|
||||
if (errors) {
|
||||
errors.forEach((error) => dispatch(setAlert(error.msg, "danger")));
|
||||
}
|
||||
|
||||
dispatch({
|
||||
type: REGISTER_FAIL,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Login User
|
||||
export const login = (email, password) => async (dispatch) => {
|
||||
const body = { email, password };
|
||||
|
||||
try {
|
||||
const res = await api.post("/auth", body);
|
||||
|
||||
dispatch({
|
||||
type: LOGIN_SUCCESS,
|
||||
payload: res.data,
|
||||
});
|
||||
|
||||
dispatch(loadUser());
|
||||
} catch (err) {
|
||||
const errors = err.response.data.errors;
|
||||
|
||||
if (errors) {
|
||||
errors.forEach((error) => dispatch(setAlert(error.msg, "danger")));
|
||||
}
|
||||
|
||||
dispatch({
|
||||
type: LOGIN_FAIL,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Logout
|
||||
export const logout = () => ({ type: LOGOUT });
|
||||
@@ -0,0 +1,163 @@
|
||||
import api from '../utils/api';
|
||||
import { setAlert } from './alert';
|
||||
import {
|
||||
GET_POSTS,
|
||||
POST_ERROR,
|
||||
UPDATE_LIKES,
|
||||
DELETE_POST,
|
||||
ADD_POST,
|
||||
GET_POST,
|
||||
ADD_COMMENT,
|
||||
REMOVE_COMMENT
|
||||
} from './types';
|
||||
|
||||
/*
|
||||
NOTE: we don't need a config object for axios as the
|
||||
default headers in axios are already Content-Type: application/json
|
||||
also axios stringifies and parses JSON for you, so no need for
|
||||
JSON.stringify or JSON.parse
|
||||
*/
|
||||
|
||||
// Get posts
|
||||
export const getPosts = () => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.get('/posts');
|
||||
|
||||
dispatch({
|
||||
type: GET_POSTS,
|
||||
payload: res.data
|
||||
});
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: POST_ERROR,
|
||||
payload: { msg: err.response.statusText, status: err.response.status }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Add like
|
||||
export const addLike = (id) => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.put(`/posts/like/${id}`);
|
||||
|
||||
dispatch({
|
||||
type: UPDATE_LIKES,
|
||||
payload: { id, likes: res.data }
|
||||
});
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: POST_ERROR,
|
||||
payload: { msg: err.response.statusText, status: err.response.status }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Remove like
|
||||
export const removeLike = (id) => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.put(`/posts/unlike/${id}`);
|
||||
|
||||
dispatch({
|
||||
type: UPDATE_LIKES,
|
||||
payload: { id, likes: res.data }
|
||||
});
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: POST_ERROR,
|
||||
payload: { msg: err.response.statusText, status: err.response.status }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Delete post
|
||||
export const deletePost = (id) => async (dispatch) => {
|
||||
try {
|
||||
await api.delete(`/posts/${id}`);
|
||||
|
||||
dispatch({
|
||||
type: DELETE_POST,
|
||||
payload: id
|
||||
});
|
||||
|
||||
dispatch(setAlert('Post Removed', 'success'));
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: POST_ERROR,
|
||||
payload: { msg: err.response.statusText, status: err.response.status }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Add post
|
||||
export const addPost = (formData) => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.post('/posts', formData);
|
||||
|
||||
dispatch({
|
||||
type: ADD_POST,
|
||||
payload: res.data
|
||||
});
|
||||
|
||||
dispatch(setAlert('Post Created', 'success'));
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: POST_ERROR,
|
||||
payload: { msg: err.response.statusText, status: err.response.status }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Get post
|
||||
export const getPost = (id) => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.get(`/posts/${id}`);
|
||||
|
||||
dispatch({
|
||||
type: GET_POST,
|
||||
payload: res.data
|
||||
});
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: POST_ERROR,
|
||||
payload: { msg: err.response.statusText, status: err.response.status }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Add comment
|
||||
export const addComment = (postId, formData) => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.post(`/posts/comment/${postId}`, formData);
|
||||
|
||||
dispatch({
|
||||
type: ADD_COMMENT,
|
||||
payload: res.data
|
||||
});
|
||||
|
||||
dispatch(setAlert('Comment Added', 'success'));
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: POST_ERROR,
|
||||
payload: { msg: err.response.statusText, status: err.response.status }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Delete comment
|
||||
export const deleteComment = (postId, commentId) => async (dispatch) => {
|
||||
try {
|
||||
await api.delete(`/posts/comment/${postId}/${commentId}`);
|
||||
|
||||
dispatch({
|
||||
type: REMOVE_COMMENT,
|
||||
payload: commentId
|
||||
});
|
||||
|
||||
dispatch(setAlert('Comment Removed', 'success'));
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: POST_ERROR,
|
||||
payload: { msg: err.response.statusText, status: err.response.status }
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,233 @@
|
||||
import api from '../utils/api';
|
||||
import { setAlert } from './alert';
|
||||
|
||||
import {
|
||||
GET_PROFILE,
|
||||
GET_PROFILES,
|
||||
PROFILE_ERROR,
|
||||
UPDATE_PROFILE,
|
||||
CLEAR_PROFILE,
|
||||
ACCOUNT_DELETED,
|
||||
GET_REPOS,
|
||||
NO_REPOS
|
||||
} from './types';
|
||||
|
||||
/*
|
||||
NOTE: we don't need a config object for axios as the
|
||||
default headers in axios are already Content-Type: application/json
|
||||
also axios stringifies and parses JSON for you, so no need for
|
||||
JSON.stringify or JSON.parse
|
||||
*/
|
||||
|
||||
// Get current users profile
|
||||
export const getCurrentProfile = () => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.get('/profile/me');
|
||||
|
||||
dispatch({
|
||||
type: GET_PROFILE,
|
||||
payload: res.data
|
||||
});
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: PROFILE_ERROR,
|
||||
payload: { msg: err.response.statusText, status: err.response.status }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Get all profiles
|
||||
export const getProfiles = () => async (dispatch) => {
|
||||
dispatch({ type: CLEAR_PROFILE });
|
||||
|
||||
try {
|
||||
const res = await api.get('/profile');
|
||||
|
||||
dispatch({
|
||||
type: GET_PROFILES,
|
||||
payload: res.data
|
||||
});
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: PROFILE_ERROR,
|
||||
payload: { msg: err.response.statusText, status: err.response.status }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Get profile by ID
|
||||
export const getProfileById = (userId) => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.get(`/profile/user/${userId}`);
|
||||
|
||||
dispatch({
|
||||
type: GET_PROFILE,
|
||||
payload: res.data
|
||||
});
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: PROFILE_ERROR,
|
||||
payload: { msg: err.response.statusText, status: err.response.status }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Get Github repos
|
||||
export const getGithubRepos = (username) => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.get(`/profile/github/${username}`);
|
||||
|
||||
dispatch({
|
||||
type: GET_REPOS,
|
||||
payload: res.data
|
||||
});
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: NO_REPOS
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Create or update profile
|
||||
export const createProfile =
|
||||
(formData, navigate, edit = false) =>
|
||||
async (dispatch) => {
|
||||
try {
|
||||
const res = await api.post('/profile', formData);
|
||||
|
||||
dispatch({
|
||||
type: GET_PROFILE,
|
||||
payload: res.data
|
||||
});
|
||||
|
||||
dispatch(
|
||||
setAlert(edit ? 'Profile Updated' : 'Profile Created', 'success')
|
||||
);
|
||||
|
||||
if (!edit) {
|
||||
navigate('/dashboard');
|
||||
}
|
||||
} catch (err) {
|
||||
const errors = err.response.data.errors;
|
||||
|
||||
if (errors) {
|
||||
errors.forEach((error) => dispatch(setAlert(error.msg, 'danger')));
|
||||
}
|
||||
|
||||
dispatch({
|
||||
type: PROFILE_ERROR,
|
||||
payload: { msg: err.response.statusText, status: err.response.status }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Add Experience
|
||||
export const addExperience = (formData, navigate) => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.put('/profile/experience', formData);
|
||||
|
||||
dispatch({
|
||||
type: UPDATE_PROFILE,
|
||||
payload: res.data
|
||||
});
|
||||
|
||||
dispatch(setAlert('Experience Added', 'success'));
|
||||
|
||||
navigate('/dashboard');
|
||||
} catch (err) {
|
||||
const errors = err.response.data.errors;
|
||||
|
||||
if (errors) {
|
||||
errors.forEach((error) => dispatch(setAlert(error.msg, 'danger')));
|
||||
}
|
||||
|
||||
dispatch({
|
||||
type: PROFILE_ERROR,
|
||||
payload: { msg: err.response.statusText, status: err.response.status }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Add Education
|
||||
export const addEducation = (formData, navigate) => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.put('/profile/education', formData);
|
||||
|
||||
dispatch({
|
||||
type: UPDATE_PROFILE,
|
||||
payload: res.data
|
||||
});
|
||||
|
||||
dispatch(setAlert('Education Added', 'success'));
|
||||
|
||||
navigate('/dashboard');
|
||||
} catch (err) {
|
||||
const errors = err.response.data.errors;
|
||||
|
||||
if (errors) {
|
||||
errors.forEach((error) => dispatch(setAlert(error.msg, 'danger')));
|
||||
}
|
||||
|
||||
dispatch({
|
||||
type: PROFILE_ERROR,
|
||||
payload: { msg: err.response.statusText, status: err.response.status }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Delete experience
|
||||
export const deleteExperience = (id) => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.delete(`/profile/experience/${id}`);
|
||||
|
||||
dispatch({
|
||||
type: UPDATE_PROFILE,
|
||||
payload: res.data
|
||||
});
|
||||
|
||||
dispatch(setAlert('Experience Removed', 'success'));
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: PROFILE_ERROR,
|
||||
payload: { msg: err.response.statusText, status: err.response.status }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Delete education
|
||||
export const deleteEducation = (id) => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.delete(`/profile/education/${id}`);
|
||||
|
||||
dispatch({
|
||||
type: UPDATE_PROFILE,
|
||||
payload: res.data
|
||||
});
|
||||
|
||||
dispatch(setAlert('Education Removed', 'success'));
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: PROFILE_ERROR,
|
||||
payload: { msg: err.response.statusText, status: err.response.status }
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Delete account & profile
|
||||
export const deleteAccount = () => async (dispatch) => {
|
||||
if (window.confirm('Are you sure? This can NOT be undone!')) {
|
||||
try {
|
||||
await api.delete('/profile');
|
||||
|
||||
dispatch({ type: CLEAR_PROFILE });
|
||||
dispatch({ type: ACCOUNT_DELETED });
|
||||
|
||||
dispatch(setAlert('Your account has been permanently deleted'));
|
||||
} catch (err) {
|
||||
dispatch({
|
||||
type: PROFILE_ERROR,
|
||||
payload: { msg: err.response.statusText, status: err.response.status }
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
export const SET_ALERT = 'SET_ALERT';
|
||||
export const REMOVE_ALERT = 'REMOVE_ALERT';
|
||||
export const REGISTER_SUCCESS = 'REGISTER_SUCCESS';
|
||||
export const REGISTER_FAIL = 'REGISTER_FAIL';
|
||||
export const USER_LOADED = 'USER_LOADED';
|
||||
export const AUTH_ERROR = 'AUTH_ERROR';
|
||||
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
|
||||
export const LOGIN_FAIL = 'LOGIN_FAIL';
|
||||
export const LOGOUT = 'LOGOUT';
|
||||
export const GET_PROFILE = 'GET_PROFILE';
|
||||
export const GET_PROFILES = 'GET_PROFILES';
|
||||
export const GET_REPOS = 'GET_REPOS';
|
||||
export const NO_REPOS = 'NO_REPOS';
|
||||
export const UPDATE_PROFILE = 'UPDATE_PROFILE';
|
||||
export const CLEAR_PROFILE = 'CLEAR_PROFILE';
|
||||
export const PROFILE_ERROR = 'PROFILE_ERROR';
|
||||
export const ACCOUNT_DELETED = 'ACCOUNT_DELETED';
|
||||
export const GET_POSTS = 'GET_POSTS';
|
||||
export const GET_POST = 'GET_POST';
|
||||
export const POST_ERROR = 'POST_ERROR';
|
||||
export const UPDATE_LIKES = 'UPDATE_LIKES';
|
||||
export const DELETE_POST = 'DELETE_POST';
|
||||
export const ADD_POST = 'ADD_POST';
|
||||
export const ADD_COMMENT = 'ADD_COMMENT';
|
||||
export const REMOVE_COMMENT = 'REMOVE_COMMENT';
|
||||
@@ -0,0 +1,71 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link, Navigate } from 'react-router-dom';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import { login } from '../../actions/auth';
|
||||
|
||||
const Login = ({ login, isAuthenticated }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
email: '',
|
||||
password: ''
|
||||
});
|
||||
|
||||
const { email, password } = formData;
|
||||
|
||||
const onChange = (e) =>
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
|
||||
const onSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
login(email, password);
|
||||
};
|
||||
|
||||
if (isAuthenticated) {
|
||||
return <Navigate to="/dashboard" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="container">
|
||||
<h1 className="large text-primary">Sign In</h1>
|
||||
<p className="lead">
|
||||
<i className="fas fa-user" /> Sign Into Your Account
|
||||
</p>
|
||||
<form className="form" onSubmit={onSubmit}>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email Address"
|
||||
name="email"
|
||||
value={email}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
name="password"
|
||||
value={password}
|
||||
onChange={onChange}
|
||||
minLength="6"
|
||||
/>
|
||||
</div>
|
||||
<input type="submit" className="btn btn-primary" value="Login" />
|
||||
</form>
|
||||
<p className="my-1">
|
||||
Don't have an account? <Link to="/register">Sign Up</Link>
|
||||
</p>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
Login.propTypes = {
|
||||
login: PropTypes.func.isRequired,
|
||||
isAuthenticated: PropTypes.bool
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
isAuthenticated: state.auth.isAuthenticated
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { login })(Login);
|
||||
@@ -0,0 +1,100 @@
|
||||
import React, { useState } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Link, Navigate } from 'react-router-dom';
|
||||
import { setAlert } from '../../actions/alert';
|
||||
import { register } from '../../actions/auth';
|
||||
|
||||
const Register = ({ setAlert, register, isAuthenticated }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password2: ''
|
||||
});
|
||||
|
||||
const { name, email, password, password2 } = formData;
|
||||
|
||||
const onChange = (e) =>
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
|
||||
const onSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
if (password !== password2) {
|
||||
setAlert('Passwords do not match', 'danger');
|
||||
} else {
|
||||
register({ name, email, password });
|
||||
}
|
||||
};
|
||||
|
||||
if (isAuthenticated) {
|
||||
return <Navigate to="/dashboard" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="container">
|
||||
<h1 className="large text-primary">Sign Up</h1>
|
||||
<p className="lead">
|
||||
<i className="fas fa-user" /> Create Your Account
|
||||
</p>
|
||||
<form className="form" onSubmit={onSubmit}>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Name"
|
||||
name="name"
|
||||
value={name}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email Address"
|
||||
name="email"
|
||||
value={email}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<small className="form-text">
|
||||
This site uses Gravatar so if you want a profile image, use a
|
||||
Gravatar email
|
||||
</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
name="password"
|
||||
value={password}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="password"
|
||||
placeholder="Confirm Password"
|
||||
name="password2"
|
||||
value={password2}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
<input type="submit" className="btn btn-primary" value="Register" />
|
||||
</form>
|
||||
<p className="my-1">
|
||||
Already have an account? <Link to="/login">Sign In</Link>
|
||||
</p>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
Register.propTypes = {
|
||||
setAlert: PropTypes.func.isRequired,
|
||||
register: PropTypes.func.isRequired,
|
||||
isAuthenticated: PropTypes.bool
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
isAuthenticated: state.auth.isAuthenticated
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { setAlert, register })(Register);
|
||||
@@ -0,0 +1,64 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import PropTypes from "prop-types";
|
||||
import { connect } from "react-redux";
|
||||
import DashboardActions from "./DashboardActions";
|
||||
import Experience from "./Experience";
|
||||
import Education from "./Education";
|
||||
import { getCurrentProfile, deleteAccount } from "../../actions/profile";
|
||||
|
||||
const Dashboard = ({
|
||||
getCurrentProfile,
|
||||
deleteAccount,
|
||||
auth: { user },
|
||||
profile: { profile },
|
||||
}) => {
|
||||
useEffect(() => {
|
||||
getCurrentProfile();
|
||||
}, [getCurrentProfile]);
|
||||
|
||||
return (
|
||||
<section className="container">
|
||||
<h1 className="large text-primary">Dashboard</h1>
|
||||
<p className="lead">
|
||||
<i className="fas fa-user" /> Welcome {user && user.name}
|
||||
</p>
|
||||
{profile !== null ? (
|
||||
<>
|
||||
<DashboardActions />
|
||||
<Experience experience={profile.experience} />
|
||||
<Education education={profile.education} />
|
||||
|
||||
<div className="my-2">
|
||||
<button className="btn btn-danger" onClick={() => deleteAccount()}>
|
||||
<i className="fas fa-user-minus" /> Delete My Account
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p>You have not yet setup a profile, please add some info</p>
|
||||
<Link to="/create-profile" className="btn btn-primary my-1">
|
||||
Create Profile
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
Dashboard.propTypes = {
|
||||
getCurrentProfile: PropTypes.func.isRequired,
|
||||
deleteAccount: PropTypes.func.isRequired,
|
||||
auth: PropTypes.object.isRequired,
|
||||
profile: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
auth: state.auth,
|
||||
profile: state.profile,
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { getCurrentProfile, deleteAccount })(
|
||||
Dashboard
|
||||
);
|
||||
@@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const DashboardActions = () => {
|
||||
return (
|
||||
<div className='dash-buttons'>
|
||||
<Link to='/edit-profile' className='btn btn-light'>
|
||||
<i className='fas fa-user-circle text-primary' /> Edit Profile
|
||||
</Link>
|
||||
<Link to='/add-experience' className='btn btn-light'>
|
||||
<i className='fab fa-black-tie text-primary' /> Add Experience
|
||||
</Link>
|
||||
<Link to='/add-education' className='btn btn-light'>
|
||||
<i className='fas fa-graduation-cap text-primary' /> Add Education
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DashboardActions;
|
||||
@@ -0,0 +1,49 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { deleteEducation } from '../../actions/profile';
|
||||
import formatDate from '../../utils/formatDate';
|
||||
|
||||
const Education = ({ education, deleteEducation }) => {
|
||||
const educations = education.map((edu) => (
|
||||
<tr key={edu._id}>
|
||||
<td>{edu.school}</td>
|
||||
<td className="hide-sm">{edu.degree}</td>
|
||||
<td>
|
||||
{formatDate(edu.from)} - {edu.to ? formatDate(edu.to) : 'Now'}
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
onClick={() => deleteEducation(edu._id)}
|
||||
className="btn btn-danger"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
));
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<h2 className="my-2">Education Credentials</h2>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>School</th>
|
||||
<th className="hide-sm">Degree</th>
|
||||
<th className="hide-sm">Years</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{educations}</tbody>
|
||||
</table>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
Education.propTypes = {
|
||||
education: PropTypes.array.isRequired,
|
||||
deleteEducation: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default connect(null, { deleteEducation })(Education);
|
||||
@@ -0,0 +1,50 @@
|
||||
|
||||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { deleteExperience } from '../../actions/profile';
|
||||
import formatDate from '../../utils/formatDate';
|
||||
|
||||
const Experience = ({ experience, deleteExperience }) => {
|
||||
const experiences = experience.map((exp) => (
|
||||
<tr key={exp._id}>
|
||||
<td>{exp.company}</td>
|
||||
<td className="hide-sm">{exp.title}</td>
|
||||
<td>
|
||||
{formatDate(exp.from)} - {exp.to ? formatDate(exp.to) : 'Now'}
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
onClick={() => deleteExperience(exp._id)}
|
||||
className="btn btn-danger"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
));
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<h2 className="my-2">Experience Credentials</h2>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Company</th>
|
||||
<th className="hide-sm">Title</th>
|
||||
<th className="hide-sm">Years</th>
|
||||
<th />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{experiences}</tbody>
|
||||
</table>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
Experience.propTypes = {
|
||||
experience: PropTypes.array.isRequired,
|
||||
deleteExperience: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default connect(null, { deleteExperience })(Experience);
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
const Alert = ({ alerts }) => (
|
||||
<div className="alert-wrapper">
|
||||
{alerts.map((alert) => (
|
||||
<div key={alert.id} className={`alert alert-${alert.alertType}`}>
|
||||
{alert.msg}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
Alert.propTypes = {
|
||||
alerts: PropTypes.array.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
alerts: state.alert
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(Alert);
|
||||
@@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import { Link, Navigate } from 'react-router-dom';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const Landing = ({ isAuthenticated }) => {
|
||||
if (isAuthenticated) {
|
||||
return <Navigate to='/dashboard' />;
|
||||
}
|
||||
|
||||
return (
|
||||
<section className='landing'>
|
||||
<div className='dark-overlay'>
|
||||
<div className='landing-inner'>
|
||||
<h1 className='x-large'>Developer Connector</h1>
|
||||
<p className='lead'>
|
||||
Create a developer profile/portfolio, share posts and get help from
|
||||
other developers
|
||||
</p>
|
||||
<div className='buttons'>
|
||||
<Link to='/register' className='btn btn-primary'>
|
||||
Sign Up
|
||||
</Link>
|
||||
<Link to='/login' className='btn btn-light'>
|
||||
Login
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
Landing.propTypes = {
|
||||
isAuthenticated: PropTypes.bool
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
isAuthenticated: state.auth.isAuthenticated
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(Landing);
|
||||
@@ -0,0 +1,66 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { connect } from 'react-redux';
|
||||
import PropTypes from 'prop-types';
|
||||
import { logout } from '../../actions/auth';
|
||||
|
||||
const Navbar = ({ auth: { isAuthenticated }, logout }) => {
|
||||
const authLinks = (
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/profiles">Developers</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/posts">Posts</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/dashboard">
|
||||
<i className="fas fa-user" />{' '}
|
||||
<span className="hide-sm">Dashboard</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a onClick={logout} href="#!">
|
||||
<i className="fas fa-sign-out-alt" />{' '}
|
||||
<span className="hide-sm">Logout</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
|
||||
const guestLinks = (
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/profiles">Developers</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/register">Register</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/login">Login</Link>
|
||||
</li>
|
||||
</ul>
|
||||
);
|
||||
|
||||
return (
|
||||
<nav className="navbar bg-dark">
|
||||
<h1>
|
||||
<Link to="/">
|
||||
<i className="fas fa-code" /> DevConnector
|
||||
</Link>
|
||||
</h1>
|
||||
<Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
Navbar.propTypes = {
|
||||
logout: PropTypes.func.isRequired,
|
||||
auth: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
auth: state.auth
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { logout })(Navbar);
|
||||
@@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
|
||||
const NotFound = () => {
|
||||
return (
|
||||
<section className="container">
|
||||
<h1 className="x-large text-primary">
|
||||
<i className="fas fa-exclamation-triangle" /> Page Not Found
|
||||
</h1>
|
||||
<p className="large">Sorry, this page does not exist</p>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotFound;
|
||||
@@ -0,0 +1,14 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import spinner from './spinner.gif';
|
||||
|
||||
const Spinner = () => (
|
||||
<Fragment>
|
||||
<img
|
||||
src={spinner}
|
||||
style={{ width: '200px', margin: 'auto', display: 'block' }}
|
||||
alt="Loading..."
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
export default Spinner;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
@@ -0,0 +1,44 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { addComment } from '../../actions/post';
|
||||
|
||||
const CommentForm = ({ postId, addComment }) => {
|
||||
const [text, setText] = useState('');
|
||||
|
||||
return (
|
||||
<div className='post-form'>
|
||||
<div className='bg-primary p'>
|
||||
<h3>Leave a Comment</h3>
|
||||
</div>
|
||||
<form
|
||||
className='form my-1'
|
||||
onSubmit={e => {
|
||||
e.preventDefault();
|
||||
addComment(postId, { text });
|
||||
setText('');
|
||||
}}
|
||||
>
|
||||
<textarea
|
||||
name='text'
|
||||
cols='30'
|
||||
rows='5'
|
||||
placeholder='Comment the post'
|
||||
value={text}
|
||||
onChange={e => setText(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input type='submit' className='btn btn-dark my-1' value='Submit' />
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
CommentForm.propTypes = {
|
||||
addComment: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default connect(
|
||||
null,
|
||||
{ addComment }
|
||||
)(CommentForm);
|
||||
@@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import formatDate from '../../utils/formatDate';
|
||||
import { deleteComment } from '../../actions/post';
|
||||
|
||||
const CommentItem = ({
|
||||
postId,
|
||||
comment: { _id, text, name, avatar, user, date },
|
||||
auth,
|
||||
deleteComment
|
||||
}) => (
|
||||
<div className="post bg-white p-1 my-1">
|
||||
<div>
|
||||
<Link to={`/profile/${user}`}>
|
||||
<img className="round-img" src={avatar} alt="" />
|
||||
<h4>{name}</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<p className="my-1">{text}</p>
|
||||
<p className="post-date">Posted on {formatDate(date)}</p>
|
||||
{!auth.loading && user === auth.user._id && (
|
||||
<button
|
||||
onClick={() => deleteComment(postId, _id)}
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
>
|
||||
<i className="fas fa-times" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
CommentItem.propTypes = {
|
||||
postId: PropTypes.string.isRequired,
|
||||
comment: PropTypes.object.isRequired,
|
||||
auth: PropTypes.object.isRequired,
|
||||
deleteComment: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
auth: state.auth
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { deleteComment })(CommentItem);
|
||||
@@ -0,0 +1,44 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
import { connect } from 'react-redux';
|
||||
import Spinner from '../layout/Spinner';
|
||||
import PostItem from '../posts/PostItem';
|
||||
import CommentForm from '../post/CommentForm';
|
||||
import CommentItem from '../post/CommentItem';
|
||||
import { getPost } from '../../actions/post';
|
||||
|
||||
const Post = ({ getPost, post: { post, loading } }) => {
|
||||
const { id } = useParams();
|
||||
useEffect(() => {
|
||||
getPost(id);
|
||||
}, [getPost, id]);
|
||||
|
||||
return loading || post === null ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<section className="container">
|
||||
<Link to="/posts" className="btn">
|
||||
Back To Posts
|
||||
</Link>
|
||||
<PostItem post={post} showActions={false} />
|
||||
<CommentForm postId={post._id} />
|
||||
<div className="comments">
|
||||
{post.comments.map((comment) => (
|
||||
<CommentItem key={comment._id} comment={comment} postId={post._id} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
Post.propTypes = {
|
||||
getPost: PropTypes.func.isRequired,
|
||||
post: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
post: state.post
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { getPost })(Post);
|
||||
@@ -0,0 +1,44 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { addPost } from '../../actions/post';
|
||||
|
||||
const PostForm = ({ addPost }) => {
|
||||
const [text, setText] = useState('');
|
||||
|
||||
return (
|
||||
<div className='post-form'>
|
||||
<div className='bg-primary p'>
|
||||
<h3>Say Something...</h3>
|
||||
</div>
|
||||
<form
|
||||
className='form my-1'
|
||||
onSubmit={e => {
|
||||
e.preventDefault();
|
||||
addPost({ text });
|
||||
setText('');
|
||||
}}
|
||||
>
|
||||
<textarea
|
||||
name='text'
|
||||
cols='30'
|
||||
rows='5'
|
||||
placeholder='Create a post'
|
||||
value={text}
|
||||
onChange={e => setText(e.target.value)}
|
||||
required
|
||||
/>
|
||||
<input type='submit' className='btn btn-dark my-1' value='Submit' />
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
PostForm.propTypes = {
|
||||
addPost: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default connect(
|
||||
null,
|
||||
{ addPost }
|
||||
)(PostForm);
|
||||
@@ -0,0 +1,84 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Link } from 'react-router-dom';
|
||||
import formatDate from '../../utils/formatDate';
|
||||
import { connect } from 'react-redux';
|
||||
import { addLike, removeLike, deletePost } from '../../actions/post';
|
||||
|
||||
const PostItem = ({
|
||||
addLike,
|
||||
removeLike,
|
||||
deletePost,
|
||||
auth,
|
||||
post: { _id, text, name, avatar, user, likes, comments, date },
|
||||
showActions
|
||||
}) => (
|
||||
<div className="post bg-white p-1 my-1">
|
||||
<div>
|
||||
<Link to={`/profile/${user}`}>
|
||||
<img className="round-img" src={avatar} alt="" />
|
||||
<h4>{name}</h4>
|
||||
</Link>
|
||||
</div>
|
||||
<div>
|
||||
<p className="my-1">{text}</p>
|
||||
<p className="post-date">Posted on {formatDate(date)}</p>
|
||||
|
||||
{showActions && (
|
||||
<Fragment>
|
||||
<button
|
||||
onClick={() => addLike(_id)}
|
||||
type="button"
|
||||
className="btn btn-light"
|
||||
>
|
||||
<i className="fas fa-thumbs-up" />{' '}
|
||||
<span>{likes.length > 0 && <span>{likes.length}</span>}</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => removeLike(_id)}
|
||||
type="button"
|
||||
className="btn btn-light"
|
||||
>
|
||||
<i className="fas fa-thumbs-down" />
|
||||
</button>
|
||||
<Link to={`/posts/${_id}`} className="btn btn-primary">
|
||||
Discussion{' '}
|
||||
{comments.length > 0 && (
|
||||
<span className="comment-count">{comments.length}</span>
|
||||
)}
|
||||
</Link>
|
||||
{!auth.loading && user === auth.user._id && (
|
||||
<button
|
||||
onClick={() => deletePost(_id)}
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
>
|
||||
<i className="fas fa-times" />
|
||||
</button>
|
||||
)}
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
PostItem.defaultProps = {
|
||||
showActions: true
|
||||
};
|
||||
|
||||
PostItem.propTypes = {
|
||||
post: PropTypes.object.isRequired,
|
||||
auth: PropTypes.object.isRequired,
|
||||
addLike: PropTypes.func.isRequired,
|
||||
removeLike: PropTypes.func.isRequired,
|
||||
deletePost: PropTypes.func.isRequired,
|
||||
showActions: PropTypes.bool
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
auth: state.auth
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { addLike, removeLike, deletePost })(
|
||||
PostItem
|
||||
);
|
||||
@@ -0,0 +1,38 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import PostItem from './PostItem';
|
||||
import PostForm from './PostForm';
|
||||
import { getPosts } from '../../actions/post';
|
||||
|
||||
const Posts = ({ getPosts, post: { posts } }) => {
|
||||
useEffect(() => {
|
||||
getPosts();
|
||||
}, [getPosts]);
|
||||
|
||||
return (
|
||||
<section className="container">
|
||||
<h1 className="large text-primary">Posts</h1>
|
||||
<p className="lead">
|
||||
<i className="fas fa-user" /> Welcome to the community
|
||||
</p>
|
||||
<PostForm />
|
||||
<div className="posts">
|
||||
{posts.map((post) => (
|
||||
<PostItem key={post._id} post={post} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
Posts.propTypes = {
|
||||
getPosts: PropTypes.func.isRequired,
|
||||
post: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
post: state.post
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { getPosts })(Posts);
|
||||
@@ -0,0 +1,118 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { addEducation } from '../../actions/profile';
|
||||
|
||||
const AddEducation = ({ addEducation }) => {
|
||||
const navigate = useNavigate();
|
||||
const [formData, setFormData] = useState({
|
||||
school: '',
|
||||
degree: '',
|
||||
fieldofstudy: '',
|
||||
from: '',
|
||||
to: '',
|
||||
current: false,
|
||||
description: ''
|
||||
});
|
||||
|
||||
const { school, degree, fieldofstudy, from, to, description, current } =
|
||||
formData;
|
||||
|
||||
const onChange = (e) =>
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
|
||||
return (
|
||||
<section className="container">
|
||||
<h1 className="large text-primary">Add Your Education</h1>
|
||||
<p className="lead">
|
||||
<i className="fas fa-code-branch" /> Add any school or bootcamp that you
|
||||
have attended
|
||||
</p>
|
||||
<small>* = required field</small>
|
||||
<form
|
||||
className="form"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
addEducation(formData, navigate);
|
||||
}}
|
||||
>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="* School or Bootcamp"
|
||||
name="school"
|
||||
value={school}
|
||||
onChange={onChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="* Degree or Certificate"
|
||||
name="degree"
|
||||
value={degree}
|
||||
onChange={onChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Field of Study"
|
||||
name="fieldofstudy"
|
||||
value={fieldofstudy}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<h4>From Date</h4>
|
||||
<input type="date" name="from" value={from} onChange={onChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<p>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="current"
|
||||
checked={current}
|
||||
value={current}
|
||||
onChange={() => setFormData({ ...formData, current: !current })}
|
||||
/>{' '}
|
||||
Current School
|
||||
</p>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<h4>To Date</h4>
|
||||
<input
|
||||
type="date"
|
||||
name="to"
|
||||
value={to}
|
||||
onChange={onChange}
|
||||
disabled={current}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<textarea
|
||||
name="description"
|
||||
cols="30"
|
||||
rows="5"
|
||||
placeholder="Program Description"
|
||||
value={description}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
<input type="submit" className="btn btn-primary my-1" />
|
||||
<Link className="btn btn-light my-1" to="/dashboard">
|
||||
Go Back
|
||||
</Link>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
AddEducation.propTypes = {
|
||||
addEducation: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default connect(null, { addEducation })(AddEducation);
|
||||
@@ -0,0 +1,119 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { addExperience } from '../../actions/profile';
|
||||
|
||||
const AddExperience = ({ addExperience }) => {
|
||||
const navigate = useNavigate();
|
||||
const [formData, setFormData] = useState({
|
||||
company: '',
|
||||
title: '',
|
||||
location: '',
|
||||
from: '',
|
||||
to: '',
|
||||
current: false,
|
||||
description: ''
|
||||
});
|
||||
|
||||
const { company, title, location, from, to, current, description } = formData;
|
||||
|
||||
const onChange = (e) =>
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
|
||||
return (
|
||||
<section className="container">
|
||||
<h1 className="large text-primary">Add An Experience</h1>
|
||||
<p className="lead">
|
||||
<i className="fas fa-code-branch" /> Add any developer/programming
|
||||
positions that you have had in the past
|
||||
</p>
|
||||
<small>* = required field</small>
|
||||
<form
|
||||
className="form"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
addExperience(formData, navigate);
|
||||
}}
|
||||
>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="* Job Title"
|
||||
name="title"
|
||||
value={title}
|
||||
onChange={onChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="* Company"
|
||||
name="company"
|
||||
value={company}
|
||||
onChange={onChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Location"
|
||||
name="location"
|
||||
value={location}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<h4>From Date</h4>
|
||||
<input type="date" name="from" value={from} onChange={onChange} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<p>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="current"
|
||||
checked={current}
|
||||
value={current}
|
||||
onChange={() => {
|
||||
setFormData({ ...formData, current: !current });
|
||||
}}
|
||||
/>{' '}
|
||||
Current Job
|
||||
</p>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<h4>To Date</h4>
|
||||
<input
|
||||
type="date"
|
||||
name="to"
|
||||
value={to}
|
||||
onChange={onChange}
|
||||
disabled={current}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<textarea
|
||||
name="description"
|
||||
cols="30"
|
||||
rows="5"
|
||||
placeholder="Job Description"
|
||||
value={description}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
<input type="submit" className="btn btn-primary my-1" />
|
||||
<Link className="btn btn-light my-1" to="/dashboard">
|
||||
Go Back
|
||||
</Link>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
AddExperience.propTypes = {
|
||||
addExperience: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export default connect(null, { addExperience })(AddExperience);
|
||||
@@ -0,0 +1,276 @@
|
||||
import React, { Fragment, useState, useEffect } from 'react';
|
||||
import { Link, useMatch, useNavigate } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { createProfile, getCurrentProfile } from '../../actions/profile';
|
||||
|
||||
/*
|
||||
NOTE: declare initialState outside of component
|
||||
so that it doesn't trigger a useEffect
|
||||
we can then safely use this to construct our profileData
|
||||
*/
|
||||
const initialState = {
|
||||
company: '',
|
||||
website: '',
|
||||
location: '',
|
||||
status: '',
|
||||
skills: '',
|
||||
githubusername: '',
|
||||
bio: '',
|
||||
twitter: '',
|
||||
facebook: '',
|
||||
linkedin: '',
|
||||
youtube: '',
|
||||
instagram: ''
|
||||
};
|
||||
|
||||
const ProfileForm = ({
|
||||
profile: { profile, loading },
|
||||
createProfile,
|
||||
getCurrentProfile
|
||||
}) => {
|
||||
const [formData, setFormData] = useState(initialState);
|
||||
|
||||
const creatingProfile = useMatch('/create-profile');
|
||||
|
||||
const [displaySocialInputs, toggleSocialInputs] = useState(false);
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
// if there is no profile, attempt to fetch one
|
||||
if (!profile) getCurrentProfile();
|
||||
|
||||
// if we finished loading and we do have a profile
|
||||
// then build our profileData
|
||||
if (!loading && profile) {
|
||||
const profileData = { ...initialState };
|
||||
for (const key in profile) {
|
||||
if (key in profileData) profileData[key] = profile[key];
|
||||
}
|
||||
for (const key in profile.social) {
|
||||
if (key in profileData) profileData[key] = profile.social[key];
|
||||
}
|
||||
// the skills may be an array from our API response
|
||||
if (Array.isArray(profileData.skills))
|
||||
profileData.skills = profileData.skills.join(', ');
|
||||
// set local state with the profileData
|
||||
setFormData(profileData);
|
||||
}
|
||||
}, [loading, getCurrentProfile, profile]);
|
||||
|
||||
const {
|
||||
company,
|
||||
website,
|
||||
location,
|
||||
status,
|
||||
skills,
|
||||
githubusername,
|
||||
bio,
|
||||
twitter,
|
||||
facebook,
|
||||
linkedin,
|
||||
youtube,
|
||||
instagram
|
||||
} = formData;
|
||||
|
||||
const onChange = (e) =>
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
|
||||
const onSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
createProfile(formData, navigate, profile ? true : false);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="container">
|
||||
<h1 className="large text-primary">
|
||||
{creatingProfile ? 'Create Your Profile' : 'Edit Your Profile'}
|
||||
</h1>
|
||||
<p className="lead">
|
||||
<i className="fas fa-user" />
|
||||
{creatingProfile
|
||||
? ` Let's get some information to make your`
|
||||
: ' Add some changes to your profile'}
|
||||
</p>
|
||||
<small>* = required field</small>
|
||||
<form className="form" onSubmit={onSubmit}>
|
||||
<div className="form-group">
|
||||
<select name="status" value={status} onChange={onChange}>
|
||||
<option>* Select Professional Status</option>
|
||||
<option value="Developer">Developer</option>
|
||||
<option value="Junior Developer">Junior Developer</option>
|
||||
<option value="Senior Developer">Senior Developer</option>
|
||||
<option value="Manager">Manager</option>
|
||||
<option value="Student or Learning">Student or Learning</option>
|
||||
<option value="Instructor">Instructor or Teacher</option>
|
||||
<option value="Intern">Intern</option>
|
||||
<option value="Other">Other</option>
|
||||
</select>
|
||||
<small className="form-text">
|
||||
Give us an idea of where you are at in your career
|
||||
</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Company"
|
||||
name="company"
|
||||
value={company}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<small className="form-text">
|
||||
Could be your own company or one you work for
|
||||
</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Website"
|
||||
name="website"
|
||||
value={website}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<small className="form-text">
|
||||
Could be your own or a company website
|
||||
</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Location"
|
||||
name="location"
|
||||
value={location}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<small className="form-text">
|
||||
City & state suggested (eg. Boston, MA)
|
||||
</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="* Skills"
|
||||
name="skills"
|
||||
value={skills}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<small className="form-text">
|
||||
Please use comma separated values (eg. HTML,CSS,JavaScript,PHP)
|
||||
</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Github Username"
|
||||
name="githubusername"
|
||||
value={githubusername}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<small className="form-text">
|
||||
If you want your latest repos and a Github link, include your
|
||||
username
|
||||
</small>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<textarea
|
||||
placeholder="A short bio of yourself"
|
||||
name="bio"
|
||||
value={bio}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<small className="form-text">Tell us a little about yourself</small>
|
||||
</div>
|
||||
|
||||
<div className="my-2">
|
||||
<button
|
||||
onClick={() => toggleSocialInputs(!displaySocialInputs)}
|
||||
type="button"
|
||||
className="btn btn-light"
|
||||
>
|
||||
Add Social Network Links
|
||||
</button>
|
||||
<span>Optional</span>
|
||||
</div>
|
||||
|
||||
{displaySocialInputs && (
|
||||
<Fragment>
|
||||
<div className="form-group social-input">
|
||||
<i className="fab fa-twitter fa-2x" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Twitter URL"
|
||||
name="twitter"
|
||||
value={twitter}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group social-input">
|
||||
<i className="fab fa-facebook fa-2x" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Facebook URL"
|
||||
name="facebook"
|
||||
value={facebook}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group social-input">
|
||||
<i className="fab fa-youtube fa-2x" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="YouTube URL"
|
||||
name="youtube"
|
||||
value={youtube}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group social-input">
|
||||
<i className="fab fa-linkedin fa-2x" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Linkedin URL"
|
||||
name="linkedin"
|
||||
value={linkedin}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group social-input">
|
||||
<i className="fab fa-instagram fa-2x" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Instagram URL"
|
||||
name="instagram"
|
||||
value={instagram}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
</Fragment>
|
||||
)}
|
||||
|
||||
<input type="submit" className="btn btn-primary my-1" />
|
||||
<Link className="btn btn-light my-1" to="/dashboard">
|
||||
Go Back
|
||||
</Link>
|
||||
</form>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
ProfileForm.propTypes = {
|
||||
createProfile: PropTypes.func.isRequired,
|
||||
getCurrentProfile: PropTypes.func.isRequired,
|
||||
profile: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
profile: state.profile
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { createProfile, getCurrentProfile })(
|
||||
ProfileForm
|
||||
);
|
||||
@@ -0,0 +1,89 @@
|
||||
import React, { Fragment, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
import { connect } from 'react-redux';
|
||||
import Spinner from '../layout/Spinner';
|
||||
import ProfileTop from './ProfileTop';
|
||||
import ProfileAbout from './ProfileAbout';
|
||||
import ProfileExperience from './ProfileExperience';
|
||||
import ProfileEducation from './ProfileEducation';
|
||||
import ProfileGithub from './ProfileGithub';
|
||||
import { getProfileById } from '../../actions/profile';
|
||||
|
||||
const Profile = ({ getProfileById, profile: { profile }, auth }) => {
|
||||
const { id } = useParams();
|
||||
useEffect(() => {
|
||||
getProfileById(id);
|
||||
}, [getProfileById, id]);
|
||||
|
||||
return (
|
||||
<section className="container">
|
||||
{profile === null ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Fragment>
|
||||
<Link to="/profiles" className="btn btn-light">
|
||||
Back To Profiles
|
||||
</Link>
|
||||
{auth.isAuthenticated &&
|
||||
auth.loading === false &&
|
||||
auth.user._id === profile.user._id && (
|
||||
<Link to="/edit-profile" className="btn btn-dark">
|
||||
Edit Profile
|
||||
</Link>
|
||||
)}
|
||||
<div className="profile-grid my-1">
|
||||
<ProfileTop profile={profile} />
|
||||
<ProfileAbout profile={profile} />
|
||||
<div className="profile-exp bg-white p-2">
|
||||
<h2 className="text-primary">Experience</h2>
|
||||
{profile.experience.length > 0 ? (
|
||||
<Fragment>
|
||||
{profile.experience.map((experience) => (
|
||||
<ProfileExperience
|
||||
key={experience._id}
|
||||
experience={experience}
|
||||
/>
|
||||
))}
|
||||
</Fragment>
|
||||
) : (
|
||||
<h4>No experience credentials</h4>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="profile-edu bg-white p-2">
|
||||
<h2 className="text-primary">Education</h2>
|
||||
{profile.education.length > 0 ? (
|
||||
<Fragment>
|
||||
{profile.education.map((education) => (
|
||||
<ProfileEducation
|
||||
key={education._id}
|
||||
education={education}
|
||||
/>
|
||||
))}
|
||||
</Fragment>
|
||||
) : (
|
||||
<h4>No education credentials</h4>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{profile.githubusername && (
|
||||
<ProfileGithub username={profile.githubusername} />
|
||||
)}
|
||||
</div>
|
||||
</Fragment>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
Profile.propTypes = {
|
||||
getProfileById: PropTypes.func.isRequired,
|
||||
profile: PropTypes.object.isRequired,
|
||||
auth: PropTypes.object.isRequired
|
||||
};
|
||||
const mapStateToProps = (state) => ({
|
||||
profile: state.profile,
|
||||
auth: state.auth
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { getProfileById })(Profile);
|
||||
@@ -0,0 +1,34 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const ProfileAbout = ({
|
||||
profile: {
|
||||
bio,
|
||||
skills,
|
||||
user: { name }
|
||||
}
|
||||
}) => (
|
||||
<div className='profile-about bg-light p-2'>
|
||||
{bio && (
|
||||
<Fragment>
|
||||
<h2 className='text-primary'>{name.trim().split(' ')[0]}s Bio</h2>
|
||||
<p>{bio}</p>
|
||||
<div className='line' />
|
||||
</Fragment>
|
||||
)}
|
||||
<h2 className='text-primary'>Skill Set</h2>
|
||||
<div className='skills'>
|
||||
{skills.map((skill, index) => (
|
||||
<div key={index} className='p-1'>
|
||||
<i className='fas fa-check' /> {skill}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
ProfileAbout.propTypes = {
|
||||
profile: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default ProfileAbout;
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import formatDate from '../../utils/formatDate';
|
||||
|
||||
const ProfileEducation = ({
|
||||
education: { school, degree, fieldofstudy, current, to, from, description }
|
||||
}) => (
|
||||
<div>
|
||||
<h3 className="text-dark">{school}</h3>
|
||||
<p>
|
||||
{formatDate(from)} - {to ? formatDate(to) : 'Now'}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Degree: </strong> {degree}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Field Of Study: </strong> {fieldofstudy}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Description: </strong> {description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
ProfileEducation.propTypes = {
|
||||
education: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default ProfileEducation;
|
||||
@@ -0,0 +1,29 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import formatDate from '../../utils/formatDate';
|
||||
|
||||
const ProfileExperience = ({
|
||||
experience: { company, title, location, current, to, from, description }
|
||||
}) => (
|
||||
<div>
|
||||
<h3 className="text-dark">{company}</h3>
|
||||
<p>
|
||||
{formatDate(from)} - {to ? formatDate(to) : 'Now'}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Position: </strong> {title}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Location: </strong> {location}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Description: </strong> {description}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
ProfileExperience.propTypes = {
|
||||
experience: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default ProfileExperience;
|
||||
@@ -0,0 +1,51 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import { getGithubRepos } from '../../actions/profile';
|
||||
|
||||
const ProfileGithub = ({ username, getGithubRepos, repos }) => {
|
||||
useEffect(() => {
|
||||
getGithubRepos(username);
|
||||
}, [getGithubRepos, username]);
|
||||
|
||||
return (
|
||||
<div className="profile-github">
|
||||
<h2 className="text-primary my-1">Github Repos</h2>
|
||||
{repos.map(repo => (
|
||||
<div key={repo.id} className="repo bg-white p-1 my-1">
|
||||
<div>
|
||||
<h4>
|
||||
<a href={repo.html_url} target="_blank" rel="noopener noreferrer">
|
||||
{repo.name}
|
||||
</a>
|
||||
</h4>
|
||||
<p>{repo.description}</p>
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li className="badge badge-primary">
|
||||
Stars: {repo.stargazers_count}
|
||||
</li>
|
||||
<li className="badge badge-dark">
|
||||
Watchers: {repo.watchers_count}
|
||||
</li>
|
||||
<li className="badge badge-light">Forks: {repo.forks_count}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ProfileGithub.propTypes = {
|
||||
getGithubRepos: PropTypes.func.isRequired,
|
||||
repos: PropTypes.array.isRequired,
|
||||
username: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
repos: state.profile.repos
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, { getGithubRepos })(ProfileGithub);
|
||||
@@ -0,0 +1,51 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const ProfileTop = ({
|
||||
profile: {
|
||||
status,
|
||||
company,
|
||||
location,
|
||||
website,
|
||||
social,
|
||||
user: { name, avatar }
|
||||
}
|
||||
}) => {
|
||||
return (
|
||||
<div className="profile-top bg-primary p-2">
|
||||
<img className="round-img my-1" src={avatar} alt="" />
|
||||
<h1 className="large">{name}</h1>
|
||||
<p className="lead">
|
||||
{status} {company ? <span> at {company}</span> : null}
|
||||
</p>
|
||||
<p>{location ? <span>{location}</span> : null}</p>
|
||||
<div className="icons my-1">
|
||||
{website ? (
|
||||
<a href={website} target="_blank" rel="noopener noreferrer">
|
||||
<i className="fas fa-globe fa-2x" />
|
||||
</a>
|
||||
) : null}
|
||||
{social
|
||||
? Object.entries(social)
|
||||
.filter(([_, value]) => value)
|
||||
.map(([key, value]) => (
|
||||
<a
|
||||
key={key}
|
||||
href={value}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<i className={`fab fa-${key} fa-2x`}></i>
|
||||
</a>
|
||||
))
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ProfileTop.propTypes = {
|
||||
profile: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default ProfileTop;
|
||||
@@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const ProfileItem = ({
|
||||
profile: {
|
||||
user: { _id, name, avatar },
|
||||
status,
|
||||
company,
|
||||
location,
|
||||
skills
|
||||
}
|
||||
}) => {
|
||||
return (
|
||||
<div className='profile bg-light'>
|
||||
<img src={avatar} alt='' className='round-img' />
|
||||
<div>
|
||||
<h2>{name}</h2>
|
||||
<p>
|
||||
{status} {company && <span> at {company}</span>}
|
||||
</p>
|
||||
<p className='my-1'>{location && <span>{location}</span>}</p>
|
||||
<Link to={`/profile/${_id}`} className='btn btn-primary'>
|
||||
View Profile
|
||||
</Link>
|
||||
</div>
|
||||
<ul>
|
||||
{skills.slice(0, 4).map((skill, index) => (
|
||||
<li key={index} className='text-primary'>
|
||||
<i className='fas fa-check' /> {skill}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ProfileItem.propTypes = {
|
||||
profile: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default ProfileItem;
|
||||
@@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const ProfileItem = ({
|
||||
profile: {
|
||||
user: { _id, name, avatar },
|
||||
status,
|
||||
company,
|
||||
location,
|
||||
skills
|
||||
}
|
||||
}) => {
|
||||
return (
|
||||
<div className='profile bg-light'>
|
||||
<img src={avatar} alt='' className='round-img' />
|
||||
<div>
|
||||
<h2>{name}</h2>
|
||||
<p>
|
||||
{status} {company && <span> at {company}</span>}
|
||||
</p>
|
||||
<p className='my-1'>{location && <span>{location}</span>}</p>
|
||||
<Link to={`/profile/${_id}`} className='btn btn-primary'>
|
||||
View Profile
|
||||
</Link>
|
||||
</div>
|
||||
<ul>
|
||||
{skills.slice(0, 4).map((skill, index) => (
|
||||
<li key={index} className='text-primary'>
|
||||
<i className='fas fa-check' /> {skill}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ProfileItem.propTypes = {
|
||||
profile: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default ProfileItem;
|
||||
@@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import { Navigate } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
import Spinner from '../layout/Spinner';
|
||||
|
||||
const PrivateRoute = ({
|
||||
component: Component,
|
||||
auth: { isAuthenticated, loading }
|
||||
}) => {
|
||||
if (loading) return <Spinner />;
|
||||
if (isAuthenticated) return <Component />;
|
||||
|
||||
return <Navigate to="/login" />;
|
||||
};
|
||||
|
||||
PrivateRoute.propTypes = {
|
||||
auth: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
auth: state.auth
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(PrivateRoute);
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 292 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 MiB |
@@ -0,0 +1,5 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(<App />);
|
||||
@@ -0,0 +1,18 @@
|
||||
import { SET_ALERT, REMOVE_ALERT } from '../actions/types';
|
||||
|
||||
const initialState = [];
|
||||
|
||||
function alertReducer(state = initialState, action) {
|
||||
const { type, payload } = action;
|
||||
|
||||
switch (type) {
|
||||
case SET_ALERT:
|
||||
return [...state, payload];
|
||||
case REMOVE_ALERT:
|
||||
return state.filter((alert) => alert.id !== payload);
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
export default alertReducer;
|
||||
@@ -0,0 +1,53 @@
|
||||
import {
|
||||
REGISTER_SUCCESS,
|
||||
//REGISTER_FAIL,
|
||||
USER_LOADED,
|
||||
AUTH_ERROR,
|
||||
LOGIN_SUCCESS,
|
||||
//LOGIN_FAIL,
|
||||
LOGOUT,
|
||||
ACCOUNT_DELETED
|
||||
} from '../actions/types';
|
||||
|
||||
const initialState = {
|
||||
token: localStorage.getItem('token'),
|
||||
isAuthenticated: null,
|
||||
loading: true,
|
||||
user: null
|
||||
};
|
||||
|
||||
function authReducer(state = initialState, action) {
|
||||
const { type, payload } = action;
|
||||
|
||||
switch (type) {
|
||||
case USER_LOADED:
|
||||
return {
|
||||
...state,
|
||||
isAuthenticated: true,
|
||||
loading: false,
|
||||
user: payload
|
||||
};
|
||||
case REGISTER_SUCCESS:
|
||||
case LOGIN_SUCCESS:
|
||||
return {
|
||||
...state,
|
||||
...payload,
|
||||
isAuthenticated: true,
|
||||
loading: false
|
||||
};
|
||||
case ACCOUNT_DELETED:
|
||||
case AUTH_ERROR:
|
||||
case LOGOUT:
|
||||
return {
|
||||
...state,
|
||||
token: null,
|
||||
isAuthenticated: false,
|
||||
loading: false,
|
||||
user: null
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
export default authReducer;
|
||||
@@ -0,0 +1,12 @@
|
||||
import { combineReducers } from 'redux';
|
||||
import alert from './alert';
|
||||
import auth from './auth';
|
||||
import profile from './profile';
|
||||
import post from './post';
|
||||
|
||||
export default combineReducers({
|
||||
alert,
|
||||
auth,
|
||||
profile,
|
||||
post
|
||||
});
|
||||
@@ -0,0 +1,83 @@
|
||||
import {
|
||||
GET_POSTS,
|
||||
POST_ERROR,
|
||||
UPDATE_LIKES,
|
||||
DELETE_POST,
|
||||
ADD_POST,
|
||||
GET_POST,
|
||||
ADD_COMMENT,
|
||||
REMOVE_COMMENT
|
||||
} from '../actions/types';
|
||||
|
||||
const initialState = {
|
||||
posts: [],
|
||||
post: null,
|
||||
loading: true,
|
||||
error: {}
|
||||
};
|
||||
|
||||
function postReducer(state = initialState, action) {
|
||||
const { type, payload } = action;
|
||||
|
||||
switch (type) {
|
||||
case GET_POSTS:
|
||||
return {
|
||||
...state,
|
||||
posts: payload,
|
||||
loading: false
|
||||
};
|
||||
case GET_POST:
|
||||
return {
|
||||
...state,
|
||||
post: payload,
|
||||
loading: false
|
||||
};
|
||||
case ADD_POST:
|
||||
return {
|
||||
...state,
|
||||
posts: [payload, ...state.posts],
|
||||
loading: false
|
||||
};
|
||||
case DELETE_POST:
|
||||
return {
|
||||
...state,
|
||||
posts: state.posts.filter((post) => post._id !== payload),
|
||||
loading: false
|
||||
};
|
||||
case POST_ERROR:
|
||||
return {
|
||||
...state,
|
||||
error: payload,
|
||||
loading: false
|
||||
};
|
||||
case UPDATE_LIKES:
|
||||
return {
|
||||
...state,
|
||||
posts: state.posts.map((post) =>
|
||||
post._id === payload.id ? { ...post, likes: payload.likes } : post
|
||||
),
|
||||
loading: false
|
||||
};
|
||||
case ADD_COMMENT:
|
||||
return {
|
||||
...state,
|
||||
post: { ...state.post, comments: payload },
|
||||
loading: false
|
||||
};
|
||||
case REMOVE_COMMENT:
|
||||
return {
|
||||
...state,
|
||||
post: {
|
||||
...state.post,
|
||||
comments: state.post.comments.filter(
|
||||
(comment) => comment._id !== payload
|
||||
)
|
||||
},
|
||||
loading: false
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
export default postReducer;
|
||||
@@ -0,0 +1,65 @@
|
||||
import {
|
||||
GET_PROFILE,
|
||||
PROFILE_ERROR,
|
||||
CLEAR_PROFILE,
|
||||
UPDATE_PROFILE,
|
||||
GET_PROFILES,
|
||||
GET_REPOS,
|
||||
NO_REPOS,
|
||||
} from "../actions/types";
|
||||
|
||||
const initialState = {
|
||||
profile: null,
|
||||
profiles: [],
|
||||
repos: [],
|
||||
loading: true,
|
||||
error: {},
|
||||
};
|
||||
|
||||
function profileReducer(state = initialState, action) {
|
||||
const { type, payload } = action;
|
||||
|
||||
switch (type) {
|
||||
case GET_PROFILE:
|
||||
case UPDATE_PROFILE:
|
||||
return {
|
||||
...state,
|
||||
profile: payload,
|
||||
loading: false,
|
||||
};
|
||||
case GET_PROFILES:
|
||||
return {
|
||||
...state,
|
||||
profiles: payload,
|
||||
loading: false,
|
||||
};
|
||||
case PROFILE_ERROR:
|
||||
return {
|
||||
...state,
|
||||
error: payload,
|
||||
loading: false,
|
||||
profile: null,
|
||||
};
|
||||
case CLEAR_PROFILE:
|
||||
return {
|
||||
...state,
|
||||
profile: null,
|
||||
repos: [],
|
||||
};
|
||||
case GET_REPOS:
|
||||
return {
|
||||
...state,
|
||||
repos: payload,
|
||||
loading: false,
|
||||
};
|
||||
case NO_REPOS:
|
||||
return {
|
||||
...state,
|
||||
repos: [],
|
||||
};
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
export default profileReducer;
|
||||
@@ -0,0 +1,39 @@
|
||||
import { createStore, applyMiddleware } from 'redux';
|
||||
import { composeWithDevTools } from 'redux-devtools-extension';
|
||||
import thunk from 'redux-thunk';
|
||||
import rootReducer from './reducers';
|
||||
import setAuthToken from './utils/setAuthToken';
|
||||
|
||||
const initialState = {};
|
||||
|
||||
const middleware = [thunk];
|
||||
|
||||
const store = createStore(
|
||||
rootReducer,
|
||||
initialState,
|
||||
composeWithDevTools(applyMiddleware(...middleware))
|
||||
);
|
||||
|
||||
/*
|
||||
NOTE: set up a store subscription listener
|
||||
to store the users token in localStorage
|
||||
*/
|
||||
|
||||
/*
|
||||
initialize current state from redux store for subscription comparison
|
||||
preventing undefined error
|
||||
*/
|
||||
let currentState = store.getState();
|
||||
|
||||
store.subscribe(() => {
|
||||
// keep track of the previous and current state to compare changes
|
||||
let previousState = currentState;
|
||||
currentState = store.getState();
|
||||
// if the token changes set the value in localStorage and axios headers
|
||||
if (previousState.auth.token !== currentState.auth.token) {
|
||||
const token = currentState.auth.token;
|
||||
setAuthToken(token);
|
||||
}
|
||||
});
|
||||
|
||||
export default store;
|
||||
@@ -0,0 +1,22 @@
|
||||
import axios from 'axios';
|
||||
import store from '../store';
|
||||
import { LOGOUT } from '../actions/types';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: '/api',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
api.interceptors.response.use(
|
||||
(res) => res,
|
||||
(err) => {
|
||||
if (err.response.status === 401) {
|
||||
store.dispatch({ type: LOGOUT });
|
||||
}
|
||||
return Promise.reject(err);
|
||||
}
|
||||
);
|
||||
|
||||
export default api;
|
||||
@@ -0,0 +1,6 @@
|
||||
function formatDate(date) {
|
||||
return new Intl.DateTimeFormat().format(new Date(date));
|
||||
}
|
||||
|
||||
export default formatDate;
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
import axios from "axios";
|
||||
|
||||
const setAuthToken = (token) => {
|
||||
if (token) {
|
||||
axios.defaults.headers.common["x-auth-token"] = token;
|
||||
localStorage.setItem(('token'), token)
|
||||
} else {
|
||||
delete axios.defaults.common["x-auth-token"];
|
||||
localStorage.removeItem('token')
|
||||
}
|
||||
};
|
||||
|
||||
export default setAuthToken;
|
||||
@@ -0,0 +1,20 @@
|
||||
const mongoose = require('mongoose');
|
||||
const config = require('config');
|
||||
const db = config.get('mongoURI');
|
||||
|
||||
const connectDB = async () => {
|
||||
try {
|
||||
await mongoose.connect(db, {
|
||||
useNewUrlParser: true,
|
||||
useUnifiedTopology: true
|
||||
});
|
||||
|
||||
console.log('MongoDB Connected...');
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
// Exit process with failure
|
||||
process.exit(1);
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = connectDB;
|
||||
@@ -0,0 +1,28 @@
|
||||
const config = require('config');
|
||||
const jwt = require('jsonwebtoken');
|
||||
|
||||
module.exports = function (req, res, next) {
|
||||
|
||||
// Get token from header
|
||||
const token = req.header('x-auth-token');
|
||||
// Check if not token
|
||||
if (!token) {
|
||||
return res.status(401).json({ msg: 'No token, authorization denied' });
|
||||
}
|
||||
|
||||
// Verify token
|
||||
try {
|
||||
jwt.verify(token, config.get('jwtSecret'), (error, decoded) => {
|
||||
if (error) {
|
||||
return res.status(401).json({ msg: 'Token is not valid' });
|
||||
} else {
|
||||
req.user = decoded.user;
|
||||
next();
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('something wrong with auth middleware');
|
||||
res.status(500).json({ msg: 'Server Error' });
|
||||
}
|
||||
|
||||
};
|
||||
@@ -0,0 +1,9 @@
|
||||
const mongoose = require('mongoose');
|
||||
// middleware to check for a valid object id
|
||||
const checkObjectId = (idToCheck) => (req, res, next) => {
|
||||
if (!mongoose.Types.ObjectId.isValid(req.params[idToCheck]))
|
||||
return res.status(400).json({ msg: 'Invalid ID' });
|
||||
next();
|
||||
};
|
||||
|
||||
module.exports = checkObjectId;
|
||||
@@ -0,0 +1,52 @@
|
||||
const mongoose = require("mongoose");
|
||||
const Schema = mongoose.Schema;
|
||||
|
||||
const PostSchema = new Schema({
|
||||
user: {
|
||||
type: Schema.Types.ObjectId,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
},
|
||||
avatar: {
|
||||
type: String,
|
||||
},
|
||||
likes: [
|
||||
{
|
||||
user: {
|
||||
type: Schema.Types.ObjectId,
|
||||
},
|
||||
},
|
||||
],
|
||||
comments: [
|
||||
{
|
||||
user: {
|
||||
type: Schema.Types.ObjectId,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
},
|
||||
avatar: {
|
||||
type: String,
|
||||
},
|
||||
date: {
|
||||
type: Date,
|
||||
default: Date.now,
|
||||
},
|
||||
},
|
||||
],
|
||||
date: {
|
||||
type: Date,
|
||||
default: Date.now,
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = mongoose.model("post", PostSchema);
|
||||
@@ -0,0 +1,113 @@
|
||||
const mongoose = require("mongoose");
|
||||
|
||||
const ProfileSchema = new mongoose.Schema({
|
||||
user: {
|
||||
type: mongoose.Schema.Types.ObjectId,
|
||||
ref: "user",
|
||||
},
|
||||
company: {
|
||||
type: String,
|
||||
},
|
||||
website: {
|
||||
type: String,
|
||||
},
|
||||
location: {
|
||||
type: String,
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
skills: {
|
||||
type: [String],
|
||||
required: true,
|
||||
},
|
||||
bio: {
|
||||
type: String,
|
||||
},
|
||||
githubusername: {
|
||||
type: String,
|
||||
},
|
||||
experience: [
|
||||
{
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
company: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
location: {
|
||||
type: String,
|
||||
},
|
||||
from: {
|
||||
type: Date,
|
||||
required: true,
|
||||
},
|
||||
to: {
|
||||
type: Date,
|
||||
},
|
||||
current: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
],
|
||||
education: [
|
||||
{
|
||||
school: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
degree: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
fieldofstudy: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
from: {
|
||||
type: Date,
|
||||
required: true,
|
||||
},
|
||||
to: {
|
||||
type: Date,
|
||||
},
|
||||
current: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
],
|
||||
social: {
|
||||
youtube: {
|
||||
type: String,
|
||||
},
|
||||
twitter: {
|
||||
type: String,
|
||||
},
|
||||
facebook: {
|
||||
type: String,
|
||||
},
|
||||
linkedin: {
|
||||
type: String,
|
||||
},
|
||||
instagram: {
|
||||
type: String,
|
||||
},
|
||||
},
|
||||
date: {
|
||||
type: Date,
|
||||
default: Date.now,
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = mongoose.model("profile", ProfileSchema);
|
||||
@@ -0,0 +1,26 @@
|
||||
const mongoose = require("mongoose");
|
||||
|
||||
const UserSchema = new mongoose.Schema({
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
email: {
|
||||
type: String,
|
||||
required: true,
|
||||
unique: true,
|
||||
},
|
||||
password: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
avatar: {
|
||||
type: String,
|
||||
},
|
||||
date: {
|
||||
type: Date,
|
||||
default: Date.now,
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = mongoose.model("user", UserSchema);
|
||||
Generated
+4076
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "mern-stack-front-to-back",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"start": "node server",
|
||||
"server": "nodemon server",
|
||||
"client": "npm start --prefix client --trace-depracation",
|
||||
"dev": "concurrently \"npm run server\" \"npm run client\""
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"axios": "^1.1.3",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"config": "^3.3.8",
|
||||
"express": "^4.18.2",
|
||||
"express-validator": "^6.14.2",
|
||||
"gravatar": "^1.8.2",
|
||||
"jsonwebtoken": "^8.5.1",
|
||||
"mongoose": "^6.6.5",
|
||||
"normalize-url": "^5.0.0",
|
||||
"request": "^2.88.2",
|
||||
"uuid": "^9.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"concurrently": "^7.4.0",
|
||||
"nodemon": "^2.0.20"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
const express = require("express");
|
||||
const router = express.Router();
|
||||
const bcrypt = require("bcryptjs");
|
||||
const auth = require("../../middleware/auth");
|
||||
const jwt = require("jsonwebtoken");
|
||||
const config = require("config");
|
||||
const { check, validationResult } = require("express-validator");
|
||||
|
||||
const User = require("../../models/User");
|
||||
|
||||
// @route GET api/auth
|
||||
// @desc Get user by token
|
||||
// @access Private
|
||||
router.get("/", auth, async (req, res) => {
|
||||
try {
|
||||
const user = await User.findById(req.user.id).select("-password");
|
||||
res.json(user);
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
res.status(500).send("Server Error");
|
||||
}
|
||||
});
|
||||
|
||||
// @route POST api/auth
|
||||
// @desc Authenticate user & get token
|
||||
// @access Public
|
||||
router.post(
|
||||
"/",
|
||||
[
|
||||
check("email", "Please include a valid email").isEmail(),
|
||||
check("password", "Password is required").exists(),
|
||||
],
|
||||
async (req, res) => {
|
||||
const errors = validationResult(req);
|
||||
if (!errors.isEmpty()) {
|
||||
return res.status(400).json({ errors: errors.array() });
|
||||
}
|
||||
|
||||
const { email, password } = req.body;
|
||||
|
||||
try {
|
||||
let user = await User.findOne({ email });
|
||||
|
||||
if (!user) {
|
||||
return res
|
||||
.status(400)
|
||||
.json({ errors: [{ msg: "Invalid Credentials" }] });
|
||||
}
|
||||
|
||||
const isMatch = await bcrypt.compare(password, user.password);
|
||||
|
||||
if (!isMatch) {
|
||||
return res
|
||||
.status(400)
|
||||
.json({ errors: [{ msg: "Invalid Credentials" }] });
|
||||
}
|
||||
|
||||
const payload = {
|
||||
user: {
|
||||
id: user.id,
|
||||
},
|
||||
};
|
||||
|
||||
jwt.sign(
|
||||
payload,
|
||||
config.get("jwtSecret"),
|
||||
{ expiresIn: 360000 },
|
||||
(err, token) => {
|
||||
if (err) throw err;
|
||||
res.json({ token });
|
||||
}
|
||||
);
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
res.status(500).send("Server error");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
module.exports = router;
|
||||
@@ -0,0 +1,221 @@
|
||||
const express = require("express");
|
||||
const router = express.Router();
|
||||
const { check, validationResult } = require("express-validator");
|
||||
const auth = require("../../middleware/auth");
|
||||
|
||||
const Post = require("../../models/Post");
|
||||
const User = require("../../models/User");
|
||||
const checkObjectId = require("../../middleware/checkObjectId");
|
||||
|
||||
// @route POST api/posts
|
||||
// @desc Create a post
|
||||
// @access Private
|
||||
|
||||
router.post(
|
||||
"/",
|
||||
auth,
|
||||
check("text", "Text is required").notEmpty(),
|
||||
async (req, res) => {
|
||||
const errors = validationResult(req);
|
||||
if (!errors.isEmpty()) {
|
||||
return res.status(400).json({ errors: errors.array() });
|
||||
}
|
||||
|
||||
try {
|
||||
const user = await User.findById(req.user.id).select("-password");
|
||||
|
||||
const newPost = new Post({
|
||||
text: req.body.text,
|
||||
name: user.name,
|
||||
avatar: user.avatar,
|
||||
user: req.user.id,
|
||||
});
|
||||
|
||||
const post = await newPost.save();
|
||||
|
||||
res.json(post);
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
res.status(500).send("Server Error");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// @route GET api/posts
|
||||
// @desc Get all posts
|
||||
// @access Private
|
||||
router.get("/", auth, async (req, res) => {
|
||||
try {
|
||||
const posts = await Post.find().sort({ date: -1 });
|
||||
res.json(posts);
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
res.status(500).send("Server Error");
|
||||
}
|
||||
});
|
||||
|
||||
// @route GET api/posts/:id
|
||||
// @desc Get post by ID
|
||||
// @access Private
|
||||
router.get("/:id", auth, checkObjectId("id"), async (req, res) => {
|
||||
try {
|
||||
const post = await Post.findById(req.params.id);
|
||||
|
||||
if (!post) {
|
||||
return res.status(404).json({ msg: "Post not found" });
|
||||
}
|
||||
|
||||
res.json(post);
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
|
||||
res.status(500).send("Server Error");
|
||||
}
|
||||
});
|
||||
|
||||
// @route DELETE api/posts/:id
|
||||
// @desc Delete a post
|
||||
// @access Private
|
||||
router.delete("/:id", [auth, checkObjectId("id")], async (req, res) => {
|
||||
try {
|
||||
const post = await Post.findById(req.params.id);
|
||||
|
||||
if (!post) {
|
||||
return res.status(404).json({ msg: "Post not found" });
|
||||
}
|
||||
|
||||
// Check user
|
||||
if (post.user.toString() !== req.user.id) {
|
||||
return res.status(401).json({ msg: "User not authorized" });
|
||||
}
|
||||
|
||||
await post.remove();
|
||||
|
||||
res.json({ msg: "Post removed" });
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
|
||||
res.status(500).send("Server Error");
|
||||
}
|
||||
});
|
||||
|
||||
// @route PUT api/posts/like/:id
|
||||
// @desc Like a post
|
||||
// @access Private
|
||||
router.put("/like/:id", auth, checkObjectId("id"), async (req, res) => {
|
||||
try {
|
||||
const post = await Post.findById(req.params.id);
|
||||
|
||||
// Check if the post has already been liked
|
||||
if (post.likes.some((like) => like.user.toString() === req.user.id)) {
|
||||
return res.status(400).json({ msg: "Post already liked" });
|
||||
}
|
||||
|
||||
post.likes.unshift({ user: req.user.id });
|
||||
|
||||
await post.save();
|
||||
|
||||
return res.json(post.likes);
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
res.status(500).send("Server Error");
|
||||
}
|
||||
});
|
||||
|
||||
// @route PUT api/posts/unlike/:id
|
||||
// @desc Unlike a post
|
||||
// @access Private
|
||||
router.put("/unlike/:id", auth, checkObjectId("id"), async (req, res) => {
|
||||
try {
|
||||
const post = await Post.findById(req.params.id);
|
||||
|
||||
// Check if the post has not yet been liked
|
||||
if (!post.likes.some((like) => like.user.toString() === req.user.id)) {
|
||||
return res.status(400).json({ msg: "Post has not yet been liked" });
|
||||
}
|
||||
|
||||
// remove the like
|
||||
post.likes = post.likes.filter(
|
||||
({ user }) => user.toString() !== req.user.id
|
||||
);
|
||||
|
||||
await post.save();
|
||||
|
||||
return res.json(post.likes);
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
res.status(500).send("Server Error");
|
||||
}
|
||||
});
|
||||
|
||||
// @route POST api/posts/comment/:id
|
||||
// @desc Comment on a post
|
||||
// @access Private
|
||||
router.post(
|
||||
"/comment/:id",
|
||||
auth,
|
||||
checkObjectId("id"),
|
||||
check("text", "Text is required").notEmpty(),
|
||||
async (req, res) => {
|
||||
const errors = validationResult(req);
|
||||
if (!errors.isEmpty()) {
|
||||
return res.status(400).json({ errors: errors.array() });
|
||||
}
|
||||
|
||||
try {
|
||||
const user = await User.findById(req.user.id).select("-password");
|
||||
const post = await Post.findById(req.params.id);
|
||||
|
||||
const newComment = {
|
||||
text: req.body.text,
|
||||
name: user.name,
|
||||
avatar: user.avatar,
|
||||
user: req.user.id,
|
||||
};
|
||||
|
||||
post.comments.unshift(newComment);
|
||||
|
||||
await post.save();
|
||||
|
||||
res.json(post.comments);
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
res.status(500).send("Server Error");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// @route DELETE api/posts/comment/:id/:comment_id
|
||||
// @desc Delete comment
|
||||
// @access Private
|
||||
router.delete("/comment/:id/:comment_id", auth, async (req, res) => {
|
||||
try {
|
||||
const post = await Post.findById(req.params.id);
|
||||
|
||||
// Pull out comment
|
||||
const comment = post.comments.find(
|
||||
(comment) => comment.id === req.params.comment_id
|
||||
);
|
||||
// Make sure comment exists
|
||||
if (!comment) {
|
||||
return res.status(404).json({ msg: "Comment does not exist" });
|
||||
}
|
||||
// Check user
|
||||
if (comment.user.toString() !== req.user.id) {
|
||||
return res.status(401).json({ msg: "User not authorized" });
|
||||
}
|
||||
|
||||
post.comments = post.comments.filter(
|
||||
({ id }) => id !== req.params.comment_id
|
||||
);
|
||||
|
||||
await post.save();
|
||||
|
||||
return res.json(post.comments);
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
return res.status(500).send("Server Error");
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -0,0 +1,280 @@
|
||||
const express = require('express');
|
||||
const axios = require('axios');
|
||||
const config = require('config');
|
||||
const router = express.Router();
|
||||
const auth = require('../../middleware/auth');
|
||||
const { check, validationResult } = require('express-validator');
|
||||
// bring in normalize to give us a proper url, regardless of what user entered
|
||||
const normalize = require('normalize-url');
|
||||
const checkObjectId = require('../../middleware/checkObjectId');
|
||||
|
||||
const Profile = require('../../models/Profile');
|
||||
const User = require('../../models/User');
|
||||
const Post = require('../../models/Post');
|
||||
// @route GET api/profile/me
|
||||
// @desc Get current users profile
|
||||
// @access Private
|
||||
router.get('/me', auth, async (req, res) => {
|
||||
try {
|
||||
const profile = await Profile.findOne({
|
||||
user: req.user.id
|
||||
}).populate('user', ['name', 'avatar']);
|
||||
|
||||
if (!profile) {
|
||||
return res.status(400).json({ msg: 'There is no profile for this user' });
|
||||
}
|
||||
|
||||
res.json(profile);
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
res.status(500).send('Server Error');
|
||||
}
|
||||
});
|
||||
|
||||
// @route POST api/profile
|
||||
// @desc Create or update user profile
|
||||
// @access Private
|
||||
router.post(
|
||||
'/',
|
||||
auth,
|
||||
check('status', 'Status is required').notEmpty(),
|
||||
check('skills', 'Skills is required').notEmpty(),
|
||||
async (req, res) => {
|
||||
const errors = validationResult(req);
|
||||
if (!errors.isEmpty()) {
|
||||
return res.status(400).json({ errors: errors.array() });
|
||||
}
|
||||
|
||||
// destructure the request
|
||||
const {
|
||||
website,
|
||||
skills,
|
||||
youtube,
|
||||
twitter,
|
||||
instagram,
|
||||
linkedin,
|
||||
facebook,
|
||||
// spread the rest of the fields we don't need to check
|
||||
...rest
|
||||
} = req.body;
|
||||
|
||||
// build a profile
|
||||
const profileFields = {
|
||||
user: req.user.id,
|
||||
website:
|
||||
website && website !== ''
|
||||
? normalize(website, { forceHttps: true })
|
||||
: '',
|
||||
skills: Array.isArray(skills)
|
||||
? skills
|
||||
: skills.split(',').map((skill) => ' ' + skill.trim()),
|
||||
...rest
|
||||
};
|
||||
|
||||
// Build socialFields object
|
||||
const socialFields = { youtube, twitter, instagram, linkedin, facebook };
|
||||
|
||||
// normalize social fields to ensure valid url
|
||||
for (const [key, value] of Object.entries(socialFields)) {
|
||||
if (value && value.length > 0)
|
||||
socialFields[key] = normalize(value, { forceHttps: true });
|
||||
}
|
||||
// add to profileFields
|
||||
profileFields.social = socialFields;
|
||||
|
||||
try {
|
||||
// Using upsert option (creates new doc if no match is found):
|
||||
let profile = await Profile.findOneAndUpdate(
|
||||
{ user: req.user.id },
|
||||
{ $set: profileFields },
|
||||
{ new: true, upsert: true, setDefaultsOnInsert: true }
|
||||
);
|
||||
return res.json(profile);
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
return res.status(500).send('Server Error');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// @route GET api/profile
|
||||
// @desc Get all profiles
|
||||
// @access Public
|
||||
router.get('/', async (req, res) => {
|
||||
try {
|
||||
const profiles = await Profile.find().populate('user', ['name', 'avatar']);
|
||||
res.json(profiles);
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
res.status(500).send('Server Error');
|
||||
}
|
||||
});
|
||||
|
||||
// @route GET api/profile/user/:user_id
|
||||
// @desc Get profile by user ID
|
||||
// @access Public
|
||||
router.get(
|
||||
'/user/:user_id',
|
||||
checkObjectId('user_id'),
|
||||
async ({ params: { user_id } }, res) => {
|
||||
try {
|
||||
const profile = await Profile.findOne({
|
||||
user: user_id
|
||||
}).populate('user', ['name', 'avatar']);
|
||||
|
||||
if (!profile) return res.status(400).json({ msg: 'Profile not found' });
|
||||
|
||||
return res.json(profile);
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
return res.status(500).json({ msg: 'Server error' });
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// @route DELETE api/profile
|
||||
// @desc Delete profile, user & posts
|
||||
// @access Private
|
||||
router.delete('/', auth, async (req, res) => {
|
||||
try {
|
||||
// Remove user posts
|
||||
// Remove profile
|
||||
// Remove user
|
||||
await Promise.all([
|
||||
Post.deleteMany({ user: req.user.id }),
|
||||
Profile.findOneAndRemove({ user: req.user.id }),
|
||||
User.findOneAndRemove({ _id: req.user.id })
|
||||
]);
|
||||
|
||||
res.json({ msg: 'User deleted' });
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
res.status(500).send('Server Error');
|
||||
}
|
||||
});
|
||||
|
||||
// @route PUT api/profile/experience
|
||||
// @desc Add profile experience
|
||||
// @access Private
|
||||
router.put(
|
||||
'/experience',
|
||||
auth,
|
||||
check('title', 'Title is required').notEmpty(),
|
||||
check('company', 'Company is required').notEmpty(),
|
||||
check('from', 'From date is required and needs to be from the past')
|
||||
.notEmpty()
|
||||
.custom((value, { req }) => (req.body.to ? value < req.body.to : true)),
|
||||
async (req, res) => {
|
||||
const errors = validationResult(req);
|
||||
if (!errors.isEmpty()) {
|
||||
return res.status(400).json({ errors: errors.array() });
|
||||
}
|
||||
|
||||
try {
|
||||
const profile = await Profile.findOne({ user: req.user.id });
|
||||
|
||||
profile.experience.unshift(req.body);
|
||||
|
||||
await profile.save();
|
||||
|
||||
res.json(profile);
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
res.status(500).send('Server Error');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// @route DELETE api/profile/experience/:exp_id
|
||||
// @desc Delete experience from profile
|
||||
// @access Private
|
||||
|
||||
router.delete('/experience/:exp_id', auth, async (req, res) => {
|
||||
try {
|
||||
const foundProfile = await Profile.findOne({ user: req.user.id });
|
||||
|
||||
foundProfile.experience = foundProfile.experience.filter(
|
||||
(exp) => exp._id.toString() !== req.params.exp_id
|
||||
);
|
||||
|
||||
await foundProfile.save();
|
||||
return res.status(200).json(foundProfile);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return res.status(500).json({ msg: 'Server error' });
|
||||
}
|
||||
});
|
||||
|
||||
// @route PUT api/profile/education
|
||||
// @desc Add profile education
|
||||
// @access Private
|
||||
router.put(
|
||||
'/education',
|
||||
auth,
|
||||
check('school', 'School is required').notEmpty(),
|
||||
check('degree', 'Degree is required').notEmpty(),
|
||||
check('fieldofstudy', 'Field of study is required').notEmpty(),
|
||||
check('from', 'From date is required and needs to be from the past')
|
||||
.notEmpty()
|
||||
.custom((value, { req }) => (req.body.to ? value < req.body.to : true)),
|
||||
async (req, res) => {
|
||||
const errors = validationResult(req);
|
||||
if (!errors.isEmpty()) {
|
||||
return res.status(400).json({ errors: errors.array() });
|
||||
}
|
||||
|
||||
try {
|
||||
const profile = await Profile.findOne({ user: req.user.id });
|
||||
|
||||
profile.education.unshift(req.body);
|
||||
|
||||
await profile.save();
|
||||
|
||||
res.json(profile);
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
res.status(500).send('Server Error');
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// @route DELETE api/profile/education/:edu_id
|
||||
// @desc Delete education from profile
|
||||
// @access Private
|
||||
|
||||
router.delete('/education/:edu_id', auth, async (req, res) => {
|
||||
try {
|
||||
const foundProfile = await Profile.findOne({ user: req.user.id });
|
||||
foundProfile.education = foundProfile.education.filter(
|
||||
(edu) => edu._id.toString() !== req.params.edu_id
|
||||
);
|
||||
await foundProfile.save();
|
||||
return res.status(200).json(foundProfile);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return res.status(500).json({ msg: 'Server error' });
|
||||
}
|
||||
});
|
||||
|
||||
// @route GET api/profile/github/:username
|
||||
// @desc Get user repos from Github
|
||||
// @access Public
|
||||
router.get('/github/:username', async (req, res) => {
|
||||
try {
|
||||
const uri = encodeURI(
|
||||
`https://api.github.com/users/${req.params.username}/repos?per_page=5&sort=created:asc`
|
||||
);
|
||||
const headers = {
|
||||
'user-agent': 'node.js',
|
||||
Authorization: `token ${config.get('githubToken')}`
|
||||
};
|
||||
|
||||
const gitHubResponse = await axios.get(uri, { headers });
|
||||
return res.json(gitHubResponse.data);
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
return res.status(404).json({ msg: 'No Github profile found' });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
@@ -0,0 +1,83 @@
|
||||
const express = require("express");
|
||||
const router = express.Router();
|
||||
const gravatar = require("gravatar");
|
||||
const bcrypt = require("bcryptjs");
|
||||
const jwt = require("jsonwebtoken");
|
||||
const config = require("config");
|
||||
const { check, validationResult } = require("express-validator");
|
||||
const User = require("../../models/User");
|
||||
const normalize = require('normalize-url');
|
||||
|
||||
// @route POST api/users
|
||||
// @desc Register user
|
||||
// @access Public
|
||||
router.post(
|
||||
"/",
|
||||
check("name", "Name is required").notEmpty(),
|
||||
check("email", "Please include a valid email").isEmail(),
|
||||
check(
|
||||
"password",
|
||||
"Please enter a password with 6 or more characters"
|
||||
).isLength({ min: 6 }),
|
||||
async (req, res) => {
|
||||
const errors = validationResult(req);
|
||||
if (!errors.isEmpty()) {
|
||||
return res.status(400).json({ errors: errors.array() });
|
||||
}
|
||||
|
||||
const { name, email, password } = req.body;
|
||||
|
||||
try {
|
||||
let user = await User.findOne({ email });
|
||||
|
||||
if (user) {
|
||||
return res
|
||||
.status(400)
|
||||
.json({ errors: [{ msg: "User already exists" }] });
|
||||
}
|
||||
|
||||
const avatar = normalize(
|
||||
gravatar.url(email, {
|
||||
s: "200",
|
||||
r: "pg",
|
||||
d: "mm",
|
||||
}),
|
||||
{ forceHttps: true }
|
||||
);
|
||||
|
||||
user = new User({
|
||||
name,
|
||||
email,
|
||||
avatar,
|
||||
password,
|
||||
});
|
||||
|
||||
const salt = await bcrypt.genSalt(10);
|
||||
|
||||
user.password = await bcrypt.hash(password, salt);
|
||||
|
||||
await user.save();
|
||||
|
||||
const payload = {
|
||||
user: {
|
||||
id: user.id,
|
||||
},
|
||||
};
|
||||
|
||||
jwt.sign(
|
||||
payload,
|
||||
config.get("jwtSecret"),
|
||||
{ expiresIn: "5 days" },
|
||||
(err, token) => {
|
||||
if (err) throw err;
|
||||
res.json({ token });
|
||||
}
|
||||
);
|
||||
} catch (err) {
|
||||
console.error(err.message);
|
||||
res.status(500).send("Server error");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
module.exports = router;
|
||||
@@ -0,0 +1,16 @@
|
||||
const express = require('express');
|
||||
const connectDB= require('./config/db')
|
||||
const app = express();
|
||||
|
||||
connectDB();
|
||||
|
||||
app.use(express.json({extended:false}));
|
||||
app.get('/',(req,res)=> res.send('API Running'));
|
||||
|
||||
app.use('/api/users', require('./routers/api/users'))
|
||||
app.use('/api/auth', require('./routers/api/auth'))
|
||||
app.use('/api/profile', require('./routers/api/profile'))
|
||||
app.use('/api/posts', require('./routers/api/posts'))
|
||||
const PORT = process.env.PORT || 5000;
|
||||
|
||||
app.listen(PORT,()=> console.log(`Server started on port ${PORT}`));
|
||||
Reference in New Issue
Block a user