Tag Use Case

proof-of-concepts/features/stories/combobox/hooks/reducer.ts

@@ -5,7 +5,7 @@ export default function bottomlineComboboxReducer<Item>(
   state: BL.ComboboxState<Item>,
   action: BL.ComboboxAction<Item>
 ): BL.ComboboxState<Item> {
-  const { type, getItemFromIndex, props, index, text } = action;
+  const { type, getItemFromIndex, props, index, inputValue } = action;
   const { isOpen, highlightedIndex } = state;
   switch (type) {
     case BL.ComboboxActions.INPUT_KEYDOWN_ARROW_UP: {
@@ -68,9 +68,11 @@ export default function bottomlineComboboxReducer<Item>(
     case BL.ComboboxActions.INPUT_VALUE_CHANGE: {
       // does nothing, does not move the input cursor, only when the highlightedIndex is -1
       // combobox can be open
+      console.log('[INTERNAL_REDUCER]: input change');
+      console.log('[INTERNAL_REDUCER]: ', inputValue);
       const newState = { ...state };
-      if (newState.highlightedIndex === -1 && text) {
-        newState.inputValue = text;
+      if (newState.highlightedIndex === -1 && inputValue) {
+        newState.inputValue = inputValue;
       }
       newState.isOpen = true;
 

proof-of-concepts/features/stories/combobox/hooks/types.ts

@@ -95,7 +95,7 @@ export namespace BL {
     type: ComboBoxStateChangeTypes;
     getItemFromIndex?: (index: number) => any;
     index?: number;
-    text?: string;
+    inputValue?: string;
     props?: ComboboxProps<Item>;
   }
 }

proof-of-concepts/features/stories/combobox/hooks/useCombobox.ts

@@ -30,10 +30,6 @@ export function useCombobox<Item>(props: BL.ComboboxProps<Item> = {}) {
   >(bottomlineComboboxReducer, computeInitialState<Item>(props), props);
   const { isOpen, highlightedIndex, inputValue } = state;
 
-  React.useEffect(() => {
-    console.log('combobox state:', state);
-  });
-
   /**
    * ******
    *
@@ -253,18 +249,19 @@ export function useCombobox<Item>(props: BL.ComboboxProps<Item> = {}) {
 
     const inputChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
       const val = e.currentTarget.value;
+      console.log('[INPUT_HANDLER]:', val);
       if (controlDispatch) {
         const fn = () => {
           dispatch({
             type: BL.ComboboxActions.INPUT_VALUE_CHANGE,
-            text: val
+            inputValue: val
           });
         };
         controlDispatch(fn);
       } else {
         dispatch({
           type: BL.ComboboxActions.INPUT_VALUE_CHANGE,
-          text: e.currentTarget.value
+          inputValue: val
         });
       }
     };

proof-of-concepts/features/stories/combobox/hooks/utils.ts

@@ -110,6 +110,7 @@ export function useControlledReducer<
           action,
           changes: internalChanges
         } as unknown) as ActionAndChanges);
+        console.log('[USER_RECOMMENDED_CHANGES]:', userRecommendedChanges);
         return userRecommendedChanges;
       }
       return internalChanges;

proof-of-concepts/features/stories/tags/Tag.stories.tsx

@@ -68,7 +68,6 @@ const UseCaseTemplate: ComponentStory<typeof Tag> = (args) => {
   return (
     <div>
       <TagEditor />
-      <button>Review Your Question</button>
     </div>
   );
 };

proof-of-concepts/features/stories/tags/TagEditor/TagEditor.scss

@@ -50,7 +50,7 @@
   margin: spacing.$Size-1;
   font-size: fonts.$Size-1;
   border: none;
-  width: 90%;
+  width: 70%;
 }
 
 .tag-search-input:focus-within {
@@ -65,6 +65,13 @@
 .tag-results-container {
   display: flex;
   box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2);
+  border-radius: 4px;
+}
+
+.tag-no-results {
+  display: flex;
+  color: colors.$Gray-7;
+  padding: spacing.$Size-0 spacing.$Size-2 spacing.$Size-0 spacing.$Size-2;
 }
 
 .tag-results {
@@ -95,9 +102,6 @@
   background-color: colors.$Gray-1;
 }
 
-.tag-result-info {
-}
-
 .tag-result-header {
   display: inline-grid;
   width: 100%;
@@ -113,12 +117,12 @@
   max-width: 100%;
   text-overflow: ellipsis;
   white-space: nowrap;
-  margin-left: 12px;
+  margin-left: spacing.$Size-1;
   font-size: fonts.$Size-1;
 }
 
 .tag-result-details {
-  justify-self: center;
+  justify-self: flex-end;
 }
 .tag-result-details path {
   fill: colors.$Gray-5;
@@ -132,7 +136,7 @@
   margin: 0;
 }
 
-@media screen and (max-width: 450px) {
+@media screen and (max-width: 500px) {
   .tag-header-title {
     font-size: fonts.$Size-1;
   }
@@ -157,7 +161,7 @@
   }
 }
 
-@media screen and (max-width: 535px) {
+@media screen and (max-width: 600px) {
   .tag-result-header {
     grid-template-columns: 8fr 1fr;
   }

proof-of-concepts/features/stories/tags/TagEditor/TagEditor.tsx

@@ -12,6 +12,7 @@ import {
   fetchTags
 } from './utils';
 import { useCombobox } from '../../combobox/hooks/useCombobox';
+import { useAbortController } from '../../useAbortController/useAbortController';
 import useDebouncedCallback from '../../useDebounce/src/hooks/useDebouncedCallback';
 import useAsync from '../../useDebounce/src/hooks/useAsync';
 import { SearchLoader } from '../../loader/SearchLoader';
@@ -41,10 +42,54 @@ import './TagEditor.scss';
 
 export const TagEditor = () => {
   const [input, setInput] = React.useState('');
+  const prevInput = React.useRef('');
   const [selectedTags, setSelectedTags] = React.useState<BottomlineTags>({});
   const [tagSuggestions, setTagSuggestions] = React.useState<
     BottomlineTag[] | undefined
-  >();
+  >([
+    {
+      id: 1,
+      name: 'material-analysis',
+      count: 5,
+      excerpt:
+        "What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+    },
+    {
+      id: 2,
+      name: 'class-analysis',
+      count: 33,
+      excerpt:
+        "What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+    },
+    {
+      id: 3,
+      name: 'materialism',
+      count: 12,
+      excerpt:
+        "What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+    },
+    {
+      id: 4,
+      name: 'dialectical-materialism',
+      count: 9,
+      excerpt:
+        "What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+    },
+    {
+      id: 5,
+      name: 'historical-materialism',
+      count: 345435345,
+      excerpt:
+        "What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+    },
+    {
+      id: 6,
+      name: 'materialist-theory',
+      count: 2,
+      excerpt:
+        "What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
+    }
+  ]);
 
   // we define state and change handler callbacks instead of a ref because we don't need to handle
   // we need the "appearance" of focus handling for the container when the input element is focused
@@ -57,7 +102,7 @@ export const TagEditor = () => {
     (dispatch) => {
       dispatch();
     },
-    2000,
+    1000,
     { trailing: true }
   );
 
@@ -66,10 +111,15 @@ export const TagEditor = () => {
       status: UseAsyncStatus.IDLE
     } as UseAsyncState
   });
+  if (error) {
+    console.log('[APP] error:', error);
+  }
+
+  const { getSignal, forceAbort } = useAbortController();
 
   React.useEffect(() => {
-    if (!input || input === '') return;
-    run(fetchTags(input));
+    if (!input || (prevInput.current === '' && input === '')) return;
+    run(fetchTags(input, getSignal));
   }, [input, run]);
 
   if (status === UseAsyncStatus.PENDING) derivedLoaderState = true;
@@ -95,9 +145,18 @@ export const TagEditor = () => {
         return recommendations;
       }
       case BL.ComboboxActions.INPUT_BLUR: {
+        forceAbort();
         recommendations.inputValue = state.inputValue;
         return recommendations;
       }
+      case BL.ComboboxActions.INPUT_VALUE_CHANGE: {
+        if (action.inputValue === '' && changes.inputValue !== '') {
+          recommendations.isOpen = false;
+          setTagSuggestions(undefined);
+        }
+        recommendations.inputValue = action.inputValue;
+        return recommendations;
+      }
       default: {
         return changes;
       }
@@ -116,17 +175,19 @@ export const TagEditor = () => {
     onInputValueChange: (changes: Partial<BL.ComboboxState<string>>) => {
       // piggy-back on the state change
       // set our own input value change
+      prevInput.current = input;
       setInput(changes as string);
     },
     stateReducer,
     items: tagSuggestions,
     initialIsOpen: tagSuggestions ? true : false
   });
 
-  // place our own ref on the input
-  // we use a useeffect to detect when the input ref is focused
-  // when the input ref is focused, then we focus the div
+  const noResultsFound = isOpen && tagSuggestions && tagSuggestions.length == 0;
+  const resultsFound = isOpen && tagSuggestions && tagSuggestions.length >= 1;
 
+  console.log('resultsFound:', resultsFound);
+  console.log('noResultsFound:', noResultsFound);
   return (
     <section className="tag-editor-section">
       <div className="tag-editor">
@@ -172,14 +233,19 @@ export const TagEditor = () => {
             className="tag-search-input"
             ref={null}
           />
-          {derivedLoaderState ? (
-            <span className="tag-search-loader">
-              <SearchLoader />
-            </span>
-          ) : null}
+          {/*{derivedLoaderState ? (*/}
+          <span className="tag-search-loader">
+            <SearchLoader />
+          </span>
+          {/*) : null}*/}
         </div>
         <div className="tag-results-container" {...getPopupProps()}>
-          {isOpen && tagSuggestions ? (
+          {noResultsFound ? (
+            <span className="tag-no-results">
+              <span>No results found</span>
+            </span>
+          ) : null}
+          {resultsFound ? (
             <ul className="tag-results">
               {tagSuggestions.map((tag, index: number) => (
                 <li

proof-of-concepts/features/stories/tags/TagEditor/utils.ts

@@ -1,6 +1,6 @@
 // debounce hook
 // useInteractOutside - to close the popup?
-
+import { delayRandomly, delayControlled, throwRandomly } from '../../utils';
 const props = {
   size: 'small',
   type: 'no-outline',
@@ -10,17 +10,24 @@ const props = {
 
 export const noop = () => {};
 
-export function fetchTags(tag: string) {
+export function fetchTags(tag: string, getSignal: () => AbortSignal) {
   console.log('[FETCH TAGS]');
   const url = `http://localhost:3000/tags?name_like=${tag}`;
   return fetch(url, {
+    signal: getSignal(),
     method: 'GET',
     headers: {
       'content-type': 'application/json'
     }
   })
-    .then((res) => res.json())
-    .catch((error) => Promise.reject(error));
+    .then(async (res) => {
+      await delayControlled();
+      throwRandomly();
+      return res.json();
+    })
+    .catch((error) => {
+      return Promise.reject(error);
+    });
 }
 
 export function getTagAttributes(target: HTMLElement) {

proof-of-concepts/features/stories/useAbortController/useAbortController.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+export function useAbortController() {
+  const abortControllerRef = React.useRef<AbortController>();
+
+  // our abort controller is declared once on initial render
+  const getAbortController = React.useCallback(() => {
+    if (!abortControllerRef.current) {
+      abortControllerRef.current = new AbortController();
+    }
+    return abortControllerRef.current;
+  }, []);
+
+  // callback ran when we need to create a new abort controller
+  const createNewAbortController = React.useCallback(() => {
+    abortControllerRef.current = new AbortController();
+  }, []);
+
+  const forceAbort = React.useCallback(() => {
+    if (getAbortController()) {
+      // abort the previous request
+      getAbortController().abort();
+    }
+  }, []);
+
+  // when the component unmounts/re-renders, abort any existing requests
+  // to prevent memory leaks
+  React.useEffect(() => {
+    return () => getAbortController().abort();
+  }, [getAbortController]);
+
+  // when we call getSignal, we cancel any outstanding requests
+  // and create a new instance of an abort controller
+  // then return the signal for the requesting code
+  const getSignal = React.useCallback(() => {
+    if (getAbortController()) {
+      // abort the previous request
+      getAbortController().abort();
+      createNewAbortController();
+    }
+
+    return getAbortController().signal;
+  }, [getAbortController, createNewAbortController]);
+
+  return { getSignal, forceAbort };
+}