mirror
/
front-end-interview-handbook
mirror of https://github.com/yangshun/front-end-interview-handbook.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[web] interviews/dashboard: better transitions for dashboard "Solved problems" section (#1010)

This commit is contained in:
DanielJames0302 2024-11-16 21:31:53 +08:00 committed by GitHub
parent e8017d7f9e
commit 00922a568a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 47 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/web/src/components/interviews/dashboard/InterviewsDashboardPage.tsx
View File

@ -61,12 +61,10 @@ export default function InterviewsDashboardPage({
}: Props) {
const user = useUser();
const isLoggedIn = defaultLoggedIn || !!user;
const { data: questionsProgress } = trpc.questionProgress.getAll.useQuery(
undefined,
{
const { data: questionsProgress, isLoading: isQuestionsProgressLoading } =
trpc.questionProgress.getAll.useQuery(undefined, {
enabled: isLoggedIn,
},
);
});
const { data: questionListSessions } =
trpc.questionLists.getActiveSessions.useQuery(undefined, {
@ -113,6 +111,7 @@ export default function InterviewsDashboardPage({
<InterviewsDashboardProgressSection
contributions={contributions}
isContributionsLoading={isContributionsLoading}
isQuestionProgressLoading={isQuestionsProgressLoading}
questions={questions}
questionsProgress={questionsProgress ?? []}
/>

9
apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardContributionsHeatmapCard.tsx
View File

@ -64,6 +64,10 @@ export default function InterviewsDashboardContributionsHeatmapCard({
/>
</Text>
<Tooltip
className={clsx([
'transition-opacity duration-500',
isContributionsLoading ? 'opacity-0' : 'opacity-100',
])}
label={
<div>
<FormattedMessage
@ -90,7 +94,10 @@ export default function InterviewsDashboardContributionsHeatmapCard({
</div>
}>
<RiInformationLine
className={clsx('size-4', themeTextSubtleColor)}
className={clsx('size-4', themeTextSubtleColor, [
'transition-opacity duration-500',
isContributionsLoading ? 'opacity-0' : 'opacity-100',
])}
/>
</Tooltip>
</div>

3
apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardProgressSection.tsx
View File

@ -13,6 +13,7 @@ import InterviewsDashboardSolvedProblemsCard from './InterviewsDashboardSolvedPr
type Props = Readonly<{
contributions?: Record<string, number>;
isContributionsLoading: boolean;
isQuestionProgressLoading: boolean;
questions: {
codingQuestions: ReadonlyArray<QuestionMetadata>;
quizQuestions: ReadonlyArray<QuestionMetadata>;
@ -28,6 +29,7 @@ export default function InterviewsDashboardProgressSection({
questions,
contributions,
isContributionsLoading,
isQuestionProgressLoading,
}: Props) {
return (
<div className="flex flex-col gap-6">
@ -40,6 +42,7 @@ export default function InterviewsDashboardProgressSection({
</Heading>
<div className="grid gap-6 lg:grid-cols-2">
<InterviewsDashboardSolvedProblemsCard
isQuestionProgressLoading={isQuestionProgressLoading}
questions={questions}
questionsProgress={questionsProgress}
/>

39
apps/web/src/components/interviews/dashboard/progress/InterviewsDashboardSolvedProblemsCard.tsx
View File

@ -23,6 +23,7 @@ import {
import Tooltip from '~/components/ui/Tooltip';
type Props = Readonly<{
isQuestionProgressLoading: boolean;
questions: {
codingQuestions: ReadonlyArray<QuestionMetadata>;
quizQuestions: ReadonlyArray<QuestionMetadata>;
@ -36,6 +37,7 @@ type Props = Readonly<{
export default function InterviewsDashboardSolvedProblemsCard({
questions,
questionsProgress,
isQuestionProgressLoading,
}: Props) {
const intl = useIntl();
@ -212,13 +214,23 @@ export default function InterviewsDashboardSolvedProblemsCard({
/>
}>
<Heading
className={themeTextColor}
className={clsx(themeTextColor, [
'transition-opacity duration-500',
isQuestionProgressLoading ? 'opacity-0' : 'opacity-100',
])}
color="custom"
level="heading5">
{completedCount}
</Heading>
</Tooltip>
<Text color="subtitle" size="body3" weight="medium">
<Text
className={clsx(themeTextColor, [
'transition-opacity duration-500',
isQuestionProgressLoading ? 'opacity-0' : 'opacity-100',
])}
color="subtitle"
size="body3"
weight="medium">
<FormattedMessage
defaultMessage="Solved"
description="Label for number of solved problems"
@ -239,8 +251,20 @@ export default function InterviewsDashboardSolvedProblemsCard({
<Text size="body3" weight="medium">
{label}
</Text>
<Tooltip asChild={true} label={tooltip}>
<Text size="body2" weight="bold">
<Tooltip
asChild={true}
className={clsx([
'transition-opacity duration-500',
isQuestionProgressLoading ? 'opacity-0' : 'opacity-100',
])}
label={tooltip}>
<Text
className={clsx([
'transition-opacity duration-500',
isQuestionProgressLoading ? 'opacity-0' : 'opacity-100',
])}
size="body2"
weight="bold">
{completed}
<Text color="secondary" size="body3">
/{total}
@ -252,12 +276,13 @@ export default function InterviewsDashboardSolvedProblemsCard({
backgroundClass={themeBackgroundLineEmphasizedColor}
heightClass="h-1.5"
label={label}
progressClass={
progressClass={clsx(
getProgressBarGradient({
total,
value: completed,
}).className
}
}).className,
['transition-all duration-1000 ease-in-out'],
)}
total={total}
value={completed}
/>