-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #443 from commons-stack/fix/quantify_slider_displa…
…ying_praise_score Fix/quantify slider displaying praise score
- Loading branch information
Showing
3 changed files
with
116 additions
and
83 deletions.
There are no files selected for viewing
97 changes: 97 additions & 0 deletions
97
packages/frontend/src/pages/QuantifyPeriodReceiver/components/QuantifyPraiseRow.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import { PraiseDto } from 'api/dist/praise/types'; | ||
| import Notice from '@/components/Notice'; | ||
| import Praise from '@/components/praise/Praise'; | ||
| import { ActiveUserId } from '@/model/auth'; | ||
| import { | ||
| findPraiseQuantification, | ||
| shortenDuplicatePraiseId, | ||
| } from '@/utils/praise'; | ||
| import { faCopy } from '@fortawesome/free-solid-svg-icons'; | ||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; | ||
| import { useRecoilValue } from 'recoil'; | ||
| import QuantifySlider from './QuantifySlider'; | ||
|
|
||
| interface Props { | ||
| praise: PraiseDto; | ||
| periodId: string; | ||
| usePseudonyms: boolean; | ||
| allowedValues: number[]; | ||
| checked?: boolean; | ||
| onToggleCheck(); | ||
| onSetScore(newScore: number); | ||
| onDuplicateClick(); | ||
| } | ||
|
|
||
| const QuantifyPraiseRow = ({ | ||
| praise, | ||
| periodId, | ||
| usePseudonyms, | ||
| allowedValues, | ||
| checked = false, | ||
| onToggleCheck, | ||
| onSetScore, | ||
| onDuplicateClick, | ||
| }: Props): JSX.Element | null => { | ||
| const userId = useRecoilValue(ActiveUserId); | ||
| if (!userId) return null; | ||
|
|
||
| const quantification = findPraiseQuantification(praise, userId); | ||
| if (!quantification) return null; | ||
|
|
||
| const dismissed = quantification.dismissed; | ||
| const duplicate = !!quantification.duplicatePraise; | ||
|
|
||
| return ( | ||
| <tr className="group"> | ||
| <td> | ||
| <input | ||
| type="checkbox" | ||
| className="mr-4 text-xl w-5 h-5" | ||
| checked={checked} | ||
| onChange={onToggleCheck} | ||
| /> | ||
| </td> | ||
| <td> | ||
| <Praise | ||
| praise={praise} | ||
| showIdPrefix={true} | ||
| showReceiver={false} | ||
| periodId={periodId} | ||
| usePseudonyms={usePseudonyms} | ||
| dismissed={dismissed} | ||
| shortDuplicatePraiseId={shortenDuplicatePraiseId(praise, userId)} | ||
| /> | ||
| </td> | ||
| <td> | ||
| {duplicate ? ( | ||
| <Notice type="info" className="w-40 py-2"> | ||
| <> | ||
| Duplicate score: <br /> | ||
| {quantification.scoreRealized} | ||
| </> | ||
| </Notice> | ||
| ) : ( | ||
| <QuantifySlider | ||
| allowedScores={allowedValues} | ||
| score={quantification.scoreRealized} | ||
| disabled={dismissed || duplicate} | ||
| onChange={onSetScore} | ||
| /> | ||
| )} | ||
| </td> | ||
| <td> | ||
| <div className="w-3"> | ||
| <button | ||
| className="hidden group-hover:block text-gray-400 hover:text-gray-500 cursor-pointer" | ||
| disabled={duplicate} | ||
| onClick={onDuplicateClick} | ||
| > | ||
| <FontAwesomeIcon icon={faCopy} size="1x" /> | ||
| </button> | ||
| </div> | ||
| </td> | ||
| </tr> | ||
| ); | ||
| }; | ||
|
|
||
| export default QuantifyPraiseRow; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,26 +1,16 @@ | ||
| import { PraiseDto, QuantificationDto } from 'api/dist/praise/types'; | ||
|
|
||
| export const quantification = ( | ||
| export const findPraiseQuantification = ( | ||
| praise: PraiseDto, | ||
| userId: string | ||
| ): QuantificationDto | undefined => { | ||
| return praise.quantifications.find((q) => q.quantifier === userId); | ||
| }; | ||
|
|
||
| export const dismissed = (praise: PraiseDto, userId: string): boolean => { | ||
| const q = quantification(praise, userId); | ||
| return q ? !!q.dismissed : false; | ||
| }; | ||
|
|
||
| export const duplicate = (praise: PraiseDto, userId: string): boolean => { | ||
| const q = quantification(praise, userId); | ||
| return q ? (q.duplicatePraise ? true : false) : false; | ||
| }; | ||
|
|
||
| export const shortDuplicatePraiseId = ( | ||
| export const shortenDuplicatePraiseId = ( | ||
| praise: PraiseDto, | ||
| userId: string | ||
| ): string => { | ||
| const q = quantification(praise, userId); | ||
| const q = findPraiseQuantification(praise, userId); | ||
| return q && q.duplicatePraise ? q.duplicatePraise?.slice(-4) : ''; | ||
| }; |