implement a new way for repsonsive layout

lishenyu16 · May 3, 2020 · 5eee322 · 5eee322
1 parent fa7bd6e
commit 5eee322
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/inspiredblog/src/pages/index/App.js b/inspiredblog/src/pages/index/App.js
@@ -168,13 +168,23 @@ const App = (props) => {
     const [state, setState] = React.useState({
         left: false,
     });
+    const [mql, setMql] = React.useState(window.matchMedia(`(max-width: 600px)`));
+    const [mobile, setMobile] = React.useState(false);
     useEffect(()=>{
         props.checkAuthState();
     },[])
     useEffect(()=>{
         props.trackUser();
     },[])
 
+    useEffect(()=>{ // similar to componentWillMount. when it's unmounted, run the returned function
+        // refer to this: https://zhuanlan.zhihu.com/p/21650585
+        mql.addListener(mediaQueryChanged);
+        return () =>{
+            setMql(mql);
+            setMobile(mql.matches);
+        }
+    },[])
     let history = useHistory();
     const toggleDrawer = (side, open) => event => {
         if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
@@ -262,9 +272,13 @@ const App = (props) => {
         <Route path='*' component = {NotFound}></Route>
     </Switch>)
 
+    const mediaQueryChanged = ()=> {
+        setMobile(mql.matches);
+    }
+
 	return (
 		<React.Fragment>
-			{window.innerWidth>600?
+			{!mobile?
             <div className={classes.desktop}>
                 <Particles 
                     className={classes.particles}

diff --git a/inspiredblog/src/pages/index/components/blogs/BlogDetail.js b/inspiredblog/src/pages/index/components/blogs/BlogDetail.js
@@ -48,7 +48,7 @@ const useStyles = makeStyles(theme => ({
         '@media(max-width:600px)':{
             fontSize:'12px',
             padding:'4px 12px',
-            top: '20px'
+            marginTop: '0px'
         }
     },
     followBtn: {
@@ -91,6 +91,7 @@ const useStyles = makeStyles(theme => ({
     blogContent: {
         width:'85%', 
         margin: '0 auto',
+        paddingTop:'25px',
         '@media(max-width:500px)':{
             width:'100%', 
         }
@@ -157,7 +158,7 @@ const BlogDetail = (props) => {
             let viewsArr = views.split(',');
             if (!viewsArr.includes(props.match.params.blog_id.toLocaleString())){
                 increaseCount = true;
-                cookies.set('viewsHistory', views+`${props.match.params.blog_id},`, {maxAge: 1000*60*60});
+                cookies.set('viewsHistory', views+`${props.match.params.blog_id},`, {maxAge: 1000*60*60*24});
             }
         }
         else {
@@ -421,7 +422,7 @@ const BlogDetail = (props) => {
                             <Link to={`/blogs/profile/${props.blog.blogDetail.user_id}`}  className={'sansBold'} style={{textDecoration:'none'}}>{' '+props.blog.blogDetail.username}</Link>
                         </div>
                         <div style={{color: '#657786', fontSize: '13px'}}>
-                            {format(new Date(props.blog.blogDetail.created_on), 'MMM dd, yyyy')}
+                            {format(new Date(props.blog.blogDetail.created_on), 'MMM dd, yyyy')}<span style={{marginLeft: '10px'}}>{props.blog.blogDetail.views} views</span>
                         </div>
                     </div>
                     <div>