From d7f4d59116a898010912545b31f29619c56384f3 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sat, 4 Jul 2020 22:38:51 +0300 Subject: feat: add loader --- src/components/Feed/Feed.tsx | 68 +++++++++++++++++++++++++++----------------- 1 file changed, 42 insertions(+), 26 deletions(-) diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx index afa914d..a56d57e 100644 --- a/src/components/Feed/Feed.tsx +++ b/src/components/Feed/Feed.tsx @@ -1,8 +1,9 @@ import React from 'react'; import { Poll } from 'which-types'; import { WindowScroller, AutoSizer, List } from 'react-virtualized'; - +import CircularProgress from '@material-ui/core/CircularProgress'; import PollCard from '../PollCard/PollCard'; +import {makeStyles} from "@material-ui/core"; interface PropTypes { polls: Poll[]; @@ -14,7 +15,18 @@ interface RenderPropTypes { style: React.CSSProperties; } +const useStyles = makeStyles(theme => ({ + loader: { + width:'100%', + textAlign:'center', + marginTop:theme.spacing(10) + } +})); + const Feed: React.FC = ({ polls }) => { + const classes = useStyles(); + + const RenderItem: React.FC = ({ index, style, key }) => { const poll = polls[index]; return ( @@ -24,37 +36,41 @@ const Feed: React.FC = ({ polls }) => { ); }; - return ( - - {({ + const loader =
+ +
+ + const list = + {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => ( - - {({ width }) => ( -
- -
- )} -
- )} -
- ); + + {({ width }) => ( +
+ +
+ )} +
+ )} +
+ + return polls.length ? list : loader; }; export default Feed; -- cgit v1.2.3 From 7138b0ef5eae5d5116a31898f90bc995452d93f8 Mon Sep 17 00:00:00 2001 From: ilyayudovin Date: Sun, 5 Jul 2020 14:10:24 +0300 Subject: fix: clear eslint errors --- src/components/Feed/Feed.tsx | 64 +++++++++++++++++++++++--------------------- 1 file changed, 34 insertions(+), 30 deletions(-) diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx index a56d57e..03358da 100644 --- a/src/components/Feed/Feed.tsx +++ b/src/components/Feed/Feed.tsx @@ -2,8 +2,8 @@ import React from 'react'; import { Poll } from 'which-types'; import { WindowScroller, AutoSizer, List } from 'react-virtualized'; import CircularProgress from '@material-ui/core/CircularProgress'; +import { makeStyles } from '@material-ui/core'; import PollCard from '../PollCard/PollCard'; -import {makeStyles} from "@material-ui/core"; interface PropTypes { polls: Poll[]; @@ -17,9 +17,9 @@ interface RenderPropTypes { const useStyles = makeStyles(theme => ({ loader: { - width:'100%', - textAlign:'center', - marginTop:theme.spacing(10) + width: '100%', + textAlign: 'center', + marginTop: theme.spacing(10) } })); @@ -36,39 +36,43 @@ const Feed: React.FC = ({ polls }) => { ); }; - const loader =
- -
+ const loader = ( +
+ +
+ ); - const list = - {({ + const list = ( + + {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => ( - - {({ width }) => ( -
- -
- )} -
- )} -
+ + {({ width }) => ( +
+ +
+ )} +
+ )} +
+ ); return polls.length ? list : loader; }; -- cgit v1.2.3 From 1a36aadf83ccbb5ff86f027cc9109bfa9dbe75bc Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 5 Jul 2020 14:23:21 +0300 Subject: feat: allow feedback to have empty message --- src/components/ReviewCard/ReviewCard.tsx | 16 ++++++++++------ src/pages/HomePage/ReviewForm.tsx | 2 +- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/ReviewCard/ReviewCard.tsx b/src/components/ReviewCard/ReviewCard.tsx index 97581fc..2016a5e 100644 --- a/src/components/ReviewCard/ReviewCard.tsx +++ b/src/components/ReviewCard/ReviewCard.tsx @@ -30,12 +30,16 @@ const ReviewCard: React.FC = ({ feedback }) => { user={feedback.author} info={} /> - - - - {feedback.contents} - - + {feedback.contents && ( + <> + + + + {feedback.contents} + + + + )} ); }; diff --git a/src/pages/HomePage/ReviewForm.tsx b/src/pages/HomePage/ReviewForm.tsx index 7ad0880..248e36e 100644 --- a/src/pages/HomePage/ReviewForm.tsx +++ b/src/pages/HomePage/ReviewForm.tsx @@ -27,7 +27,7 @@ const ReviewForm: React.FC = () => { const { enqueueSnackbar } = useSnackbar(); const handleSubmit = (): void => { - if (contents && score) { + if (score) { post('/feedback', { contents, score, version }).then(() => { enqueueSnackbar('Your feedback has been submitted!', { variant: 'success' -- cgit v1.2.3 From c02ba097faa134266dc226be9bccc2070855e2b7 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sun, 5 Jul 2020 14:27:40 +0300 Subject: fix: display loader correctly --- src/pages/ProfilePage/ProfilePage.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx index 3beeb00..34c9efa 100644 --- a/src/pages/ProfilePage/ProfilePage.tsx +++ b/src/pages/ProfilePage/ProfilePage.tsx @@ -16,16 +16,19 @@ const ProfilePage: React.FC = () => { const { page, navigate } = useNavigate(); const { user } = useAuth(); const [isInfoLoading, setIsInfoLoading] = useState(false); + const [isPollsLoading, setIsPollsLoading] = useState(false); useEffect(() => { const id = page?.id || user?._id; setIsInfoLoading(true); + setIsPollsLoading(true); if (id) { get(`/users/${id}`).then(response => { setUserInfo(response.data); setIsInfoLoading(false); }); get(`/profiles/${id}`).then(response => { + setIsPollsLoading(false); setPolls([]); setPolls(response.data); setTotalVotes(response.data.reduce( @@ -47,7 +50,7 @@ const ProfilePage: React.FC = () => { totalVotes={totalVotes} isLoading={isInfoLoading} /> - + {isPollsLoading ? : (polls.length > 0 && )} ); }; -- cgit v1.2.3