Updated Instructions to include expanding. Also added URL-Code-Implem…

src/algorithms/instructions/index.js

@@ -66,7 +66,11 @@ const hashingInstructions2 = [
      - x : Insert x into table.
      - x - y: Bulk insert from integers x to y.
      - x - y - z: Bulk insert from integers x to y in steps of z.
-     - -x: Delete x from table.`,
+     - -x: Delete x from table.
+
+    If you wish to input more integers, select the Expand radio button.
+    The table will now expand after reaching 80% capacity`,
+
     `Click on ${KEY_INSERT} to enter Insert mode and load the algorithm.`,
     `Click on ${KEY_PLAY} to watch the algorithm run. The speed may be adjusted using the speed slider.`,
     ],

src/algorithms/parameters/HashingDHParam.js

@@ -1,3 +1,8 @@
+import PropTypes from 'prop-types';
+import { withAlgorithmParams } from './helpers/urlHelpers'
+
+import { URLContext } from '../../context/urlState.js';
+
 import React, { useState, useContext, useEffect } from 'react';
 import { GlobalContext } from '../../context/GlobalState';
 import { GlobalActions } from '../../context/actions';
@@ -56,16 +61,23 @@ const ERROR_INVALID_RANGES = 'If you had entered ranges, please input valid rang
  * Double Hashing input component
  * @returns the component
  */
-function HashingDHParam() {
+function HashingDHParam({ mode, list, value }) {
   const [message, setMessage] = useState(null);
   const { algorithm, dispatch } = useContext(GlobalContext);
-  const [array, setArray] = useState(DEFAULT_ARRAY);
-  const [search, setSearch] = useState(DEFAULT_SEARCH);
+  const [array, setLocalArray] = useState(list || DEFAULT_ARRAY);
+  const [search, setLocalSearch] = useState(DEFAULT_SEARCH);
   const [HASHSize, setHashSize] = useState({
     smallTable: true,
     largeTable: false,
   });
+
   const [expand, setExpand] = useState(DEFAULT_EXPAND);
+  const { setNodes, setSearchValue } = useContext(URLContext);
+
+  useEffect(() => {
+    setNodes(array);
+    setSearchValue(search);
+  }, [array, search])
 
     /**
    * Handle changes to input
@@ -171,7 +183,7 @@ function HashingDHParam() {
           mode="insertion"
           formClassName="formLeft"
           DEFAULT_VAL = {array}
-          SET_VAL = {setArray}
+          SET_VAL = {setLocalArray}
           REFRESH_FUNCTION={
             (() => {
               if (HASHSize.smallTable) {
@@ -194,8 +206,8 @@ function HashingDHParam() {
           buttonName="SEARCH"
           mode="search"
           formClassName="formRight"
-          DEFAULT_VAL = {DEFAULT_SEARCH}
-          SET_VAL = {setSearch}
+          DEFAULT_VAL = {value || DEFAULT_SEARCH}
+          SET_VAL = {setLocalSearch}
           ALGORITHM_NAME = {HASHING_SEARCH}
           handleSubmit={handleSearch}
           setMessage={setMessage}
@@ -254,4 +266,12 @@ function HashingDHParam() {
   );
 }
 
-export default HashingDHParam;
+// Define the prop types for URL Params
+HashingDHParam.propTypes = {
+    alg: PropTypes.string.isRequired, // keep alg for all algorithms
+    mode: PropTypes.string.isRequired, //keep mode for all algorithms
+    list: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired
+ };
+export default withAlgorithmParams(HashingDHParam);
+

src/algorithms/parameters/HashingLPParam.js

@@ -1,3 +1,8 @@
+import PropTypes from 'prop-types';
+import { withAlgorithmParams } from './helpers/urlHelpers'
+
+import { URLContext } from '../../context/urlState.js';
+
 import React, { useState, useContext, useEffect } from 'react';
 import { GlobalContext } from '../../context/GlobalState';
 import { GlobalActions } from '../../context/actions';
@@ -56,16 +61,23 @@ const ERROR_INVALID_RANGES = 'If you had entered ranges, please input valid rang
  * Linear probing input component
  * @returns the component
  */
-function HashingLPParam() {
+function HashingLPParam({ mode, list, value }) {
   const [message, setMessage] = useState(null);
   const { algorithm, dispatch } = useContext(GlobalContext);
-  const [array, setArray] = useState(DEFAULT_ARRAY);
-  const [search, setSearch] = useState(DEFAULT_SEARCH);
+  const [array, setLocalArray] = useState(list || DEFAULT_ARRAY);
+  const [search, setLocalSearch] = useState(DEFAULT_SEARCH);
   const [HASHSize, setHashSize] = useState({
     smallTable: true,
     largeTable: false,
   });
   const [expand, setExpand] = useState(DEFAULT_EXPAND);
+  const { setNodes, setSearchValue } = useContext(URLContext);
+
+  useEffect(() => {
+    setNodes(array);
+    setSearchValue(search);
+  }, [array, search])
+
 
     /**
    * Handle changes to input
@@ -170,7 +182,7 @@ function HashingLPParam() {
           mode="insertion"
           formClassName="formLeft"
           DEFAULT_VAL = {array}
-          SET_VAL = {setArray}
+          SET_VAL = {setLocalArray}
           REFRESH_FUNCTION={
             (() => {
               if (HASHSize.smallTable) {
@@ -193,8 +205,8 @@ function HashingLPParam() {
           buttonName="SEARCH"
           mode="search"
           formClassName="formRight"
-          DEFAULT_VAL = {DEFAULT_SEARCH}
-          SET_VAL = {setSearch}
+          DEFAULT_VAL = {value || DEFAULT_SEARCH}
+          SET_VAL = {setLocalSearch}
           ALGORITHM_NAME = {HASHING_SEARCH}
           handleSubmit={handleSearch}
           setMessage={setMessage}
@@ -253,4 +265,11 @@ function HashingLPParam() {
   );
 }
 
-export default HashingLPParam;
+// Define the prop types for URL Params
+HashingLPParam.propTypes = {
+    alg: PropTypes.string.isRequired, // keep alg for all algorithms
+    mode: PropTypes.string.isRequired, //keep mode for all algorithms
+    list: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired
+ };
+export default withAlgorithmParams(HashingLPParam);