fix/explicitly fix negative params bug (#6)

* Fixed implicit negative bug

* Added max length to front end

* Fixes #5

README.md

@@ -17,6 +17,7 @@ Kitty Facty provides the following features to its users:
 
 - Pagination of cat facts.
 - Sorting of cat facts by length or alphabetically.
+- Caching of cat facts to reduce the number of API calls.
 - Error handling in case something goes wrong with the Cat Fact API.
 
 ## Project Structure
@@ -42,14 +43,17 @@ Returns a list of cat facts based on the provided query parameters.
 The following query parameters are supported:
 | Query String Parameter | Description | Example |
 | ---------------------- | ----------- | ------- |
-| `perPage` | Number of facts to return per page. Default is 10. Maximum is 50. | `perPage=25` |
-| `page` | Page number to return. Default is 1. | `page=3` |
+| `perPage` | Number of facts to return per page. Default is `DEFAULT_FACTS_PER_PAGE`. | `perPage=25` |
+| `page` | Page number to return. Default is `DEFAULT_FACTS_PAGE`. | `page=3` |
 | `sortByLength` | Sort facts by length. Enumerated values: `asc` (ascending) or `desc` (descending). | `sortByLength=desc` |
 | `sortByAlphabet` | Sort facts alphabetically. Enumerated values: `asc` (ascending) or `desc` (descending). | `sortByAlphabet=asc` |
-| `maxLength` | Maximum length of the returned facts. | `maxLength=100` |
+| `maxLength` | Maximum length of the returned facts. default is `DEFAULT_FACTS_MAX_LENGTH`| `maxLength=100` |
 
 Note that the `sortByLength` and `sortByAlphabet` query parameters are mutually exclusive. If both are provided, the `sortByLength` parameter will take precedence.
 
+All parameters are optional.
+All default values are defined in `src/config/defaultValues.ts` and can be overridden by environment variables.
+
 ### **Sample Request**
 
 ```bash

src/components/FactTable.jsx

@@ -6,11 +6,12 @@ export default function FactTable() {
   const [totalPages, setTotalPages] = useState(0);
   const [pageInput, setPageInput] = useState(1);
   const [perPage, setPerPage] = useState(10);
+  const [maxLength, setMaxLength] = useState(100);
   const [sortByAlphabet, setSortByAlphabet] = useState("");
   const [sortByLength, setSortByLength] = useState("");
 
   const fetchFacts = (page = 1, limit = 10) => {
-    let url = `/api/facts?page=${page}&perPage=${perPage}`;
+    let url = `/api/facts?page=${page}&perPage=${perPage}&maxLength=${maxLength}`;
     if (sortByAlphabet) {
       url += `&sortByAlphabet=${sortByAlphabet}`;
     }
@@ -44,6 +45,15 @@ export default function FactTable() {
     fetchFacts(1, newPerPage);
   };
 
+  const handleMaxLengthChange = (e) => {
+    const newMaxLength = parseInt(e.target.value);
+    if (newMaxLength < 1) {
+      return;
+    }
+    setMaxLength(newMaxLength);
+    fetchFacts(1, perPage);
+  };
+
   const handleSortByAlphabetChange = (e) => {
     setSortByAlphabet(e.target.value || "");
   };
@@ -64,7 +74,7 @@ export default function FactTable() {
     <div className="mx-auto w-full max-w-3xl">
       <div className="my-4">
         <label className="block text-gray-700 font-bold mb-2">
-          Per Page
+          Per Page 
           <input
             className="shadow appearance-none border rounded w-16 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
             type="number"
@@ -74,7 +84,17 @@ export default function FactTable() {
           />
         </label>
         <label className="block text-gray-700 font-bold mb-2">
-          Sort by Alphabet
+          Max Length 
+          <input
+            className="shadow appearance-none border rounded w-16 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            type="number"
+            min="1"
+            value={maxLength}
+            onChange={handleMaxLengthChange}
+          />
+        </label>
+        <label className="block text-gray-700 font-bold mb-2">
+          Sort by Alphabet 
           <select
             className="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
             value={sortByAlphabet}
@@ -83,10 +103,10 @@ export default function FactTable() {
             <option value="">-- Select --</option>
             <option value="asc">Ascending</option>
             <option value="desc">Descending</option>
-          </select>
+           </select>
         </label>
         <label className="block text-gray-700 font-bold mb-2">
-          Sort by Length
+          Sort by Length 
           <select
             className="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
             value={sortByLength}
@@ -100,7 +120,7 @@ export default function FactTable() {
       </div>
       <div className="my-4">
         <label className="block text-gray-700 font-bold mb-2">
-          Page
+          Page   
           <select
             className="shadow appearance-none border rounded w-16 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
             value={pageInput}

src/utils/catFactUtils.ts

@@ -20,9 +20,12 @@ export const parseQueryStrings = (
   );
 
   return {
-    limit: perPage || config.api.defaultFactPerPage,
-    page: page || config.api.defaultFactPage,
-    maxLength: maxLength || config.api.defaultFactMaxLength,
+    limit: getPositiveNumberOrDefault(perPage, config.api.defaultFactPerPage),
+    page: getPositiveNumberOrDefault(page, config.api.defaultFactPage),
+    maxLength: getPositiveNumberOrDefault(
+      maxLength,
+      config.api.defaultFactMaxLength
+    ),
     sortByLength: isValidLengthSortOrder ? (sortByLength as SortOrder) : null,
     sortByAlphabet: isValidAlphabetSortOrder
       ? (sortByAlphabet as SortOrder)
@@ -70,3 +73,14 @@ export const sortFactsByLength = (facts: Fact[], sortAsc = true): Fact[] => {
     return 0;
   });
 };
+
+function getPositiveNumberOrDefault(
+  num: number | undefined,
+  fallback: number
+): number {
+  const parsedNum = typeof num === "number" ? num : NaN;
+  if (isNaN(parsedNum) || parsedNum <= 0) {
+    return fallback;
+  }
+  return parsedNum;
+}