Removed all of the duplicate js files from the rebase for github
This commit is contained in:
QkoSad
@@ -2,3 +2,4 @@ node_modules
|
||||
App.css
|
||||
start_in_tmux.sh
|
||||
default.json
|
||||
production.json
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
Generated
+15
-8
@@ -13,7 +13,7 @@
|
||||
"@mui/icons-material": "^6.1.1",
|
||||
"@mui/material": "^6.1.1",
|
||||
"@reduxjs/toolkit": "^1.9.5",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"@types/jest": "^27.5.2",
|
||||
@@ -142,7 +142,7 @@
|
||||
"@babel/helper-validator-option": "^7.24.8",
|
||||
"browserslist": "^4.23.1",
|
||||
"lru-cache": "^5.1.1",
|
||||
"semver": "^6.3.0"
|
||||
"semver": "^6.3.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
@@ -175,6 +175,9 @@
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@babel/core": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helper-plugin-utils": {
|
||||
@@ -1656,10 +1659,10 @@
|
||||
"@babel/code-frame": "^7.10.4",
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"@types/aria-query": "^5.0.1",
|
||||
"aria-query": "^5.0.0",
|
||||
"aria-query": "5.1.3",
|
||||
"chalk": "^4.1.0",
|
||||
"dom-accessibility-api": "^0.5.9",
|
||||
"lz-string": "^1.4.4",
|
||||
"lz-string": "^1.5.0",
|
||||
"pretty-format": "^27.0.2"
|
||||
},
|
||||
"engines": {
|
||||
@@ -1809,7 +1812,7 @@
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/types": "^7.3.0"
|
||||
"@babel/types": "^7.20.7"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
@@ -1835,8 +1838,8 @@
|
||||
"integrity": "sha512-mpT8LJJ4CMeeahobofYWIjFo0xonRS/HfxnVEPMPFSQdGUt1uHCnoPT7Zhb+sjDU2wz0oKV0OLUR0WzrHNgfeA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"expect": "^29.0.0",
|
||||
"pretty-format": "^29.0.0"
|
||||
"jest-matcher-utils": "^27.0.0",
|
||||
"pretty-format": "^27.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/parse-json": {
|
||||
@@ -2027,6 +2030,10 @@
|
||||
{
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/browserslist"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
@@ -3527,7 +3534,7 @@
|
||||
"react": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-native": ">=0.59",
|
||||
"redux": "^4"
|
||||
"redux": "^4 || ^5.0.0-beta.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
|
||||
@@ -1,99 +0,0 @@
|
||||
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';
|
||||
|
||||
// Redux
|
||||
import { Provider } from 'react-redux';
|
||||
import store from './store';
|
||||
import { loadUser } from './actions/auth';
|
||||
import setAuthToken from './utils/setAuthToken';
|
||||
|
||||
import './App.css';
|
||||
import { logOut } from './reducers/auth';
|
||||
|
||||
// Level - 1
|
||||
//
|
||||
|
||||
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(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="profile/: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>
|
||||
);
|
||||
/*
|
||||
return (
|
||||
<Provider store={store}>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="login" element={<Login />} />
|
||||
</Routes>
|
||||
</Router>
|
||||
</Provider>
|
||||
);*/
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -1,9 +0,0 @@
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import {removeAlert, setAlert } from '../reducers/alert';
|
||||
|
||||
export const createAlert = (msg, alertType, timeout = 5000) => dispatch => {
|
||||
const id = uuidv4();
|
||||
dispatch(setAlert({ msg, alertType, id }));
|
||||
|
||||
setTimeout(() => dispatch(removeAlert(id)), timeout);
|
||||
};
|
||||
@@ -1,68 +0,0 @@
|
||||
import api from "../utils/api";
|
||||
import { createAlert } from "./alert";
|
||||
import {
|
||||
loginSucces,
|
||||
authError,
|
||||
registerSuccess,
|
||||
logOut,
|
||||
userLoaded,
|
||||
} from "../reducers/auth";
|
||||
/*
|
||||
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
|
||||
*/
|
||||
|
||||
export const login = (email, password) => async (dispatch) => {
|
||||
const body = { email, password };
|
||||
try {
|
||||
const res = await api.post("/auth", body);
|
||||
|
||||
dispatch(loginSucces(res.data));
|
||||
|
||||
dispatch(loadUser());
|
||||
} catch (err) {
|
||||
const errors = err.response.data.errors;
|
||||
if (errors) {
|
||||
errors.forEach((error) => dispatch(createAlert(error.msg, "danger")));
|
||||
}
|
||||
dispatch({
|
||||
type: "auth/loginFail",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export const loadUser = () => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.get("/auth");
|
||||
|
||||
dispatch(userLoaded(res.data));
|
||||
} catch (err) {
|
||||
dispatch(authError());
|
||||
}
|
||||
};
|
||||
|
||||
// Register User
|
||||
export const register = (formData) => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.post("/users", formData);
|
||||
|
||||
dispatch(registerSuccess(res.data));
|
||||
dispatch(loadUser());
|
||||
} catch (err) {
|
||||
const errors = err.response.data.errors;
|
||||
|
||||
if (errors) {
|
||||
errors.forEach((error) => dispatch(createAlert(error.msg, "danger")));
|
||||
}
|
||||
|
||||
dispatch({
|
||||
type: "auth/registerFail",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export const logout = () => async (dispatch) => {
|
||||
dispatch(logOut);
|
||||
};
|
||||
@@ -1,124 +0,0 @@
|
||||
import {
|
||||
removeComment,
|
||||
addCommentAction,
|
||||
updateLikes,
|
||||
postError,
|
||||
deletePostAction,
|
||||
getPostAction,
|
||||
getPostsAction,
|
||||
addPostAction,
|
||||
} from "../reducers/post";
|
||||
import api from "../utils/api";
|
||||
import { createAlert } from "./alert";
|
||||
|
||||
// Get posts
|
||||
export const getPosts = () => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.get("/posts");
|
||||
|
||||
dispatch(getPostsAction(res.data));
|
||||
} catch (err) {
|
||||
dispatch(
|
||||
postError({ 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(updateLikes({ id, likes: res.data }));
|
||||
} catch (err) {
|
||||
dispatch(
|
||||
postError({ 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(updateLikes({ id, likes: res.data }));
|
||||
} catch (err) {
|
||||
dispatch(
|
||||
postError({ msg: err.response.statusText, status: err.response.status })
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Delete post
|
||||
export const deletePost = (id) => async (dispatch) => {
|
||||
try {
|
||||
await api.delete(`/posts/${id}`);
|
||||
|
||||
dispatch(deletePostAction(id));
|
||||
|
||||
dispatch(createAlert("Post Removed", "success"));
|
||||
} catch (err) {
|
||||
dispatch(
|
||||
postError({ 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(addPostAction(res.data));
|
||||
|
||||
dispatch(createAlert("Post Created", "success"));
|
||||
} catch (err) {
|
||||
dispatch(
|
||||
postError({ 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(getPostAction(res.data));
|
||||
} catch (err) {
|
||||
dispatch(
|
||||
postError({ 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(addCommentAction(res.data));
|
||||
|
||||
dispatch(createAlert("Comment Added", "success"));
|
||||
} catch (err) {
|
||||
dispatch(
|
||||
postError({ 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(removeComment(commentId));
|
||||
|
||||
dispatch(createAlert("Comment Removed", "success"));
|
||||
} catch (err) {
|
||||
dispatch(
|
||||
postError({ msg: err.response.statusText, status: err.response.status })
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -1,210 +0,0 @@
|
||||
import api from "../utils/api";
|
||||
import { createAlert } from "./alert";
|
||||
import {
|
||||
noRepos,
|
||||
getRepos,
|
||||
clearProfile,
|
||||
profileError,
|
||||
getProfilesType,
|
||||
updateProfile,
|
||||
getProfile,
|
||||
} from "../reducers/profile";
|
||||
import { accountDeleted } from "../reducers/auth";
|
||||
|
||||
|
||||
// Get current users profile
|
||||
export const getCurrentProfile = () => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.get("/profile/me");
|
||||
|
||||
dispatch(getProfile(res.data));
|
||||
} catch (err) {
|
||||
dispatch(
|
||||
profileError({
|
||||
msg: err.response.statusText,
|
||||
status: err.response.status,
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Get all profiles
|
||||
export const getProfiles = () => async (dispatch) => {
|
||||
dispatch(clearProfile());
|
||||
|
||||
try {
|
||||
const res = await api.get("/profile");
|
||||
|
||||
dispatch(getProfilesType(res.data));
|
||||
} catch (err) {
|
||||
dispatch(
|
||||
profileError({
|
||||
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(getProfile(res.data));
|
||||
} catch (err) {
|
||||
dispatch(
|
||||
profileError({
|
||||
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(getRepos(res.data));
|
||||
} catch (err) {
|
||||
dispatch(noRepos());
|
||||
}
|
||||
};
|
||||
|
||||
// Create or update profile
|
||||
export const createProfile =
|
||||
(formData, edit = false) =>
|
||||
async (dispatch) => {
|
||||
try {
|
||||
const res = await api.post("/profile", formData);
|
||||
|
||||
dispatch(getProfile(res.data));
|
||||
|
||||
dispatch(
|
||||
createAlert(edit ? "Profile Updated" : "Profile Created", "success")
|
||||
);
|
||||
|
||||
} catch (err) {
|
||||
const errors = err.response.data.errors;
|
||||
|
||||
if (errors) {
|
||||
errors.forEach((error) => dispatch(createAlert(error.msg, "danger")));
|
||||
}
|
||||
|
||||
dispatch(
|
||||
profileError({
|
||||
msg: err.response.statusText,
|
||||
status: err.response.status,
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Add Experience
|
||||
export const addExperience = (formData) => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.put("/profile/experience", formData);
|
||||
|
||||
dispatch(updateProfile(res.data));
|
||||
|
||||
dispatch(createAlert("Experience Added", "success"));
|
||||
|
||||
} catch (err) {
|
||||
const errors = err.response.data.errors;
|
||||
|
||||
if (errors) {
|
||||
errors.forEach((error) => dispatch(createAlert(error.msg, "danger")));
|
||||
}
|
||||
|
||||
dispatch(
|
||||
profileError({
|
||||
msg: err.response.statusText,
|
||||
status: err.response.status,
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Add Education
|
||||
export const addEducation = (formData) => async (dispatch) => {
|
||||
try {
|
||||
const res = await api.put("/profile/education", formData);
|
||||
|
||||
dispatch(updateProfile(res.data));
|
||||
|
||||
dispatch(createAlert("Education Added", "success"));
|
||||
|
||||
} catch (err) {
|
||||
const errors = err.response.data.errors;
|
||||
|
||||
if (errors) {
|
||||
errors.forEach((error) => dispatch(createAlert(error.msg, "danger")));
|
||||
}
|
||||
|
||||
dispatch(
|
||||
profileError({
|
||||
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(updateProfile(res.data));
|
||||
|
||||
dispatch(createAlert("Experience Removed", "success"));
|
||||
} catch (err) {
|
||||
dispatch(
|
||||
profileError({
|
||||
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(updateProfile(res.data));
|
||||
|
||||
dispatch(createAlert("Education Removed", "success"));
|
||||
} catch (err) {
|
||||
dispatch(
|
||||
profileError({
|
||||
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(clearProfile());
|
||||
dispatch(accountDeleted());
|
||||
|
||||
dispatch(createAlert("Your account has been permanently deleted"));
|
||||
} catch (err) {
|
||||
dispatch(
|
||||
profileError({
|
||||
msg: err.response.statusText,
|
||||
status: err.response.status,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -1,61 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { Link, Navigate } from "react-router-dom";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { login } from "../../actions/auth";
|
||||
|
||||
const Login = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
email: "",
|
||||
password: "",
|
||||
});
|
||||
const dispatch = useDispatch();
|
||||
const { email, password } = formData;
|
||||
const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);
|
||||
const onChange = (e) =>
|
||||
setFormData({ ...formData, [e.target.name]: e.target.value });
|
||||
|
||||
const onSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
await dispatch(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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Login;
|
||||
@@ -1,91 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useDispatch,useSelector } from 'react-redux';
|
||||
import { Link, Navigate } from 'react-router-dom';
|
||||
import { createAlert } from '../../actions/alert';
|
||||
import { register } from '../../actions/auth';
|
||||
|
||||
|
||||
const Register = () => {
|
||||
const dispatch = useDispatch();
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
password2: ''
|
||||
});
|
||||
const isAuthenticated = useSelector(state=>state.auth.isAuthenticated)
|
||||
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) {
|
||||
await dispatch(createAlert('Passwords do not match', 'danger'));
|
||||
} else {
|
||||
await dispatch(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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Register;
|
||||
@@ -1,52 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import DashboardActions from "./DashboardActions";
|
||||
import Experience from "./Experience";
|
||||
import Education from "./Education";
|
||||
import { getCurrentProfile, deleteAccount } from "../../actions/profile";
|
||||
|
||||
const Dashboard = () => {
|
||||
const dispatch = useDispatch();
|
||||
useEffect(() => {
|
||||
function fetchData() {
|
||||
dispatch(getCurrentProfile());
|
||||
}
|
||||
fetchData();
|
||||
}, [dispatch]);
|
||||
const user = useSelector((state) => state.auth.user);
|
||||
const profile = useSelector((state) => state.profile.profile);
|
||||
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={async () => await dispatch(deleteAccount())}
|
||||
>
|
||||
<i className="fas fa-user" /> 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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
@@ -1,20 +0,0 @@
|
||||
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;
|
||||
@@ -1,44 +0,0 @@
|
||||
import React, { Fragment } from "react";
|
||||
import {useDispatch } from "react-redux";
|
||||
import { deleteEducation } from "../../actions/profile";
|
||||
import formatDate from "../../utils/formatDate";
|
||||
|
||||
const Education = ({education}) => {
|
||||
const dispatch = useDispatch();
|
||||
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={async () => await dispatch(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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Education;
|
||||
@@ -1,46 +0,0 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import {useDispatch } from 'react-redux';
|
||||
import { deleteExperience } from '../../actions/profile';
|
||||
import formatDate from '../../utils/formatDate';
|
||||
|
||||
const Experience = ({experience}) => {
|
||||
const dispatch = useDispatch();
|
||||
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={async () => dispatch(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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
export default Experience;
|
||||
@@ -1,16 +0,0 @@
|
||||
import React from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
const Alert = () => {
|
||||
const alerts = useSelector((state) => state.alert);
|
||||
return (
|
||||
<div className="alert-wrapper">
|
||||
{alerts.map((alert) => (
|
||||
<div key={alert.id} className={`alert alert-${alert.alertType}`}>
|
||||
{alert.msg}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Alert;
|
||||
@@ -1,34 +0,0 @@
|
||||
import React from "react";
|
||||
import { Link, Navigate } from "react-router-dom";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
const Landing = () => {
|
||||
const isAuthenticated = useSelector((state) => state.auth.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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Landing;
|
||||
@@ -1,57 +0,0 @@
|
||||
import React, { Fragment } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { logOut } from "../../reducers/auth";
|
||||
|
||||
const Navbar = () => {
|
||||
const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);
|
||||
const dispatch = useDispatch();
|
||||
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">Profile</span>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<a onClick={()=>dispatch(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="/posts">
|
||||
<i className="fas fa-code" /> DevConnector
|
||||
</Link>
|
||||
</h1>
|
||||
<Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
@@ -1,14 +0,0 @@
|
||||
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;
|
||||
@@ -1,14 +0,0 @@
|
||||
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;
|
||||
@@ -1,39 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { addComment } from '../../actions/post';
|
||||
|
||||
const CommentForm = ({ postId }) => {
|
||||
const [text, setText] = useState('');
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div className='post-form'>
|
||||
<div className='bg-primary p'>
|
||||
<h3>Leave a Comment</h3>
|
||||
</div>
|
||||
<form
|
||||
className='form my-1'
|
||||
onSubmit={async(e) => {
|
||||
e.preventDefault();
|
||||
await dispatch(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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default CommentForm
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import formatDate from "../../utils/formatDate";
|
||||
import { deleteComment } from "../../actions/post";
|
||||
|
||||
const CommentItem = ({
|
||||
postId,
|
||||
comment: { _id, text, name, avatar, user, date },
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const auth = useSelector((state) => state.auth);
|
||||
return (
|
||||
<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={async () => await dispatch(deleteComment(postId, _id))}
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
>
|
||||
<i className="fas fa-times" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommentItem;
|
||||
@@ -1,39 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { useDispatch, useSelector } 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 = () => {
|
||||
const dispatch = useDispatch();
|
||||
const { post, loading } = useSelector((state) => state.post);
|
||||
const { id } = useParams();
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
await dispatch(getPost(id));
|
||||
}
|
||||
fetchData();
|
||||
}, [dispatch, 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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Post;
|
||||
@@ -1,36 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { addPost } from "../../actions/post";
|
||||
|
||||
const PostForm = () => {
|
||||
const [text, setText] = useState("");
|
||||
const dispatch = useDispatch();
|
||||
return (
|
||||
<div className="post-form">
|
||||
<div className="bg-primary p">
|
||||
<h3>Say Something...</h3>
|
||||
</div>
|
||||
<form
|
||||
className="form my-1"
|
||||
onSubmit={async (e) => {
|
||||
e.preventDefault();
|
||||
await dispatch(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>
|
||||
);
|
||||
};
|
||||
|
||||
export default PostForm;
|
||||
@@ -1,57 +0,0 @@
|
||||
import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import formatDate from "../../utils/formatDate";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { addLike, removeLike, deletePost } from "../../actions/post";
|
||||
|
||||
const PostItem = ({
|
||||
post: { _id, text, name, avatar, user, likes, comments, date },
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const auth = useSelector((state) => state.auth);
|
||||
return (
|
||||
<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>
|
||||
<button
|
||||
onClick={async () => await dispatch(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={async () => await dispatch(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={async () => await dispatch(deletePost(_id))}
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
>
|
||||
<i className="fas fa-times" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default PostItem;
|
||||
@@ -1,34 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import PostItem from "./PostItem";
|
||||
import PostForm from "./PostForm";
|
||||
import { getPosts } from "../../actions/post";
|
||||
|
||||
const Posts = () => {
|
||||
const dispatch = useDispatch();
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
await dispatch(getPosts());
|
||||
}
|
||||
fetchData();
|
||||
}, [dispatch]);
|
||||
const posts = useSelector((state) => state.post.posts);
|
||||
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Posts;
|
||||
@@ -1,116 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { addEducation } from "../../actions/profile";
|
||||
|
||||
const AddEducation = () => {
|
||||
const navigate = useNavigate();
|
||||
const dispatch = useDispatch();
|
||||
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={async (e) => {
|
||||
e.preventDefault();
|
||||
await dispatch(addEducation(formData)).then(() => navigate("/dashboard"));
|
||||
// i have no idea how this works used to work, i removed the navigate function from the addEducation and it does now
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default AddEducation;
|
||||
@@ -1,115 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Link, useNavigate } from 'react-router-dom';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { addExperience } from '../../actions/profile';
|
||||
|
||||
const AddExperience = () => {
|
||||
const dispatch = useDispatch();
|
||||
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={async(e) => {
|
||||
e.preventDefault();
|
||||
await dispatch(addExperience(formData)).then(() => navigate('/dashboard'));
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddExperience;
|
||||
@@ -1,266 +0,0 @@
|
||||
import React, { Fragment, useState, useEffect } from "react";
|
||||
import { Link, useMatch, useNavigate } from "react-router-dom";
|
||||
import { createProfile, getCurrentProfile } from "../../actions/profile";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
const initialState = {
|
||||
company: "",
|
||||
website: "",
|
||||
location: "",
|
||||
status: "",
|
||||
skills: "",
|
||||
githubusername: "",
|
||||
bio: "",
|
||||
twitter: "",
|
||||
facebook: "",
|
||||
linkedin: "",
|
||||
youtube: "",
|
||||
instagram: "",
|
||||
};
|
||||
|
||||
const ProfileForm = () => {
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const { profile, loading } = useSelector((state) => state.profile);
|
||||
|
||||
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
|
||||
async function fetchData(){
|
||||
await dispatch(getCurrentProfile())
|
||||
}
|
||||
if (!profile) fetchData();
|
||||
|
||||
// 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, dispatch, 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 = async (e) => {
|
||||
const editing = profile ? true : false;
|
||||
e.preventDefault();
|
||||
await dispatch(createProfile(formData, editing)).then(() => {
|
||||
console.log(editing)
|
||||
if (!editing) navigate("/dashboard");
|
||||
});
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileForm;
|
||||
@@ -1,86 +0,0 @@
|
||||
import React, { Fragment, useEffect } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { useDispatch, useSelector } 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 = () => {
|
||||
const profile = useSelector((state) => state.profile.profile);
|
||||
const auth = useSelector((state) => state.auth);
|
||||
const dispatch = useDispatch();
|
||||
const { id } = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchData(){
|
||||
await dispatch(getProfileById(id));
|
||||
}
|
||||
fetchData();
|
||||
}, [dispatch,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>
|
||||
);
|
||||
};
|
||||
|
||||
export default Profile;
|
||||
@@ -1,30 +0,0 @@
|
||||
import React, { Fragment } from 'react';
|
||||
|
||||
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>
|
||||
);
|
||||
|
||||
|
||||
export default ProfileAbout;
|
||||
@@ -1,26 +0,0 @@
|
||||
import React from 'react';
|
||||
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>
|
||||
);
|
||||
|
||||
|
||||
|
||||
export default ProfileEducation;
|
||||
@@ -1,25 +0,0 @@
|
||||
import React from 'react';
|
||||
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>
|
||||
);
|
||||
|
||||
|
||||
export default ProfileExperience;
|
||||
@@ -1,45 +0,0 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { getGithubRepos } from "../../actions/profile";
|
||||
|
||||
const ProfileGithub = ({ username }) => {
|
||||
const repos = useSelector((state) => state.profile.repos);
|
||||
const dispatch = useDispatch();
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
await dispatch(getGithubRepos(username));
|
||||
}
|
||||
fetchData();
|
||||
}, [dispatch, 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>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileGithub;
|
||||
@@ -1,46 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileTop;
|
||||
@@ -1,38 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileItem;
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
import React, { Fragment, useEffect } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import Spinner from "../layout/Spinner";
|
||||
import ProfileItem from "./ProfileItem";
|
||||
import { getProfiles } from "../../actions/profile";
|
||||
|
||||
const Profiles = () => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
await dispatch(getProfiles());
|
||||
}
|
||||
fetchData();
|
||||
}, [dispatch]);
|
||||
|
||||
const { profiles, loading } = useSelector((state) => state.profile);
|
||||
return (
|
||||
<section className="container">
|
||||
{loading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Fragment>
|
||||
<h1 className="large text-primary">Developers</h1>
|
||||
<p className="lead">
|
||||
<i className="fab fa-connectdevelop" /> Browse and connect with
|
||||
developers
|
||||
</p>
|
||||
<div className="profiles">
|
||||
{profiles.length > 0 ? (
|
||||
profiles.map((profile) => (
|
||||
<ProfileItem key={profile._id} profile={profile} />
|
||||
))
|
||||
) : (
|
||||
<h4>No profiles found...</h4>
|
||||
)}
|
||||
</div>
|
||||
</Fragment>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Profiles;
|
||||
@@ -1,14 +0,0 @@
|
||||
import React from "react";
|
||||
import { Navigate } from "react-router-dom";
|
||||
import { useSelector } from "react-redux";
|
||||
import Spinner from "../layout/Spinner";
|
||||
|
||||
const PrivateRoute = ({ component: Component }) => {
|
||||
const { isAuthenticated, loading } = useSelector((state) => state.auth);
|
||||
if (loading) return <Spinner />;
|
||||
if (isAuthenticated) return <Component />;
|
||||
|
||||
return <Navigate to="/login" />;
|
||||
};
|
||||
|
||||
export default PrivateRoute;
|
||||
@@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
import {createRoot} from 'react-dom/client'
|
||||
import App from './App';
|
||||
|
||||
// Level - 0
|
||||
//Program stars from Here. Imports and renders App.
|
||||
|
||||
const root = createRoot(document.getElementById('root'));
|
||||
root.render(<App/>)
|
||||
@@ -1,20 +0,0 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
const initialState = [];
|
||||
|
||||
const alertSlice = createSlice({
|
||||
name: "alert",
|
||||
initialState,
|
||||
reducers: {
|
||||
setAlert(state, action) {
|
||||
return [...state, action.payload];
|
||||
},
|
||||
removeAlert(state, action) {
|
||||
return state.filter((alert) => alert.id !== action.payload);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const { setAlert, removeAlert } = alertSlice.actions;
|
||||
|
||||
export default alertSlice.reducer;
|
||||
@@ -1,76 +0,0 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
const initialState = {
|
||||
token: localStorage.getItem("token"),
|
||||
isAuthenticated: null,
|
||||
loading: true,
|
||||
user: null,
|
||||
};
|
||||
|
||||
const authSlice = createSlice({
|
||||
name: "auth",
|
||||
initialState,
|
||||
reducers: {
|
||||
userLoaded(state, action) {
|
||||
return {
|
||||
...state,
|
||||
isAuthenticated: true,
|
||||
loading: false,
|
||||
user: action.payload,
|
||||
};
|
||||
},
|
||||
registerSuccess(state, action) {
|
||||
return {
|
||||
...state,
|
||||
...action.payload,
|
||||
isAuthenticated: true,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
loginSucces(state, action) {
|
||||
return {
|
||||
...state,
|
||||
...action.payload,
|
||||
isAuthenticated: true,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
accountDeleted(state, action) {
|
||||
return {
|
||||
...state,
|
||||
token: null,
|
||||
isAuthenticated: false,
|
||||
loading: false,
|
||||
user: null,
|
||||
};
|
||||
},
|
||||
authError(state, action) {
|
||||
return {
|
||||
...state,
|
||||
token: null,
|
||||
isAuthenticated: false,
|
||||
loading: false,
|
||||
user: null,
|
||||
};
|
||||
},
|
||||
logOut(state, action) {
|
||||
return {
|
||||
...state,
|
||||
token: null,
|
||||
isAuthenticated: false,
|
||||
loading: false,
|
||||
user: null,
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
export const {
|
||||
logOut,
|
||||
userLoaded,
|
||||
loginSucces,
|
||||
registerSuccess,
|
||||
accountDeleted,
|
||||
authError,
|
||||
} = authSlice.actions;
|
||||
|
||||
export default authSlice.reducer;
|
||||
@@ -1,92 +0,0 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
const initialState = {
|
||||
posts: [],
|
||||
post: null,
|
||||
loading: true,
|
||||
error: {},
|
||||
};
|
||||
|
||||
const postSlice = createSlice({
|
||||
name: "post",
|
||||
initialState,
|
||||
reducers: {
|
||||
getPostsAction(state, action) {
|
||||
return {
|
||||
...state,
|
||||
posts: action.payload,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
getPostAction(state, action) {
|
||||
return {
|
||||
...state,
|
||||
post: action.payload,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
addPostAction(state, action) {
|
||||
return {
|
||||
...state,
|
||||
posts: [action.payload, ...state.posts],
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
deletePostAction(state, action) {
|
||||
return {
|
||||
...state,
|
||||
posts: state.posts.filter((post) => post._id !== action.payload),
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
postError(state, action) {
|
||||
return {
|
||||
...state,
|
||||
error: action.payload,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
updateLikes(state, action) {
|
||||
return {
|
||||
...state,
|
||||
posts: state.posts.map((post) =>
|
||||
post._id === action.payload.id
|
||||
? { ...post, likes: action.payload.likes }
|
||||
: post
|
||||
),
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
addCommentAction(state, action) {
|
||||
return {
|
||||
...state,
|
||||
post: { ...state.post, comments: action.payload },
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
removeComment(state, action) {
|
||||
return {
|
||||
...state,
|
||||
post: {
|
||||
...state.post,
|
||||
comments: state.post.comments.filter(
|
||||
(comment) => comment._id !== action.payload
|
||||
),
|
||||
},
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
export const {
|
||||
removeComment,
|
||||
addCommentAction,
|
||||
updateLikes,
|
||||
postError,
|
||||
deletePostAction,
|
||||
getPostAction,
|
||||
getPostsAction,
|
||||
addPostAction,
|
||||
} = postSlice.actions;
|
||||
|
||||
export default postSlice.reducer;
|
||||
@@ -1,75 +0,0 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
const initialState = {
|
||||
profile: null,
|
||||
profiles: [],
|
||||
repos: [],
|
||||
loading: true,
|
||||
error: {},
|
||||
};
|
||||
const profileSlice = createSlice({
|
||||
name: "profile",
|
||||
initialState,
|
||||
reducers: {
|
||||
getProfile(state, action) {
|
||||
return {
|
||||
...state,
|
||||
profile: action.payload,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
updateProfile(state, action) {
|
||||
return {
|
||||
...state,
|
||||
profile: action.payload,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
getProfilesType(state, action) {
|
||||
return {
|
||||
...state,
|
||||
profiles: action.payload,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
profileError(state, action) {
|
||||
return {
|
||||
...state,
|
||||
error: action.payload,
|
||||
loading: false,
|
||||
profile: null,
|
||||
};
|
||||
},
|
||||
clearProfile(state, action) {
|
||||
return {
|
||||
...state,
|
||||
profile: null,
|
||||
repos: [],
|
||||
};
|
||||
},
|
||||
getRepos(state, action) {
|
||||
return {
|
||||
...state,
|
||||
repos: action.payload,
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
noRepos(state, action) {
|
||||
return {
|
||||
...state,
|
||||
repos: [],
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
export const {
|
||||
noRepos,
|
||||
getRepos,
|
||||
clearProfile,
|
||||
profileError,
|
||||
getProfilesType,
|
||||
updateProfile,
|
||||
getProfile,
|
||||
} = profileSlice.actions;
|
||||
|
||||
export default profileSlice.reducer;
|
||||
@@ -1,32 +0,0 @@
|
||||
import setAuthToken from './utils/setAuthToken';
|
||||
import { configureStore } from '@reduxjs/toolkit';
|
||||
|
||||
import alertReducer from './reducers/alert';
|
||||
import authReducer from './reducers/auth';
|
||||
import profileReducer from './reducers/profile'
|
||||
import postReducer from './reducers/post'
|
||||
|
||||
|
||||
const store = configureStore({
|
||||
reducer: {
|
||||
alert: alertReducer,
|
||||
auth: authReducer,
|
||||
profile: profileReducer,
|
||||
post: postReducer
|
||||
}})
|
||||
|
||||
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;
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
import axios from 'axios';
|
||||
import store from '../store';
|
||||
|
||||
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: 'auth/logOut' });
|
||||
}
|
||||
return Promise.reject(err);
|
||||
}
|
||||
);
|
||||
|
||||
export default api;
|
||||
@@ -1,5 +0,0 @@
|
||||
function formatDate(date) {
|
||||
return new Intl.DateTimeFormat().format(new Date(date));
|
||||
}
|
||||
|
||||
export default formatDate;
|
||||
@@ -1,15 +0,0 @@
|
||||
import api from './api';
|
||||
|
||||
// store our JWT in LS and set axios headers if we do have a token
|
||||
|
||||
const setAuthToken = (token) => {
|
||||
if (token) {
|
||||
api.defaults.headers.common['x-auth-token'] = token;
|
||||
localStorage.setItem('token', token);
|
||||
} else {
|
||||
delete api.defaults.headers.common['x-auth-token'];
|
||||
localStorage.removeItem('token');
|
||||
}
|
||||
};
|
||||
|
||||
export default setAuthToken;
|
||||
+1
-2
@@ -7,8 +7,7 @@
|
||||
"start": "ts-node server.ts",
|
||||
"server": "ts-node-dev server.ts",
|
||||
"client": "npm start --prefix client --trace-depracation",
|
||||
"dev": "concurrently \"npm run server\" \"npm run client\"",
|
||||
"render": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
|
||||
"dev": "concurrently \"npm run server\" \"npm run client\""
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
|
||||
@@ -1,80 +0,0 @@
|
||||
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;
|
||||
@@ -1,221 +0,0 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user