-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
52 lines (44 loc) · 1.86 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import React, { useEffect } from 'react';
import BackgroundImage from 'components/BackgroundImage';
import DashboardContent from 'components/Dashboard/Content';
import DashboardEmpty from 'components/Dashboard/Empty';
import DashboardHeader from 'components/Dashboard/Header';
import { getDaysAgoFromISODate, getShortDateFormat } from 'helpers/datetime';
import { useAppDispatch, useAppSelector } from 'hooks';
import { getSurveys, surveysAction } from 'store/reducers/Surveys';
import { getUser } from 'store/reducers/User';
const DashBoardScreen = (): JSX.Element => {
const { surveys, currentPosition, isInitialLoading } = useAppSelector((state) => state.surveys);
const { user } = useAppSelector((state) => state.user);
const dispatch = useAppDispatch();
const dashboardContent = () => {
return (
<DashboardContent
shouldShowShimmer={isInitialLoading}
surveys={surveys}
currentPosition={currentPosition}
onNextSurvey={() => dispatch(surveysAction.nextSurvey())}
onIndicatorTapped={(position) => dispatch(surveysAction.selectSurvey(position))}
/>
);
};
useEffect(() => {
dispatch(getSurveys());
dispatch(getUser());
}, [dispatch]);
return (
<BackgroundImage backgroundUrl={surveys.length > 0 ? surveys[currentPosition].coverImageUrl : undefined}>
<DashboardHeader
dateTime={surveys.length ? getShortDateFormat(surveys[currentPosition].createdAt) : ''}
daysAgo={surveys.length ? getDaysAgoFromISODate(surveys[currentPosition].createdAt) : ''}
profileUrl={user?.avatarUrl}
shouldShowShimmer={isInitialLoading}
>
<div className="pt-36 h-full">
{isInitialLoading ? dashboardContent() : surveys.length ? dashboardContent() : <DashboardEmpty />}
</div>
</DashboardHeader>
</BackgroundImage>
);
};
export default DashBoardScreen;