Skip to content

Commit bd4799b

Browse files
ReidyTReidyT
committed
fix: use regex to find keywords
- also use only one button to hide/display the keywords
1 parent 6c360e5 commit bd4799b

File tree

8 files changed

+70
-80
lines changed

8 files changed

+70
-80
lines changed

‎cypress/e2e/player/read/chatbot.cy.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Context, PermissionLevel } from '@graasp/sdk';
33
import {
44
CHATBOT_MODE_CY,
55
CHAT_WINDOW_CY,
6-
SUMMON_BUTTON_CY,
6+
SHOW_KEYWORDS_BUTTON_CY,
77
buildDataCy,
88
keywordDataCy,
99
} from '../../../../src/config/selectors';
@@ -26,7 +26,7 @@ describe('Empty App Data and chatbot prompt setting', () => {
2626

2727
it('show the default behaviour', () => {
2828
cy.get(buildDataCy(CHAT_WINDOW_CY)).should('not.exist');
29-
cy.get(buildDataCy(SUMMON_BUTTON_CY)).click();
29+
cy.get(buildDataCy(SHOW_KEYWORDS_BUTTON_CY)).click();
3030
cy.get(buildDataCy(keywordDataCy('lorem')))
3131
.should('be.visible')
3232
.click();

‎cypress/e2e/player/read/showApp.cy.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { DEFAULT_TEXT_RESOURCE_SETTING } from '../../../../src/config/appSetting
44
import {
55
BANNER_CY,
66
PLAYER_VIEW_CY,
7-
SUMMON_BUTTON_CY,
7+
SHOW_KEYWORDS_BUTTON_CY,
88
TEXT_DISPLAY_FIELD_CY,
99
buildAllKeywordsButtonDataCy,
1010
buildDataCy,
@@ -38,8 +38,8 @@ describe('Empty App Settings', () => {
3838
.should('be.visible')
3939
.and('have.value', DEFAULT_TEXT_RESOURCE_SETTING.text);
4040

41-
// check that the summon button is visible but disable
42-
cy.get(buildDataCy(SUMMON_BUTTON_CY))
41+
// check that the show keywords button is visible but disable
42+
cy.get(buildDataCy(SHOW_KEYWORDS_BUTTON_CY))
4343
.should('be.visible')
4444
.and('be.disabled');
4545

@@ -72,15 +72,15 @@ describe('With App Setting', () => {
7272
.should('be.visible')
7373
.and('contain', MOCK_TEXT_RESOURCE);
7474

75-
// check that the summon button is visible and active
76-
cy.get(buildDataCy(SUMMON_BUTTON_CY))
75+
// check that the show keywords button is visible and active
76+
cy.get(buildDataCy(SHOW_KEYWORDS_BUTTON_CY))
7777
.should('be.visible')
7878
.and('not.be.disabled');
7979
});
8080

8181
it('highlight keywords when summon', () => {
82-
// check that the summon button click works
83-
cy.get(buildDataCy(SUMMON_BUTTON_CY)).click();
82+
// check that the show keywords button click works
83+
cy.get(buildDataCy(SHOW_KEYWORDS_BUTTON_CY)).click();
8484

8585
// check that after summon, keywords are highlighted
8686
cy.get(buildAllKeywordsButtonDataCy()).each((elem) =>

‎src/components/common/display/Banner.tsx

+45-49
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,62 @@
1-
import { FC } from 'react';
1+
import { FC, useState } from 'react';
22

33
import { Box, Button, Typography } from '@mui/material';
44

5-
import { BANNER_CY, SUMMON_BUTTON_CY } from '../../../config/selectors';
5+
import { BANNER_CY, SHOW_KEYWORDS_BUTTON_CY } from '../../../config/selectors';
66
import {
77
DEFAULT_MARGIN,
88
GRAASP_VIOLET,
99
} from '../../../config/stylingConstants';
1010

1111
type Prop = {
1212
title: string;
13-
onSummonClick: () => void;
14-
showDisable: boolean;
15-
onHideClick: () => void;
16-
hideDisable: boolean;
13+
disabled: boolean;
14+
onClick: (showKeywords: boolean) => void;
1715
};
1816

19-
const Banner: FC<Prop> = ({
20-
title,
21-
onSummonClick,
22-
showDisable,
23-
onHideClick,
24-
hideDisable,
25-
}) => (
26-
<Box
27-
data-cy={BANNER_CY}
28-
component="span"
29-
justifyContent="space-between"
30-
display="flex"
31-
alignItems="center"
32-
sx={{ minHeight: '70px' }}
33-
>
34-
<Typography
35-
variant="h4"
36-
sx={{
37-
color: GRAASP_VIOLET,
38-
marginLeft: DEFAULT_MARGIN,
39-
}}
17+
const Banner: FC<Prop> = ({ title, disabled, onClick }) => {
18+
const [showKeywords, setShowKeywords] = useState(false);
19+
20+
// TODO: translate me
21+
const SHOW_KEYWORDS_LABEL = 'show keywords';
22+
const HIDE_KEYWORDS_LABEL = 'hide keywords';
23+
24+
const toggleKeywords = (): void => {
25+
onClick(!showKeywords);
26+
setShowKeywords(!showKeywords);
27+
};
28+
29+
return (
30+
<Box
31+
data-cy={BANNER_CY}
32+
component="span"
33+
justifyContent="space-between"
34+
display="flex"
35+
alignItems="center"
36+
sx={{ minHeight: '70px' }}
4037
>
41-
{title}
42-
</Typography>
43-
<Box display="flex" flex-direction="row-reverse">
44-
<Button
45-
variant="contained"
46-
sx={{ marginRight: DEFAULT_MARGIN }}
47-
onClick={onHideClick}
48-
disabled={hideDisable}
38+
<Typography
39+
variant="h4"
40+
sx={{
41+
color: GRAASP_VIOLET,
42+
marginLeft: DEFAULT_MARGIN,
43+
}}
4944
>
50-
Hide Keywords
51-
</Button>
52-
<Button
53-
data-cy={SUMMON_BUTTON_CY}
54-
variant="contained"
55-
color="success"
56-
sx={{ marginRight: DEFAULT_MARGIN }}
57-
onClick={onSummonClick}
58-
disabled={showDisable}
59-
>
60-
Show Keywords
61-
</Button>
45+
{title}
46+
</Typography>
47+
<Box display="flex" flex-direction="row-reverse">
48+
<Button
49+
data-cy={SHOW_KEYWORDS_BUTTON_CY}
50+
variant={showKeywords ? 'outlined' : 'contained'}
51+
sx={{ marginRight: DEFAULT_MARGIN }}
52+
onClick={toggleKeywords}
53+
disabled={disabled}
54+
>
55+
{showKeywords ? HIDE_KEYWORDS_LABEL : SHOW_KEYWORDS_LABEL}
56+
</Button>
57+
</Box>
6258
</Box>
63-
</Box>
64-
);
59+
);
60+
};
6561

6662
export default Banner;

‎src/components/common/display/Highlighted.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import ReactMarkdown from 'react-markdown';
55

66
import { styled } from '@mui/material';
77

8+
import { isKeywordPresent } from '@/utils/keywords';
9+
810
import { Keyword } from '../../../config/appSettingTypes';
911
import { DEFAULT_KEYWORD } from '../../../config/appSettings';
1012
import KeywordButton from './KeywordButton';
@@ -40,7 +42,10 @@ const Highlighted: FC<Prop> = ({ text, words, highlight, openChatbot }) => {
4042
);
4143
}
4244

43-
const wordsLowerCase = words.map((word) => word.word.toLocaleLowerCase());
45+
const wordsLowerCase = words
46+
.map((word) => word.word.toLocaleLowerCase())
47+
// remove keywords that are not in the text
48+
.filter((w) => isKeywordPresent(text, w));
4449
const expr = wordsLowerCase.join('|');
4550
const parts = text.split(new RegExp(`(${expr})`, 'gi'));
4651
const findKeyword = (part: string): Keyword =>

‎src/components/common/settings/KeyWords.tsx

+3-8
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import {
1717
tooltipClasses,
1818
} from '@mui/material';
1919

20+
import { isKeywordPresent } from '@/utils/keywords';
21+
2022
import { Keyword } from '../../../config/appSettingTypes';
2123
import { keywordAlreadyExistsWarningMessage } from '../../../config/messages';
2224
import {
@@ -73,13 +75,6 @@ const KeyWords: FC<Prop> = ({
7375

7476
const isDefinitionSet = keywordDef.def && keywordDef.def !== '';
7577

76-
// contains the keywords that are not in the text
77-
const keywordsNotInText = new Map(
78-
keywords
79-
.filter(({ word }) => !textStudents.includes(word.toLowerCase()))
80-
.map(({ word }) => [word, true]),
81-
);
82-
8378
const handleOnChanges = (newDictionary: Keyword[]): void =>
8479
onChange(newDictionary);
8580

@@ -118,7 +113,7 @@ const KeyWords: FC<Prop> = ({
118113
<DeleteIcon />
119114
</IconButton>
120115
{`${k.word} : ${k.def}`}
121-
{keywordsNotInText.get(k.word) && (
116+
{!isKeywordPresent(textStudents, k.word) && (
122117
<HtmlTooltip
123118
title={
124119
<>

‎src/components/views/read/PlayerView.tsx

+2-12
Original file line numberDiff line numberDiff line change
@@ -140,18 +140,8 @@ const PlayerView: FC = () => {
140140
DEFAULT_LESSON_TITLE,
141141
).text
142142
}
143-
onSummonClick={() => {
144-
setSummon(true);
145-
}}
146-
showDisable={
147-
textResource === '' || keywords.length === 0 || summon === true
148-
}
149-
onHideClick={() => {
150-
setSummon(false);
151-
}}
152-
hideDisable={
153-
textResource === '' || keywords.length === 0 || summon === false
154-
}
143+
onClick={(showKeywords) => setSummon(showKeywords)}
144+
disabled={textResource === '' || keywords.length === 0}
155145
/>
156146
{renderContent()}
157147
</div>

‎src/config/selectors.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const USE_CHATBOT_DATA_CY = 'use_chatbot_data_cy';
2525
export const TEXT_INPUT_FIELD_CY = 'text_input_field';
2626
export const TITLE_INPUT_FIELD_CY = 'title_input_field';
2727

28-
export const SUMMON_BUTTON_CY = 'summon_button';
28+
export const SHOW_KEYWORDS_BUTTON_CY = 'show_keywords_button';
2929
export const BANNER_CY = 'banner';
3030
export const KEYWORD_BUTTON_CY = 'keyword_button';
3131

‎src/utils/keywords.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export const isKeywordPresent = (text: string, keyword: string): boolean => {
2+
const regex = new RegExp(`\\b${keyword}\\b`, 'i');
3+
return regex.test(text);
4+
};

0 commit comments

Comments
 (0)