TCs and Toast

CONTRIBUTING.md

@@ -1,6 +1,15 @@
 ### Contribution Guide
 
-- Feel free to contribute to this repo by raising the __pull request__
-- Use the proper names for variable and functions
+#### PR rules
+
+- Please raise the **pull request** if want to contribute by fixing bugs,
+  improving the code or adding the test cases
+- If you want to enhance the project, please create an issue and can be
+  discussed before proceeding
+
+#### Codebase rules
+
 - Do not import libraries unless needed
 - Test well before submitting the PR
+- Code quality is the primary requirement
+- Format the files before submission

README.md

@@ -40,6 +40,9 @@ Features
 
 - [React](https://react.dev/)
 - [Redux Toolkit](https://redux-toolkit.js.org/)
+- [React Router](https://reactrouter.com/en/main/)
+- [React Switch](https://react-switch.netlify.app/)
+- [Sonner](https://sonner.emilkowal.ski/)
 - [Sass](https://sass-lang.com/)
 - [Vite](https://vitejs.dev/) (Bundler)
 

package.json

@@ -22,7 +22,8 @@
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.16.0",
     "react-switch": "^7.0.0",
-    "redux-persist": "^6.0.0"
+    "redux-persist": "^6.0.0",
+    "sonner": "^1.0.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.1.3",
@@ -40,7 +41,7 @@
     "eslint-plugin-react-refresh": "^0.3.5",
     "eslint-plugin-unused-imports": "^3.0.0",
     "jsdom": "^22.1.0",
-    "postcss": "^8.4.30",
+    "postcss": "^8.4.31",
     "sass": "^1.68.0",
     "stylelint": "^15.10.3",
     "stylelint-config-recess-order": "^4.3.0",

src/apps/sorting-visualizer/__tests__/hooks/use-algo.hook.spec.ts

@@ -6,7 +6,7 @@ import {
 import { renderHook, waitFor } from '@testing-library/react';
 
 import { algoList } from '@/apps/sorting-visualizer/sorting-algorithms/algo-list';
-import { getRndmNumInRange } from '../../helpers/array-helpers';
+import { getRndmNumInRange } from '@/apps/sorting-visualizer/helpers/array-helpers';
 import { initialArray } from '@/apps/sorting-visualizer/config';
 import useAlgo from '@/apps/sorting-visualizer/hooks/use-algo.hook';
 

src/apps/sorting-visualizer/config.ts

@@ -3,6 +3,7 @@ import { algoList } from './sorting-algorithms/algo-list';
 export const menuItems = algoList.map((item) => item.name).concat('all');
 export const initialArray = [6, 8, 3, 5, 1, 9, 2, 7, 4];
 export const numberGenerator = { min: 10, max: 40 };
+export const sortCompletionMessage = 'Sorting is complete';
 
 export const cellCSS = {
   size: 50,

src/apps/sorting-visualizer/layouts/all-algorithm.layout.tsx

@@ -7,6 +7,8 @@ import Visualizer from '@/apps/sorting-visualizer/components/visualizer/visualiz
 import { algoList } from '@/apps/sorting-visualizer/sorting-algorithms/algo-list';
 import classes from './layout.module.scss';
 import { setIsPlaying } from '@/apps/sorting-visualizer/store/sorting-visualizer.slice';
+import { sortCompletionMessage } from '../config';
+import { toast } from 'sonner';
 import useCompletion from '@/apps/sorting-visualizer/hooks/use-completion.hook';
 import { useEffect } from 'react';
 
@@ -26,6 +28,7 @@ function AllAlgorithmLayout() {
 
   useEffect(() => {
     if (isComplete) {
+      toast.success(sortCompletionMessage);
       dispatch(setIsPlaying(null));
     }
   }, [dispatch, isComplete]);

src/apps/sorting-visualizer/layouts/main.layout.tsx

@@ -2,6 +2,7 @@ import Controller from '@/apps/sorting-visualizer/components/controller/controll
 import ModeIcon from '@/apps/sorting-visualizer/components/theme/mode-icon';
 import Navbar from '@/apps/sorting-visualizer/components/navbar/navbar';
 import { PropsWithChildren } from 'react';
+import { Toaster } from 'sonner';
 import classes from './layout.module.scss';
 import { menuItems } from '@/apps/sorting-visualizer/config';
 
@@ -12,6 +13,7 @@ function MainLayout({ children }: PropsWithChildren) {
       <Controller />
       <main className={classes.main}>{children}</main>
       <ModeIcon />
+      <Toaster richColors duration={3000} />
     </div>
   );
 }

src/apps/sorting-visualizer/layouts/single-algorithm.layout.tsx

@@ -5,6 +5,8 @@ import NoInput from '@/apps/sorting-visualizer/components/visualizer/no-input';
 import Visualizer from '@/apps/sorting-visualizer/components/visualizer/visualizer';
 import { algoList } from '@/apps/sorting-visualizer/sorting-algorithms/algo-list';
 import { setIsPlaying } from '@/apps/sorting-visualizer/store/sorting-visualizer.slice';
+import { sortCompletionMessage } from '../config';
+import { toast } from 'sonner';
 import useCompletion from '@/apps/sorting-visualizer/hooks/use-completion.hook';
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
@@ -17,11 +19,11 @@ function SingleAlgorithmLayout() {
 
   const selectedAlgo =
     algoList.find(({ name }) => name === algoName) ?? algoList[0];
-
   const { onComplete, isComplete } = useCompletion(1, reset);
 
   useEffect(() => {
     if (isComplete) {
+      toast.success(sortCompletionMessage);
       dispatch(setIsPlaying(null));
     }
   }, [dispatch, isComplete]);