|
7 | 7 | import { useQuery, getDailyStats } from 'wasp/client/operations'; |
8 | 8 | import TotalSignupsCard from './TotalSignupsCard'; |
9 | 9 | import TotalPageViewsCard from './TotalPageViewsCard'; |
10 | | -@@ -10,12 +12,54 @@ |
11 | | - import { useRedirectHomeUnlessUserIsAdmin } from '../../useRedirectHomeUnlessUserIsAdmin'; |
| 10 | +@@ -11,16 +13,58 @@ |
| 11 | + import { cn } from '../../../client/cn'; |
12 | 12 |
|
13 | 13 | const Dashboard = ({ user }: { user: AuthUser }) => { |
14 | 14 | + const [isDemoInfoVisible, setIsDemoInfoVisible] = useState(false); |
15 | 15 | useRedirectHomeUnlessUserIsAdmin({ user }); |
16 | 16 |
|
17 | 17 | const { data: stats, isLoading, error } = useQuery(getDailyStats); |
18 | 18 |
|
| 19 | ++ const didUserCloseDemoInfo = localStorage.getItem('didUserCloseDemoInfo') === 'true'; |
| 20 | ++ |
19 | 21 | + useEffect(() => { |
20 | | -+ try { |
21 | | -+ if (localStorage.getItem('isStripeDemoInfoVisible') === 'false') { |
22 | | -+ // do nothing |
23 | | -+ } else { |
24 | | -+ setIsDemoInfoVisible(true); |
25 | | -+ } |
26 | | -+ } catch (error) { |
27 | | -+ console.error(error); |
| 22 | ++ if (didUserCloseDemoInfo || !stats) { |
| 23 | ++ setIsDemoInfoVisible(false); |
| 24 | ++ } else if (!didUserCloseDemoInfo && stats) { |
| 25 | ++ setIsDemoInfoVisible(true); |
28 | 26 | + } |
29 | | -+ }, []); |
| 27 | ++ }, [stats]); |
30 | 28 | + |
31 | 29 | + const handleDemoInfoClose = () => { |
32 | 30 | + try { |
33 | | -+ localStorage.setItem('isStripeDemoInfoVisible', 'false'); |
| 31 | ++ localStorage.setItem('didUserCloseDemoInfo', 'true'); |
34 | 32 | + setIsDemoInfoVisible(false); |
35 | 33 | + } catch (error) { |
36 | 34 | + console.error(error); |
|
60 | 58 | + </div> |
61 | 59 | + )} |
62 | 60 | <div className='relative'> |
63 | | - <div className={`${!stats ? 'opacity-25' : ''}`}> |
| 61 | +- <div className={cn({ |
| 62 | +- 'opacity-25': !stats, |
| 63 | +- })}> |
| 64 | ++ <div |
| 65 | ++ className={cn({ |
| 66 | ++ 'opacity-25': !stats, |
| 67 | ++ })} |
| 68 | ++ > |
64 | 69 | <div className='grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 xl:grid-cols-4 2xl:gap-7.5'> |
65 | | -@@ -36,7 +80,7 @@ |
| 70 | + <TotalPageViewsCard |
| 71 | + totalPageViews={stats?.dailyStats.totalViews} |
| 72 | +@@ -39,7 +83,7 @@ |
66 | 73 | <RevenueAndProfitChart weeklyStats={stats?.weeklyStats} isLoading={isLoading} /> |
67 | 74 |
|
68 | 75 | <div className='col-span-12 xl:col-span-8'> |
|
71 | 78 | </div> |
72 | 79 | </div> |
73 | 80 | </div> |
| 81 | +@@ -47,9 +91,7 @@ |
| 82 | + {!stats && ( |
| 83 | + <div className='absolute inset-0 flex items-start justify-center bg-white/50 dark:bg-boxdark-2/50'> |
| 84 | + <div className='rounded-lg bg-white p-8 shadow-lg dark:bg-boxdark'> |
| 85 | +- <p className='text-2xl font-bold text-boxdark dark:text-white'> |
| 86 | +- No daily stats generated yet |
| 87 | +- </p> |
| 88 | ++ <p className='text-2xl font-bold text-boxdark dark:text-white'>No daily stats generated yet</p> |
| 89 | + <p className='mt-2 text-sm text-bodydark2'> |
| 90 | + Stats will appear here once the daily stats job has run |
| 91 | + </p> |
0 commit comments