diff --git a/src/components/practices/practices.hook.ts b/src/components/practices/practices.hook.ts
index c9b65ac..554b381 100644
--- a/src/components/practices/practices.hook.ts
+++ b/src/components/practices/practices.hook.ts
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useReducer } from 'react';
import { useLocalStorageState } from '../common/local-storage.hook';
import { OptionStatus, PracticeStatus, SelectionOption } from '../practice/practice';
import { PracticesData } from './practices';
+import Shuffle from '../common/shuffle';
const arrSame = (arrA: any[], arrB: any[]) => {
const intersection = arrA.filter((x) => arrB.includes(x));
@@ -140,8 +141,12 @@ export const usePracticesWithLocalStorage = (id: string, initPractices: Practice
setPractices({});
};
+ const shuffleHandler = () => {
+ setStorage(Shuffle(practices));
+ };
+
return [practices, {
- handleSubmit, handleSelectionChange, setPractices, resetStorage,
+ handleSubmit, handleSelectionChange, setPractices, resetStorage, shuffleHandler,
}] as const;
};
diff --git a/src/components/practices/practices.spec.tsx b/src/components/practices/practices.spec.tsx
index 710e77d..1a42c57 100644
--- a/src/components/practices/practices.spec.tsx
+++ b/src/components/practices/practices.spec.tsx
@@ -106,16 +106,19 @@ describe('Practices Component', () => {
it('should reset practice if reset button is clicked', async () => {
const resetHandler = jest.fn();
+ const shuffleHandler = jest.fn();
renderWithRouterProvider(
);
const actionButton = screen.getByTestId('action-button');
await userEvent.click(actionButton);
await userEvent.click(screen.getByTestId('reset-button'));
expect(resetHandler).toBeCalled();
+ expect(shuffleHandler).toBeCalled();
// Test home button is working
await userEvent.click(screen.getByTestId('homepage-button'));
});
diff --git a/src/components/practices/practices.tsx b/src/components/practices/practices.tsx
index 32a6a0e..5aaa4ea 100644
--- a/src/components/practices/practices.tsx
+++ b/src/components/practices/practices.tsx
@@ -33,11 +33,12 @@ interface PracticesProps {
onSubmit: (id: number, selection: SelectionOption[]) => void;
onSelectionChange: (id: number, selection: SelectionOption[]) => void;
onResetPractices?: () => void;
+ onShuffleQuestions?: () => void;
}
export const Practices: React.FC
= (
{
- data, baseImageURL, onSubmit, onSelectionChange, onResetPractices,
+ data, baseImageURL, onSubmit, onSelectionChange, onResetPractices, onShuffleQuestions,
},
) => {
const [isOpen, setIsOpen] = useState(false);
@@ -92,6 +93,7 @@ export const Practices: React.FC = (
data={data}
onNavigatePractice={handleNavigatePractice}
onResetPractices={onResetPractices}
+ onShuffleQuestions={onShuffleQuestions}
/>
{/* */}
diff --git a/src/pages/github-practices/github-practices.tsx b/src/pages/github-practices/github-practices.tsx
index 565a65d..4afff88 100644
--- a/src/pages/github-practices/github-practices.tsx
+++ b/src/pages/github-practices/github-practices.tsx
@@ -24,6 +24,7 @@ const GithubPractices: React.FC = ({ githubLink }) => {
handleSelectionChange,
setPractices,
resetStorage,
+ shuffleHandler,
}] = usePracticesWithLocalStorage(link, {});
useEffect(() => {
@@ -41,6 +42,7 @@ const GithubPractices: React.FC = ({ githubLink }) => {
onSelectionChange={handleSelectionChange}
baseImageURL={link}
onResetPractices={resetStorage}
+ onShuffleQuestions={shuffleHandler}
/>
);
};