Hotfix/all/thumhnail url (#215)

Hotfix/all/thumhnail url
connect-foundation · Dec 22, 2019 · 1ed2e38 · 1ed2e38
2 parents 4d686f5 + 836fcc6
commit 1ed2e38
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 9 deletions.
diff --git a/client/src/components/MusicDetail/index.tsx b/client/src/components/MusicDetail/index.tsx
@@ -8,6 +8,7 @@ import { IMusicContent } from '../MusicDetail/types';
 import { IMusic } from '../UploadMusic/types';
 import { getShortId, getTimeSimple } from '../../utils';
 import Comment from '../Comment';
+import { CircularProgress } from '@material-ui/core';
 
 const MusicDetail: React.FC<MusicDetailProp> = ({
   data,
@@ -62,7 +63,9 @@ const MusicDetail: React.FC<MusicDetailProp> = ({
 
   return (
     isLoading || data === null
-      ? (<div>Loading...</div>)
+      ? (<S.Progress>
+        <CircularProgress color="inherit" />
+      </S.Progress>)
       : (
         <S.Container>
           <S.Header>

diff --git a/client/src/components/MusicDetail/styles.ts b/client/src/components/MusicDetail/styles.ts
@@ -68,3 +68,9 @@ export const CopyRight = styled.div`
     margin: 5rem 0;
     color: ${theme.AMERICAN_RIVER};
 `;
+
+export const Progress = styled.div`
+    margin: auto auto;
+    margin-top: 20px;
+    color: ${theme.BORDER_GRAY};
+`;
diff --git a/client/src/components/Portfolio/index.tsx b/client/src/components/Portfolio/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import * as S from './style';
 import StyledLink from '../../basics/StyledLink';
@@ -30,7 +30,7 @@ const Portfolio:React.FC<portfolioProp> = ({
   const showFollowersPopup = () => { setShowFollowers(true); };
   const closeFollowingsPopup = () => { setShowFollowings(false); };
   const showFollowingsPopup = () => { setShowFollowings(true); };
-  const thumbnailUrl = useSelector((state:RootState) => state.login.thumbnailUrl);
+  const thumbnailUrl = useRef('');
 
   const onClickFollow = () => {
     if (followable) {
@@ -67,6 +67,7 @@ const Portfolio:React.FC<portfolioProp> = ({
             } else {
               setFollowable(true);
             }
+            thumbnailUrl.current = data.thumbnailUrl;
           }
         });
       }
@@ -88,7 +89,7 @@ const Portfolio:React.FC<portfolioProp> = ({
           </S.FollowLine>
 
         </S.PortfolioDetail>
-        <S.PortfolioImage src={thumbnailUrl} />
+         <S.PortfolioImage src={thumbnailUrl.current} />
       </S.PortfolioBox>
       <S.IntroduceBox>
         {isLogin

diff --git a/client/src/components/WorksDetail/index.tsx b/client/src/components/WorksDetail/index.tsx
@@ -13,6 +13,7 @@ import {
 import { WorksDetailProp } from './types';
 import { UPLOAD } from '../../utils/constants';
 import { RootState } from '../../modules';
+import { CircularProgress } from '@material-ui/core';
 
 const WorksDetail:React.FC<WorksDetailProp> = ({
   data, inputComment, user, isLoading, isError, changeInputHandler, addNewComment,
@@ -69,7 +70,11 @@ const WorksDetail:React.FC<WorksDetailProp> = ({
 
   return (
     isLoading || data === null
-      ? (<div>Loading...</div>)
+      ? (
+      <S.Progress>
+        <CircularProgress color="inherit" />
+      </S.Progress>
+      )
       : (
         <S.Container>
           <S.Title>{data.title}</S.Title>

diff --git a/client/src/components/WorksDetail/styles.ts b/client/src/components/WorksDetail/styles.ts
@@ -139,3 +139,9 @@ export const ImageContent = styled.div<ImageContentProp>`
     background-position: center center;
     margin-top: 1rem;
 `;
+
+export const Progress = styled.div`
+    margin: auto auto;
+    margin-top: 20px;
+    color: ${theme.BORDER_GRAY};
+`;
diff --git a/client/src/containers/CreatorContainer.tsx b/client/src/containers/CreatorContainer.tsx
@@ -5,7 +5,6 @@ import styled from 'styled-components';
 import { useSelector } from 'react-redux';
 import { API_SERVER } from '../utils/constants';
 import { theme } from '../style/theme';
-// import FeedMyWorks from '../components/FeedMyWorks';
 import Portfolio from '../components/Portfolio';
 import FeedMyWorkContainer from './FeedMyWorkContainer';
 import { RootState } from '../modules';

diff --git a/server/services/feed.ts b/server/services/feed.ts
@@ -8,7 +8,8 @@ const get10Images = (skip, limit) => Image.find()
   .skip(skip)
   .limit(limit)
   .populate('creator', 'name thumbnailUrl')
-  .populate('owner', 'emoji comments views title');
+  .populate('owner', 'emoji comments views title')
+  .sort({ updatedAt: -1 });
 
 const getIdsImages = (id) => Image.find({ creator: id })
   .populate('creator', 'name thumbnailUrl')
@@ -19,7 +20,8 @@ const get10Wallpapers = (skip, limit) => Wallpaper.find()
   .skip(skip)
   .limit(limit)
   .populate('creator', 'name thumbnailUrl')
-  .populate('owner', 'emoji comments views title');
+  .populate('owner', 'emoji comments views title')
+  .sort({ updatedAt: -1 });
 
 const getImageFeeds = (skip, limit) => Image.find()
   .skip(skip)
@@ -31,7 +33,8 @@ const get10Musics = (skip, limit) => Music.find()
   .skip(skip)
   .limit(limit)
   .populate('creator', 'name thumbnailUrl')
-  .populate('owner', 'comments views');
+  .populate('owner', 'comments views')
+  .sort({ updatedAt: -1 });
 
 const getIdsMusics = (id) => Music.find({ creator: id })
   .populate('creator', 'name thumbnailUrl')