New: Implement Sorting Info Box, Notification System (#3)

* New: Implement Sorting Info Box, Notification System

* Change theme from darkly to solar

* Fix: Small DOM problem

Author: agonyz

src/App.tsx

@@ -7,6 +7,8 @@ import { generateRandomArray } from './utils';
 import { SettingsPanel } from './components/panels/SettingsPanel.tsx';
 import { Navigation } from './components/navigation/Navigation.tsx';
 import { ControlPanel } from './components/panels/ControlPanel.tsx';
+import { InfoCard } from './components/cards/InfoCard.tsx';
+import { SortSuccessToast } from './components/toasts/SortSuccessToast.tsx';
 
 // todo: refactor the components, upcycle shared states
 export const App = () => {
@@ -15,6 +17,7 @@ export const App = () => {
   const [sortDelay, setSortDelay] = useState<number>(500);
   const [isSorting, setIsSorting] = useState<boolean>(false);
   const [array, setArray] = useState<number[]>(generateRandomArray(arraySize));
+  const [showToast, setShowToast] = useState<boolean>(false);
 
   // sort method refs
   const bubbleSortRef = useRef<(array: number[]) => void>(() => {}); // initialize with an empty function (ts error)
@@ -31,6 +34,10 @@ export const App = () => {
     setArray(array);
   }, [arraySize]);
 
+  const handleSortEnd = () => {
+    setShowToast(true);
+  };
+
   const renderVisualizer = () => {
     switch (sortType) {
       case 'bubble':
@@ -43,6 +50,7 @@ export const App = () => {
             isSorting={isSorting}
             setIsSorting={setIsSorting}
             sortRef={bubbleSortRef}
+            onSortEnd={handleSortEnd}
           />
         );
       case 'selection':
@@ -55,6 +63,7 @@ export const App = () => {
             isSorting={isSorting}
             setIsSorting={setIsSorting}
             sortRef={selectionSortRef}
+            onSortEnd={handleSortEnd}
           />
         );
       case 'merge':
@@ -67,6 +76,7 @@ export const App = () => {
             isSorting={isSorting}
             setIsSorting={setIsSorting}
             sortRef={mergeSortRef}
+            onSortEnd={handleSortEnd}
           />
         );
       default:
@@ -79,6 +89,7 @@ export const App = () => {
             isSorting={isSorting}
             setIsSorting={setIsSorting}
             sortRef={bubbleSortRef}
+            onSortEnd={handleSortEnd}
           />
         );
     }
@@ -101,6 +112,7 @@ export const App = () => {
             isSorting={isSorting}
           />
         </Row>
+        <InfoCard sortType={sortType} />
         {renderVisualizer()}
         <ControlPanel
           isSorting={isSorting}
@@ -122,6 +134,7 @@ export const App = () => {
             }
           }}
         />
+        <SortSuccessToast show={showToast} setShow={setShowToast} />
       </Container>
     </>
   );

src/assets/styles/bootstrap.scss

@@ -1,8 +1,8 @@
 // remove google web fonts
 $web-font-path: false;
 
-@import "bootswatch/dist/darkly/variables";
+@import "bootswatch/dist/solar/variables";
 @import "bootstrap/scss/bootstrap";
-@import "bootswatch/dist/darkly/bootswatch";
+@import "bootswatch/dist/solar/bootswatch";
 
 

src/components/cards/InfoCard.tsx

@@ -0,0 +1,41 @@
+import Card from 'react-bootstrap/Card';
+import { Col, Row } from 'react-bootstrap';
+import React from 'react';
+import { sorts } from '../../utils';
+
+interface InfoCardProps {
+  sortType: string;
+}
+
+export const InfoCard: React.FC<InfoCardProps> = ({ sortType }) => {
+  const sort = sorts[sortType];
+
+  return (
+    <Card className="mt-5">
+      <Card.Header>Info</Card.Header>
+      <Card.Body>
+        <Row>
+          <Col md={9}>
+            <h5>{sort.name}</h5>
+            <div className="mt-3">{sort.description}</div>
+          </Col>
+          <Col md={3}>
+            <h5>Time Complexity</h5>
+            <Row className="mt-3">
+              <Col>Worst Case:</Col>
+              <Col>{sort.complexity.worst}</Col>
+            </Row>
+            <Row>
+              <Col>Average Case:</Col>
+              <Col>{sort.complexity.average}</Col>
+            </Row>
+            <Row>
+              <Col>Best Case:</Col>
+              <Col>{sort.complexity.best}</Col>
+            </Row>
+          </Col>
+        </Row>
+      </Card.Body>
+    </Card>
+  );
+};

src/components/navigation/Navigation.tsx

@@ -9,7 +9,12 @@ export const Navigation: React.FC<NavigationProps> = ({
   isSorting,
 }) => {
   return (
-    <Navbar collapseOnSelect expand="lg" className="bg-body-tertiary">
+    <Navbar
+      collapseOnSelect
+      expand="lg"
+      className="bg-primary"
+      data-bs-theme="dark"
+    >
       <Container fluid>
         <Navbar.Brand href="#">Sort Algorithm Visualizer</Navbar.Brand>
         <Navbar.Toggle aria-controls="responsive-navbar-nav" />

src/components/toasts/SortSuccessToast.tsx

@@ -0,0 +1,28 @@
+import Toast from 'react-bootstrap/Toast';
+import React from 'react';
+
+interface SortSuccessToastProps {
+  show: boolean;
+  setShow: (show: boolean) => void;
+}
+
+export const SortSuccessToast: React.FC<SortSuccessToastProps> = ({
+  show,
+  setShow,
+}) => {
+  return (
+    <Toast
+      onClose={() => setShow(false)}
+      show={show}
+      delay={3000}
+      autohide
+      style={{ position: 'fixed', bottom: '20px', right: '20px' }}
+    >
+      <Toast.Header>
+        <strong className="me-auto">Notification</strong>
+        <small>Just now</small>
+      </Toast.Header>
+      <Toast.Body>Sorting completed successfully!</Toast.Body>
+    </Toast>
+  );
+};

src/components/visualizers/BubblesortVisualizer.tsx

@@ -11,6 +11,7 @@ export const BubblesortVisualizer: React.FC<VisualizerProps> = ({
   sortDelay,
   setIsSorting,
   sortRef,
+  onSortEnd,
 }) => {
   const [currentJ, setCurrentJ] = useState<number | null>(null);
 
@@ -46,6 +47,7 @@ export const BubblesortVisualizer: React.FC<VisualizerProps> = ({
       }
     }
     setIsSorting(false);
+    onSortEnd();
     setCurrentJ(null);
   };
 
@@ -74,7 +76,6 @@ export const BubblesortVisualizer: React.FC<VisualizerProps> = ({
 
   return (
     <>
-      <h1 className="mt-5 text-center">Bubblesort</h1>
       <Container ref={container} className="mt-5">
         <Row className="mt-5" style={{ marginBottom: 60 }}>
           <Col className="d-flex justify-content-center align-items-center">

src/components/visualizers/MergesortVisualizer.tsx

@@ -10,6 +10,7 @@ export const MergeSortVisualizer: React.FC<VisualizerProps> = ({
   setArray,
   setIsSorting,
   sortRef,
+  onSortEnd,
 }) => {
   const boxRefs = useRef<(HTMLDivElement | null)[]>([]);
   const container = useRef(null);
@@ -125,11 +126,11 @@ export const MergeSortVisualizer: React.FC<VisualizerProps> = ({
     setArray(sortedArray);
     tl.revert();
     setIsSorting(false);
+    onSortEnd();
   };
 
   return (
     <>
-      <h1 className="mt-5 text-center">Merge Sort</h1>
       <Container ref={container} className="mt-5">
         <Row className="mt-5">
           {array.map((v, i) => (

src/components/visualizers/SelectionsortVisualizer.tsx

@@ -11,6 +11,7 @@ export const SelectionsortVisualizer: React.FC<VisualizerProps> = ({
   sortDelay,
   setIsSorting,
   sortRef,
+  onSortEnd,
 }) => {
   const [currentI, setCurrentI] = useState<number | null>(null);
   const [currentJ, setCurrentJ] = useState<number | null>(null);
@@ -55,6 +56,7 @@ export const SelectionsortVisualizer: React.FC<VisualizerProps> = ({
     }
 
     setIsSorting(false);
+    onSortEnd();
     setCurrentI(null);
     setCurrentJ(null);
     setCurrentMin(null);
@@ -86,7 +88,6 @@ export const SelectionsortVisualizer: React.FC<VisualizerProps> = ({
 
   return (
     <>
-      <h1 className="mt-5 text-center">Selectionsort</h1>
       <Container ref={container} className="mt-5">
         <Row className="mt-5" style={{ marginBottom: 60 }}>
           <Col className="d-flex justify-content-center align-items-center">

src/interfaces/index.ts

@@ -1,3 +1,4 @@
 export { type VisualizerProps } from './visualizers';
 export { type SettingsPanelProps } from './settings';
 export { type NavigationProps } from './navigation';
+export { type SortAlgorithm } from './sorts';

src/interfaces/sorts.ts

@@ -0,0 +1,9 @@
+export interface SortAlgorithm {
+  name: string;
+  description: string;
+  complexity: {
+    best: string;
+    average: string;
+    worst: string;
+  };
+}

src/interfaces/visualizers.ts

@@ -8,4 +8,5 @@ export interface VisualizerProps {
   isSorting: boolean;
   setIsSorting: (sorting: boolean) => void;
   sortRef: MutableRefObject<(array: number[]) => void>;
+  onSortEnd: () => void;
 }

src/utils/index.ts

@@ -1,3 +1,5 @@
+import { sorts } from './sorts.ts';
+
 export const delay = (ms: number) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
@@ -9,3 +11,5 @@ export const generateRandomArray = (size: number): number[] => {
   }
   return array;
 };
+
+export { sorts };

src/utils/sorts.ts

@@ -0,0 +1,34 @@
+import { SortAlgorithm } from '../interfaces';
+
+export const sorts: Record<string, SortAlgorithm> = {
+  bubble: {
+    name: 'Bubble Sort',
+    description:
+      'Bubble Sort is a simple sorting algorithm that repeatedly steps through the list, compares adjacent elements and swaps them if they are in the wrong order.',
+    complexity: {
+      best: 'O(n)',
+      average: 'O(n²)',
+      worst: 'O(n²)',
+    },
+  },
+  selection: {
+    name: 'Selection Sort',
+    description:
+      'Selection Sort is an in-place comparison sorting algorithm that divides the input list into two parts: the sublist of items already sorted and the sublist of items remaining to be sorted.',
+    complexity: {
+      best: 'O(n²)',
+      average: 'O(n²)',
+      worst: 'O(n²)',
+    },
+  },
+  merge: {
+    name: 'Merge Sort',
+    description:
+      'Merge Sort is a divide and conquer algorithm that divides the input array into two halves, calls itself for the two halves, and then merges the two sorted halves.',
+    complexity: {
+      best: 'O(n log n)',
+      average: 'O(n log n)',
+      worst: 'O(n log n)',
+    },
+  },
+};