feat: implement user streak (#6594)
* feat: implement user streak * fix: refactor codebase * feat: streak heatmap * Add streaks --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>pull/6768/head
Arik Chakma
3 months ago
committed by
GitHub
parent
447bf4eb0f
commit
8e407c95a1
5 changed files with 447 additions and 5 deletions
@ -0,0 +1,191 @@ |
||||
import { useEffect, useRef, useState } from 'react'; |
||||
import { isLoggedIn } from '../../lib/jwt'; |
||||
import { httpGet } from '../../lib/http'; |
||||
import { useToast } from '../../hooks/use-toast'; |
||||
import { Flame, X } from 'lucide-react'; |
||||
import { useOutsideClick } from '../../hooks/use-outside-click'; |
||||
import { StreakDay } from './StreakDay'; |
||||
import { |
||||
navigationDropdownOpen, |
||||
roadmapsDropdownOpen, |
||||
} from '../../stores/page.ts'; |
||||
import { useStore } from '@nanostores/react'; |
||||
import { cn } from '../../lib/classname.ts'; |
||||
|
||||
type StreakResponse = { |
||||
count: number; |
||||
longestCount: number; |
||||
previousCount?: number | null; |
||||
firstVisitAt: Date; |
||||
lastVisitAt: Date; |
||||
}; |
||||
|
||||
type AccountStreakProps = {}; |
||||
|
||||
export function AccountStreak(props: AccountStreakProps) { |
||||
const toast = useToast(); |
||||
const dropdownRef = useRef(null); |
||||
|
||||
const [isLoading, setIsLoading] = useState(true); |
||||
const [accountStreak, setAccountStreak] = useState<StreakResponse>({ |
||||
count: 0, |
||||
longestCount: 0, |
||||
firstVisitAt: new Date(), |
||||
lastVisitAt: new Date(), |
||||
}); |
||||
const [showDropdown, setShowDropdown] = useState(false); |
||||
|
||||
const $roadmapsDropdownOpen = useStore(roadmapsDropdownOpen); |
||||
const $navigationDropdownOpen = useStore(navigationDropdownOpen); |
||||
|
||||
useEffect(() => { |
||||
if ($roadmapsDropdownOpen || $navigationDropdownOpen) { |
||||
setShowDropdown(false); |
||||
} |
||||
}, [$roadmapsDropdownOpen, $navigationDropdownOpen]); |
||||
|
||||
const loadAccountStreak = async () => { |
||||
if (!isLoggedIn()) { |
||||
return; |
||||
} |
||||
|
||||
setIsLoading(true); |
||||
const { response, error } = await httpGet<StreakResponse>( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-streak`, |
||||
); |
||||
|
||||
if (error || !response) { |
||||
toast.error(error?.message || 'Failed to load account streak'); |
||||
setIsLoading(false); |
||||
return; |
||||
} |
||||
|
||||
setAccountStreak(response); |
||||
setIsLoading(false); |
||||
}; |
||||
|
||||
useOutsideClick(dropdownRef, () => { |
||||
setShowDropdown(false); |
||||
}); |
||||
|
||||
useEffect(() => { |
||||
loadAccountStreak().finally(() => {}); |
||||
}, []); |
||||
|
||||
if (!isLoggedIn() || isLoading) { |
||||
return null; |
||||
} |
||||
|
||||
let { count: currentCount } = accountStreak; |
||||
const previousCount = |
||||
accountStreak?.previousCount || accountStreak?.count || 0; |
||||
|
||||
// Adding one to show the current day
|
||||
const currentCircleCount = Math.min(currentCount, 5) + 1; |
||||
// Adding one day to show the streak they broke
|
||||
const leftCircleCount = Math.min(5 - currentCircleCount, previousCount) + 1; |
||||
// In the maximum case, we will show 10 circles
|
||||
const remainingCount = Math.max(0, 10 - leftCircleCount - currentCircleCount); |
||||
const totalCircles = leftCircleCount + currentCircleCount + remainingCount; |
||||
|
||||
return ( |
||||
<div className="relative z-[90] animate-fade-in"> |
||||
<button |
||||
className={cn( |
||||
'flex items-center justify-center rounded-lg p-1.5 px-2 text-purple-400 hover:bg-purple-100/10 focus:outline-none', |
||||
{ |
||||
'bg-purple-100/10': showDropdown, |
||||
}, |
||||
)} |
||||
onClick={() => setShowDropdown(true)} |
||||
> |
||||
<Flame className="size-5" /> |
||||
<span className="ml-1 text-sm font-semibold"> |
||||
{accountStreak?.count} |
||||
</span> |
||||
</button> |
||||
|
||||
{showDropdown && ( |
||||
<div |
||||
ref={dropdownRef} |
||||
className="absolute right-0 top-full z-50 w-[320px] translate-y-1 rounded-lg bg-slate-800 shadow-xl" |
||||
> |
||||
<div className="px-4 py-2.5"> |
||||
<div className="flex items-center justify-between gap-2 text-sm text-slate-500"> |
||||
<p> |
||||
Current Streak |
||||
<span className="ml-2 font-medium text-white"> |
||||
{accountStreak?.count || 0} |
||||
</span> |
||||
</p> |
||||
<p> |
||||
Longest Streak |
||||
<span className="ml-2 font-medium text-white"> |
||||
{accountStreak?.longestCount || 0} |
||||
</span> |
||||
</p> |
||||
</div> |
||||
|
||||
<div className="mb-5 mt-8"> |
||||
<div className="grid grid-cols-10 gap-1"> |
||||
{Array.from({ length: totalCircles }).map((_, index) => { |
||||
let dayCount, |
||||
icon, |
||||
isPreviousStreakDay, |
||||
isBrokenStreakDay, |
||||
isCurrentStreakDay, |
||||
isRemainingStreakDay, |
||||
isToday; |
||||
|
||||
if (index < leftCircleCount) { |
||||
// Previous streak days
|
||||
dayCount = previousCount - leftCircleCount + index + 1 + 1; |
||||
isPreviousStreakDay = true; |
||||
isBrokenStreakDay = index === leftCircleCount - 1; |
||||
|
||||
icon = isBrokenStreakDay ? ( |
||||
<X className="opacit size-3.5 text-white" /> |
||||
) : ( |
||||
<Flame className="size-3.5 text-white" /> |
||||
); |
||||
} else if (index < leftCircleCount + currentCircleCount) { |
||||
// Current streak days
|
||||
const currentIndex = index - leftCircleCount; |
||||
dayCount = |
||||
currentCount - currentCircleCount + currentIndex + 1 + 1; |
||||
isCurrentStreakDay = true; |
||||
isToday = currentIndex === currentCircleCount - 1; |
||||
icon = <Flame className="size-3.5 text-white" />; |
||||
} else { |
||||
// Remaining streak days
|
||||
const remainingIndex = |
||||
index - leftCircleCount - currentCircleCount; |
||||
dayCount = currentCount + remainingIndex + 1 + 1; |
||||
isRemainingStreakDay = true; |
||||
} |
||||
|
||||
return ( |
||||
<StreakDay |
||||
key={`streak-${index}`} |
||||
dayCount={dayCount} |
||||
icon={icon} |
||||
isBrokenStreakDay={isBrokenStreakDay} |
||||
isPreviousStreakDay={isPreviousStreakDay} |
||||
isCurrentStreakDay={isCurrentStreakDay} |
||||
isRemainingStreakDay={isRemainingStreakDay} |
||||
isToday={isToday} |
||||
/> |
||||
); |
||||
})} |
||||
</div> |
||||
</div> |
||||
|
||||
<p className="text-center text-xs text-slate-500"> |
||||
Visit every day to keep your streak alive! |
||||
</p> |
||||
</div> |
||||
</div> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
.react-calendar-heatmap text { |
||||
fill: rgb(148, 163, 184) !important; |
||||
} |
||||
|
||||
.react-calendar-heatmap rect:hover { |
||||
stroke: rgb(148, 163, 184) !important; |
||||
} |
||||
@ -0,0 +1,189 @@ |
||||
import CalendarHeatmap from 'react-calendar-heatmap'; |
||||
import dayjs from 'dayjs'; |
||||
import { formatActivityDate } from '../../lib/date'; |
||||
import { Tooltip as ReactTooltip } from 'react-tooltip'; |
||||
import 'react-calendar-heatmap/dist/styles.css'; |
||||
import './AccountStreakHeatmap.css'; |
||||
|
||||
const legends = [ |
||||
{ count: 1, color: 'bg-slate-600' }, |
||||
{ count: 3, color: 'bg-slate-500' }, |
||||
{ count: 5, color: 'bg-slate-400' }, |
||||
{ count: 10, color: 'bg-slate-300' }, |
||||
{ count: 20, color: 'bg-slate-200' }, |
||||
]; |
||||
|
||||
type AccountStreakHeatmapProps = {}; |
||||
|
||||
export function AccountStreakHeatmap(props: AccountStreakHeatmapProps) { |
||||
const startDate = dayjs().subtract(6, 'months').toDate(); |
||||
const endDate = dayjs().toDate(); |
||||
|
||||
return ( |
||||
<div className="mt-4"> |
||||
<CalendarHeatmap |
||||
startDate={startDate} |
||||
endDate={endDate} |
||||
values={[ |
||||
{ |
||||
date: '2024-08-01', |
||||
count: 4, |
||||
}, |
||||
{ |
||||
date: '2024-08-02', |
||||
count: 10, |
||||
}, |
||||
{ |
||||
date: '2024-08-03', |
||||
count: 5, |
||||
}, |
||||
{ |
||||
date: '2024-08-04', |
||||
count: 3, |
||||
}, |
||||
{ |
||||
date: '2024-08-05', |
||||
count: 7, |
||||
}, |
||||
{ |
||||
date: '2024-08-06', |
||||
count: 2, |
||||
}, |
||||
{ |
||||
date: '2024-08-07', |
||||
count: 6, |
||||
}, |
||||
{ |
||||
date: '2024-08-08', |
||||
count: 8, |
||||
}, |
||||
{ |
||||
date: '2024-08-09', |
||||
count: 9, |
||||
}, |
||||
{ |
||||
date: '2024-08-10', |
||||
count: 1, |
||||
}, |
||||
{ |
||||
date: '2024-08-11', |
||||
count: 3, |
||||
}, |
||||
{ |
||||
date: '2024-08-12', |
||||
count: 5, |
||||
}, |
||||
{ |
||||
date: '2024-08-13', |
||||
count: 7, |
||||
}, |
||||
{ |
||||
date: '2024-08-14', |
||||
count: 8, |
||||
}, |
||||
{ |
||||
date: '2024-08-15', |
||||
count: 2, |
||||
}, |
||||
{ |
||||
date: '2024-08-16', |
||||
count: 4, |
||||
}, |
||||
{ |
||||
date: '2024-08-17', |
||||
count: 6, |
||||
}, |
||||
{ |
||||
date: '2024-08-18', |
||||
count: 8, |
||||
}, |
||||
{ |
||||
date: '2024-08-19', |
||||
count: 10, |
||||
}, |
||||
{ |
||||
date: '2024-08-20', |
||||
count: 2, |
||||
}, |
||||
{ |
||||
date: '2024-08-21', |
||||
count: 4, |
||||
}, |
||||
{ |
||||
date: '2024-08-22', |
||||
count: 6, |
||||
}, |
||||
{ |
||||
date: '2024-08-23', |
||||
count: 8, |
||||
}, |
||||
{ |
||||
date: '2024-08-24', |
||||
count: 10, |
||||
}, |
||||
{ |
||||
date: '2024-08-25', |
||||
count: 30, |
||||
}, |
||||
]} |
||||
classForValue={(value) => { |
||||
if (!value) { |
||||
return 'fill-slate-700 rounded-md [rx:2px] focus:outline-none'; |
||||
} |
||||
|
||||
const { count } = value; |
||||
if (count >= 20) { |
||||
return 'fill-slate-200 rounded-md [rx:2px] focus:outline-none'; |
||||
} else if (count >= 10) { |
||||
return 'fill-slate-300 rounded-md [rx:2px] focus:outline-none'; |
||||
} else if (count >= 5) { |
||||
return 'fill-slate-400 rounded-md [rx:2px] focus:outline-none'; |
||||
} else if (count >= 3) { |
||||
return 'fill-slate-500 rounded-md [rx:2px] focus:outline-none'; |
||||
} else { |
||||
return 'fill-slate-600 rounded-md [rx:2px] focus:outline-none'; |
||||
} |
||||
}} |
||||
tooltipDataAttrs={(value: any) => { |
||||
if (!value || !value.date) { |
||||
return null; |
||||
} |
||||
|
||||
const formattedDate = formatActivityDate(value.date); |
||||
return { |
||||
'data-tooltip-id': 'user-activity-tip', |
||||
'data-tooltip-content': `${value.count} Updates - ${formattedDate}`, |
||||
}; |
||||
}} |
||||
/> |
||||
|
||||
<ReactTooltip |
||||
id="user-activity-tip" |
||||
className="!rounded-lg !bg-slate-900 !p-1 !px-2 !text-xs" |
||||
/> |
||||
|
||||
<div className="mt-2 flex items-center justify-end"> |
||||
<div className="flex items-center"> |
||||
<span className="mr-2 text-xs text-slate-500">Less</span> |
||||
{legends.map((legend) => ( |
||||
<div |
||||
key={legend.count} |
||||
className="flex items-center" |
||||
data-tooltip-id="user-activity-tip" |
||||
data-tooltip-content={`${legend.count} Updates`} |
||||
> |
||||
<div |
||||
className={`h-2.5 w-2.5 ${legend.color} mr-1 rounded-sm`} |
||||
></div> |
||||
</div> |
||||
))} |
||||
<span className="ml-2 text-xs text-slate-500">More</span> |
||||
<ReactTooltip |
||||
id="user-activity-tip" |
||||
className="!rounded-lg !bg-slate-900 !p-1 !px-2 !text-sm" |
||||
/> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,56 @@ |
||||
import type { ReactNode } from 'react'; |
||||
import { cn } from '../../lib/classname'; |
||||
import { ChevronDown } from 'lucide-react'; |
||||
|
||||
type StreakDayProps = { |
||||
isToday?: boolean; |
||||
isCurrentStreakDay?: boolean; |
||||
isPreviousStreakDay?: boolean; |
||||
isBrokenStreakDay?: boolean; |
||||
isRemainingStreakDay?: boolean; |
||||
dayCount: number; |
||||
icon?: ReactNode; |
||||
}; |
||||
|
||||
export function StreakDay(props: StreakDayProps) { |
||||
const { |
||||
isCurrentStreakDay, |
||||
isPreviousStreakDay, |
||||
isBrokenStreakDay, |
||||
isRemainingStreakDay, |
||||
dayCount, |
||||
icon, |
||||
isToday = false, |
||||
} = props; |
||||
|
||||
return ( |
||||
<div |
||||
className={cn( |
||||
'flex flex-col items-center justify-center gap-1.5', |
||||
isCurrentStreakDay && 'relative', |
||||
)} |
||||
> |
||||
<div |
||||
className={cn('flex size-6 items-center justify-center rounded-full', { |
||||
'bg-red-500': isPreviousStreakDay, |
||||
'bg-purple-500': isCurrentStreakDay, |
||||
'bg-slate-700': isRemainingStreakDay, |
||||
'border-2 border-dashed border-slate-500 bg-transparent': isToday, |
||||
})} |
||||
> |
||||
{isToday ? null : icon} |
||||
</div> |
||||
<span |
||||
className={cn('text-sm', { |
||||
'text-slate-500': isPreviousStreakDay, |
||||
'text-slate-100': isCurrentStreakDay || isRemainingStreakDay, |
||||
})} |
||||
> |
||||
{dayCount} |
||||
</span> |
||||
{isToday && ( |
||||
<ChevronDown className="absolute bottom-full left-1/2 h-4 w-4 -translate-x-1/2 transform stroke-[2.5px] text-slate-400" /> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue