Thiago Chaves
d4b838106a
Move some business logic out of the page components. They are now responsible for just filtering out the unsuccessful render paths and selecting between an error view or a success view passing the successfully fetched data.
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { useState } from "react";
|
|
import { ExpressionCard } from "../../components";
|
|
import { IndexedExpression, IndexedCategory } from "../../model";
|
|
import { DemoteExpressionButton } from "./DemoteExpressionButton";
|
|
import { PromoteExpressionButton } from "./PromoteExpressionButton";
|
|
|
|
export interface ExpressionPracticeCardViewProps {
|
|
expression: IndexedExpression;
|
|
categories: IndexedCategory[];
|
|
}
|
|
|
|
// Handle internal state here
|
|
export function ExpressionPracticeCardView({
|
|
expression,
|
|
categories,
|
|
}: ExpressionPracticeCardViewProps) {
|
|
const [revealed, setRevealed] = useState(false);
|
|
return (
|
|
<div className="page-with-bottom-navigation">
|
|
<section className="padding-small scroll">
|
|
<ExpressionCard
|
|
prompt={expression.prompt}
|
|
categories={categories.map((category) => category.name)}
|
|
description={expression.description}
|
|
show_description={revealed}
|
|
/>
|
|
</section>
|
|
<section className="navigation-bottom">
|
|
{revealed ? (
|
|
<>
|
|
<DemoteExpressionButton expression_id={expression.id!} />
|
|
<PromoteExpressionButton expression_id={expression.id!} />
|
|
</>
|
|
) : (
|
|
<button
|
|
className="navigation-item bottom text-navigation grow"
|
|
onClick={() => setRevealed(true)}
|
|
>
|
|
Reveal
|
|
</button>
|
|
)}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|