profile page initial

lishenyu16 · Apr 9, 2020 · 5822340 · 5822340
1 parent 36bc545
commit 5822340
Show file tree

Hide file tree

Showing 16 changed files with 249 additions and 33 deletions.
diff --git a/inspiredblog/package-lock.json b/inspiredblog/package-lock.json
diff --git a/inspiredblog/package.json b/inspiredblog/package.json
@@ -40,7 +40,7 @@
     "draft-js": "^0.11.4",
     "draft-js-image-plugin": "^2.0.7",
     "draft-js-plugins-editor": "^3.0.0",
-    "for-editor-herb": "^1.1.0",
+    "for-editor-herb": "^1.5.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-markdown": "^4.3.1",

diff --git a/inspiredblog/src/pages/.DS_Store b/inspiredblog/src/pages/.DS_Store
diff --git a/inspiredblog/src/pages/index.html b/inspiredblog/src/pages/index.html
@@ -7,6 +7,7 @@
     <script src="https://kit.fontawesome.com/1bf165b180.js" crossorigin="anonymous"></script>
     <!-- <link rel="stylesheet" href="//cdn.quilljs.com/1.2.6/quill.snow.css"> -->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <title>My Story</title>
 </head>
 <body>

diff --git a/inspiredblog/src/pages/index/.DS_Store b/inspiredblog/src/pages/index/.DS_Store
diff --git a/inspiredblog/src/pages/index/App.js b/inspiredblog/src/pages/index/App.js
@@ -29,6 +29,7 @@ import MailIcon from '@material-ui/icons/Mail';
 import ClassIcon from '@material-ui/icons/Class';
 import HomeIcon from '@material-ui/icons/Home';
 import BookIcon from '@material-ui/icons/Book';
+import AccountBoxIcon from '@material-ui/icons/AccountBox';
 import profile from './img/profile.png';
 import DescriptionIcon from '@material-ui/icons/Description';
 import Particles from 'react-particles-js';
@@ -185,6 +186,10 @@ const App = (props) => {
                     <ListItemIcon><ClassIcon /></ListItemIcon>
                     <ListItemText primary={'Categories'} />
                 </ListItem>
+                <ListItem button onClick={()=>history.push(`/blogs/profile/${localStorage.getItem('userId')}`)}>
+                    <ListItemIcon><AccountBoxIcon /></ListItemIcon>
+                    <ListItemText primary={'Your Profile'} />
+                </ListItem>
                 <ListItem button onClick={()=>history.push('/blogs/login')} style={{display: checkAuthState()?'none':''}}>
                     <ListItemIcon>
                         <i class="fas fa-sign-in-alt" style={{fontSize:'24px'}}></i>
@@ -220,7 +225,7 @@ const App = (props) => {
         <Route path='/blogs/verification' component = {Verification}></Route>
         <Route path='/blogs/reset-password/:code/:userId' component = {ResetPassword}></Route>
 
-        <Route path='/blogs/profile' component = {Profile}></Route>
+        <Route path='/blogs/profile/:targetId' component = {Profile}></Route>
         <Route path='/blogs/blog-detail/:blog_id' component = {BlogDetail}></Route>
         <Route path='/blogs/public-blogs' component = {Blogs}></Route>
         <Route path='/blogs' component = {Blogs}></Route>
@@ -293,7 +298,7 @@ const App = (props) => {
                             <span class="material-icons" style={{marginRight:'5px',fontSize:'15px'}}>
                                 account_box
                             </span>
-                            <Link to='/blogs/profile' style={{textDecoration:'none'}}>Your Profile</Link>
+                            <Link to={`/blogs/profile/${localStorage.getItem('userId')}`} style={{textDecoration:'none'}}>Your Profile</Link>
                         </div>
                         <div className={classes.link} style={{display: checkAuthState()?'none':'', }}>
                             <i class="fas fa-sign-in-alt" style={{marginRight:'5px', fontSize:'15px'}}></i>

diff --git 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 (
-        <div style={{display:'flex',flexDirection:'column',}}>
-            <div style={{margin: '30px 0'}}>
-                <span style={{verticalAlign:'bottom',marginRight:'10px'}}>Username: </span>
-                <TextField 
-                    value={username}
-                    onChange={(e)=>setUsername(e.target.value)}
-                    id="username" 
-                    // label="Username" 
-                />
+        <div className={classes.outerDiv}>
+            <div className={classes.header}>
+
+            </div>
+            <div className={classes.secondBanner}>
+                <a href="https://lishenyu16.github.io/aboutMe/" className={classes.imgHref}>
+                    <img src={profile} alt='profile' className={classes.photo}/>
+                </a>
+                <div className={classes.edit}>
+                    <Button variant="outlined" color="primary" fullWidth 
+                        classes={{root:classes.buttonRoot,outlinedPrimary: classes.outlinedPrimary}}>
+                        Edit profile
+                    </Button>
+                </div>
+            </div>
+            <div className={classes.thirdBanner}>
+                <div style={{fontSize: '25px'}}>{props.profile.username}</div>
+                {props.profile.email?<div className={classes.email}>{props.profile.email}</div>:''}
+                {props.profile.publicInfo?<div className={classes.publicInfo}>{props.profile.publicInfo}</div>:''}
+                <div className={classes.dateJoined}>
+                    <i class="fa fa-calendar" style={{fontSize:'16px'}}></i> Joined {format(new Date(props.profile.dateJoined), 'MMMM yyyy')}
+                </div>
+                <div className={classes.follow}>
+                    {'193 following  0 followers'}
+                </div>
+            </div>
+            <div className={classes.switch}>
+                <div className={props.profile.showing=='posts'?classes.activeSwitchButton:classes.switchButton} onClick={()=>props.switchShowing('posts')}>Posts</div>
+                <div className={props.profile.showing=='likes'?classes.activeSwitchButton:classes.switchButton} onClick={()=>props.switchShowing('likes')}>Likes</div>
             </div>
-            <Button variant="contained" color="primary" onClick={()=>props.updateProfile(username)}>
-                Save
-            </Button>
+            {props.profile.showing=='posts'?
+            <div style={{width:'100%'}}>
+                {props.profile.myBlogs.map(b=>
+                    <div style={{margin: '10px 0', cursor: 'pointer'}}>{b.blog_title} - published on {format(new Date(b.created_on), 'MM/dd/yyyy')}</div>)}
+            </div>:''}
+            {props.profile.showing=='likes'?
+            <div>
+
+            </div>:''}
         </div>
     )
 
@@ -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)
diff --git 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
                     </span>
                 </div>
-                <div className={classes.editBlog} style={{cursor:'pointer', display:!checkAuthState()?'none':localStorage.getItem('user_id')==props.blog.blogDetail.user_id?'':'none'}} onClick={clickEdit}>
+                <div className={classes.editBlog} style={{cursor:'pointer', display:!checkAuthState()?'none':localStorage.getItem('userId')==props.blog.blogDetail.user_id?'':'none'}} onClick={clickEdit}>
                     Edit
                 </div>
                 <div className={classes.title}>{props.blog.blogDetail.blog_title}</div>

diff --git 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
diff --git a/inspiredblog/src/pages/index/img/calendar.jpg b/inspiredblog/src/pages/index/img/calendar.jpg
diff --git a/inspiredblog/src/pages/index/reducers/index.js b/inspiredblog/src/pages/index/reducers/index.js
@@ -3,13 +3,15 @@ import aboutReducer from './aboutReducer';
 import sitesReducer from './sitesReducer';
 import authReducer from './authReducer';
 import blogReducer from './blogReducer';
+import profileReducer from './profileReducer';
 
 const rootReducer = combineReducers(
     {
         about: aboutReducer,
         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
@@ -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;
diff --git 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
@@ -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(),
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,7 +71,7 @@ const useStyles = makeStyles(theme => ({ @@
             '&:hover': {
                 color:'white',
                 backgroundColor:'black'
-             },
+            },
         }
     }));
@@ Expand Down @@