✨ feature: shuffle questions order

src/components/common/shuffle.ts

@@ -0,0 +1,20 @@
+/**
+ * Fisher-Yates shuffle
+ * Shuffles an object in place. ES6 version
+ * @see https://stackoverflow.com/a/6274381
+ * @see https://bost.ocks.org/mike/shuffle/
+ * @param questions object to shuffle
+ * @returns {any[]} shuffled object
+ */
+const Shuffle = (questions: any): any => {
+  for (let i = Object.keys(questions).length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    // eslint-disable-next-line no-param-reassign
+    [questions[i], questions[j]] = [questions[j], questions[i]];
+  }
+  // eslint-disable-next-line no-console
+  console.log('questions: ', questions);
+  return questions;
+};
+
+export default Shuffle;

src/components/practices/information-panel.tsx

@@ -16,14 +16,21 @@ const RefreshSVG: React.FC = () => (
   </svg>
 );
 
+const ShuffleSVG: React.FC = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" className="w-4 tablet:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M16 3h5v5M4 20 21 3M21 16v5h-5M15 15l6 6M4 4l5 5" />
+  </svg>
+);
+
 interface InformationPanelProps {
     data: PracticesData
     onNavigatePractice: (id: number) =>void
     onResetPractices?: () => void
+    onShuffleQuestions?: () => void
 }
 
 const InformationPanel: React.FC<InformationPanelProps> = ({
-  data, onNavigatePractice, onResetPractices,
+  data, onNavigatePractice, onResetPractices, onShuffleQuestions,
 }) => {
   const navigate = useNavigate();
   const practiceItems = Object.values(data);
@@ -59,6 +66,9 @@ const InformationPanel: React.FC<InformationPanelProps> = ({
             <RefreshSVG />
           </button>
         ) : null}
+        <button className="p-1" type="button" data-testid="shuffle-button" onClick={onShuffleQuestions}>
+          <ShuffleSVG />
+        </button>
       </div>
       <div id="result-visualization">
         <div className="flex my-5 justify-around ">

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;
 };
 

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(<Practices
         data={defaultPractices}
         onSubmit={mockedHandleSubmit}
         onSelectionChange={mockedHandleChange}
         onResetPractices={resetHandler}
+        onShuffleQuestions={shuffleHandler}
       />);
       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'));
     });

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<PracticesProps> = (
   {
-    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<PracticesProps> = (
           data={data}
           onNavigatePractice={handleNavigatePractice}
           onResetPractices={onResetPractices}
+          onShuffleQuestions={onShuffleQuestions}
         />
       </Modal>
       {/* <div className="relative float-right" id="action-button-space"> */}

src/pages/github-practices/github-practices.tsx

@@ -24,6 +24,7 @@ const GithubPractices: React.FC<GithubPracticesProps> = ({ githubLink }) => {
     handleSelectionChange,
     setPractices,
     resetStorage,
+    shuffleHandler,
   }] = usePracticesWithLocalStorage(link, {});
 
   useEffect(() => {
@@ -41,6 +42,7 @@ const GithubPractices: React.FC<GithubPracticesProps> = ({ githubLink }) => {
       onSelectionChange={handleSelectionChange}
       baseImageURL={link}
       onResetPractices={resetStorage}
+      onShuffleQuestions={shuffleHandler}
     />
   );
 };