diff --git a/inspiredblog/src/pages/index/components/Profile.js b/inspiredblog/src/pages/index/components/Profile.js
index 08862d9..b678346 100644
--- a/inspiredblog/src/pages/index/components/Profile.js
+++ b/inspiredblog/src/pages/index/components/Profile.js
@@ -1,38 +1,177 @@
import React, { Component , useEffect, useState } from 'react'
import {Redirect, useHistory} from 'react-router-dom';
import {connect} from 'react-redux';
-import TextField from '@material-ui/core/TextField';
+// import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
-
+import profile from '../img/profile.png';
+import format from 'date-fns/format';
+// import DateRangeIcon from '@material-ui/icons/DateRange';
+// import calendarImg from '../img/calendar.jpg';
const useStyles = makeStyles(theme => ({
-
+ outerDiv:{
+ display:'flex',
+ flexDirection:'column',
+ width: '100%',
+ alignItems:'center'
+ },
+ header: {
+ width:'100%',
+ backgroundColor: 'rgb(197,208,216)',
+ height: '160px',
+ },
+ secondBanner: {
+ position: 'relative',
+ width: '95%',
+ display: 'flex',
+ justifyContent: 'flex-end',
+ margin: '10px 0'
+ },
+ edit:{
+ width:'20%',
+ '@media(max-width:1100px)':{
+ width:'23%'
+ },
+ '@media(max-width:800px)':{
+ width:'25%'
+ },
+ '@media(max-width:600px)':{
+ width:'28%'
+ },
+ },
+ outlinedPrimary: {
+ color: 'rgb(26,151,240)',
+ border: '1px solid rgb(26,151,240)',
+ '&:hover': {
+ backgroundColor: 'rgb(202,215,241)'
+ },
+ },
+ buttonRoot: {
+ borderRadius:'20px',
+ textTransform:'none',
+ },
+ imgHref: {
+ display: 'block',
+ width: '130px',
+ height: '130px',
+ padding: '5px',
+ position: 'absolute',
+ top: '-75px',
+ left: '0px',
+ backgroundColor:'white',
+ padding: '5px',
+ borderRadius: '50%',
+ },
+ photo: {
+ width: '120px',
+ borderRadius: '50%',
+ },
+ thirdBanner: {
+ width:'95%',
+ display: 'flex',
+ flexDirection:'column',
+ alignItems:'flex-start',
+ marginTop: '20px',
+ },
+ publicInfo: {
+ width:'95%',
+ textAlign: 'left',
+ margin:'5px 0',
+ },
+ email: {
+ width: '95%',
+ color: 'rgb(101,119,134)',
+ margin:'5px 0',
+ },
+ dateJoined: {
+ width: '95%',
+ color: 'rgb(101,119,134)',
+ margin:'5px 0',
+ },
+ follow: {
+ margin:'5px 0',
+ width: '95%',
+ },
+ switch: {
+ width:'100%',
+ display:'flex',
+ borderBottom:'1px solid lightgray'
+ },
+ switchButton:{
+ color: 'rgb(101,119,134)',
+ padding: '10px 0',
+ textAlign: 'center',
+ width:'50%',
+ transitionDuration: '0.5s',
+ '&:hover': {
+ borderBottom: '2px solid rgba(29,161,242,1.00)',
+ background: 'lightblue',
+ color: 'rgba(29,161,242,1.00)',
+ },
+ },
+ activeSwitchButton: {
+ padding: '10px 0',
+ textAlign: 'center',
+ width:'50%',
+ transitionDuration: '0.5s',
+ color: 'rgba(29,161,242,1.00)',
+ borderBottom: '2px solid rgba(29,161,242,1.00)',
+ '&:hover': {
+ background: 'lightblue',
+ },
+ }
}));
const Profile = (props) => {
const classes = useStyles();
let history = useHistory();
- const [username, setUsername] = useState('');
+ // const [username, setUsername] = useState('');
useEffect(()=>{
- setUsername(localStorage.getItem('username'));
- },[props.auth.username])
+ props.getProfile(props.match.params.targetId);
+ },[])
return (
-
-
- Username:
- setUsername(e.target.value)}
- id="username"
- // label="Username"
- />
+
-
+
)
@@ -41,13 +180,14 @@ const Profile = (props) => {
const mapStateToProps = (state)=>{
return {
auth: state.auth,
+ profile: state.profile,
}
}
const mapDispatchToProps = (dispatch)=>{
return {
- onSignIn :(email,password)=> dispatch({type: 'SIGN_IN', data: {email, password}}),
+ getProfile: (targetId)=> dispatch({type: 'GET_PROFILE', value: targetId}),
+ switchShowing: (type)=> dispatch({type: 'switch_showing', value: type}),
updateProfile: (username) => dispatch({type: 'UPDATE_PROFILE', payload: username})
- // onSignUp :()=> dispatch({type: 'SIGN_UP'}),
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Profile)
\ No newline at end of file
diff --git a/inspiredblog/src/pages/index/components/blogs/BlogDetail.js b/inspiredblog/src/pages/index/components/blogs/BlogDetail.js
index 989d1fd..0ca30d4 100644
--- a/inspiredblog/src/pages/index/components/blogs/BlogDetail.js
+++ b/inspiredblog/src/pages/index/components/blogs/BlogDetail.js
@@ -217,7 +217,7 @@ const BlogDetail = (props) => {
arrow_back_ios
+
+
+
+
+ 
+
+
+
+
+
+
+
+ {props.profile.username}
+ {props.profile.email?{props.profile.email}
:''}
+ {props.profile.publicInfo?{props.profile.publicInfo}
:''}
+
+ Joined {format(new Date(props.profile.dateJoined), 'MMMM yyyy')}
+
+
+ {'193 following 0 followers'}
+
+
+
-
+ {props.profile.showing=='posts'?
+ props.switchShowing('posts')}>Posts
+ props.switchShowing('likes')}>Likes
+ {props.profile.myBlogs.map(b=>
+
:''}
+ {props.profile.showing=='likes'?
+ {b.blog_title} - published on {format(new Date(b.created_on), 'MM/dd/yyyy')}
)}
+
+
+
:''}
+
Edit
{props.blog.blogDetail.blog_title}
diff --git a/inspiredblog/src/pages/index/components/blogs/Blogs.js b/inspiredblog/src/pages/index/components/blogs/Blogs.js
index 77a1a56..950ff5e 100644
--- a/inspiredblog/src/pages/index/components/blogs/Blogs.js
+++ b/inspiredblog/src/pages/index/components/blogs/Blogs.js
@@ -71,7 +71,7 @@ const useStyles = makeStyles(theme => ({
'&:hover': {
color:'white',
backgroundColor:'black'
- },
+ },
}
}));
diff --git a/inspiredblog/src/pages/index/img/.DS_Store b/inspiredblog/src/pages/index/img/.DS_Store
new file mode 100644
index 0000000..efdca02
Binary files /dev/null and b/inspiredblog/src/pages/index/img/.DS_Store differ
diff --git a/inspiredblog/src/pages/index/img/calendar.jpg b/inspiredblog/src/pages/index/img/calendar.jpg
new file mode 100644
index 0000000..a9001c3
Binary files /dev/null and b/inspiredblog/src/pages/index/img/calendar.jpg differ
diff --git a/inspiredblog/src/pages/index/reducers/index.js b/inspiredblog/src/pages/index/reducers/index.js
index 4433492..4751d6f 100644
--- a/inspiredblog/src/pages/index/reducers/index.js
+++ b/inspiredblog/src/pages/index/reducers/index.js
@@ -3,6 +3,7 @@ import aboutReducer from './aboutReducer';
import sitesReducer from './sitesReducer';
import authReducer from './authReducer';
import blogReducer from './blogReducer';
+import profileReducer from './profileReducer';
const rootReducer = combineReducers(
{
@@ -10,6 +11,7 @@ const rootReducer = combineReducers(
sites: sitesReducer,
auth: authReducer,
blog: blogReducer,
+ profile: profileReducer,
});
export default rootReducer;
diff --git a/inspiredblog/src/pages/index/reducers/profileReducer.js b/inspiredblog/src/pages/index/reducers/profileReducer.js
new file mode 100644
index 0000000..097647d
--- /dev/null
+++ b/inspiredblog/src/pages/index/reducers/profileReducer.js
@@ -0,0 +1,38 @@
+const initialState = {
+ username: null,
+ email: null,
+ dateJoined: new Date(),
+ publicInfo: null,
+ following: 0,
+ follower: 0,
+ myBlogs: [],
+ isSelf: false,
+ showing: 'posts', // alternative: likes
+}
+
+const profileReducer = (state=initialState, action) => {
+
+ switch (action.type){
+ case 'get_profile_success':
+ return {
+ ...state,
+ username: action.value.profileData.username,
+ email: action.value.profileData.email || null,
+ dateJoined: action.value.profileData.created_on,
+ publicInfo: action.value.profileData.public_info,
+ isSelf: action.value.isSelf,
+ myBlogs: action.value.blogsData,
+ // follower: action.data.follower,
+ // following: action.data.following,
+ }
+ case 'switch_showing':
+ return {
+ ...state,
+ showing: action.value,
+ }
+ default:
+ return state
+ }
+}
+
+export default profileReducer;
\ No newline at end of file
diff --git a/inspiredblog/src/pages/index/sagas/auth.js b/inspiredblog/src/pages/index/sagas/auth.js
index b3923de..b8f1daf 100644
--- a/inspiredblog/src/pages/index/sagas/auth.js
+++ b/inspiredblog/src/pages/index/sagas/auth.js
@@ -51,6 +51,7 @@ export function* signinSaga(action){
yield localStorage.setItem('email',res.data.email);
yield localStorage.setItem('token',res.data.token);
yield localStorage.setItem('isAdmin',res.data.isAdmin);
+ yield localStorage.setItem('userId',res.data.userId);
yield localStorage.setItem('expirationTime', new Date(res.data.expirationTime));
yield put({
type: 'signin_success',
diff --git a/inspiredblog/src/pages/index/sagas/index.js b/inspiredblog/src/pages/index/sagas/index.js
index 370d97b..e7549b4 100644
--- a/inspiredblog/src/pages/index/sagas/index.js
+++ b/inspiredblog/src/pages/index/sagas/index.js
@@ -2,12 +2,14 @@ import { all, fork } from 'redux-saga/effects';
import { watchIncreaseCounter} from './aboutSaga';
import {watchAuth} from './auth';
import {watchBlogs} from './blog';
+import {watchProfile} from './profile';
export function* rootSaga(){
yield all([
// fork(watchIncreaseCounter),
watchIncreaseCounter(),
watchAuth(),
watchBlogs(),
+ watchProfile(),
])
// yield all([
// helloSaga(),
diff --git a/inspiredblog/src/pages/index/sagas/profile.js b/inspiredblog/src/pages/index/sagas/profile.js
new file mode 100644
index 0000000..87c9c32
--- /dev/null
+++ b/inspiredblog/src/pages/index/sagas/profile.js
@@ -0,0 +1,27 @@
+import { takeLatest, call, put, select } from 'redux-saga/effects';
+import axios from 'axios';
+
+const host = process.env.NODE_ENV === "production"?'':'http://localhost:5000';
+
+function* getProfile(action){
+ let header = {
+ headers: {
+ Authorization: 'Bearer ' + localStorage.getItem('token')
+ }
+ }
+ try {
+ const result = yield axios.get(host + `/api/profile/getProfile/${action.value}`, header);
+ yield put({
+ type: 'get_profile_success',
+ value: result.data,
+ })
+ }
+ catch(err){
+ console.log(err.response);
+ alert(err.response.data.message);
+ }
+}
+
+export function* watchProfile(){
+ yield takeLatest('GET_PROFILE', getProfile);
+}
\ No newline at end of file