Tag Use Case #8

krfong916 · 2021-11-17T02:50:10Z

add debounce

krfong916 · 2021-11-17T02:51:37Z

proof-of-concepts/features/stories/useDebounce/src/hooks/useDebouncedCallback.ts

+export interface DebouncedReturnFunction<
+  T extends (...args: any[]) => ReturnType<T>
+> {
+  (...args: Parameters<T>): ReturnType<T> | void;


Debounce requires a function as argument, we infer the type of function using a Generic argument. We also infer the return type

Currently, we don't return anything when we call our fn, but later we'll need the inferred ReturnType

krfong916

We have a base implementation of useDebounce.
It satisfies our current use case, but later, we'll need to write in flush and cancel methods.

krfong916 · 2021-11-17T02:52:17Z

proof-of-concepts/features/stories/useDebounce/src/hooks/useDebouncedCallback.ts

+  const fnRef = useRef(fn);
+  const delayRef = useRef(delay);
+  const timerIDRef = useRef<NodeJS.Timeout | null>(null);
+  const isLeading = useRef(leading);
+  const isTrailing = useRef(trailing);


We have manual control of when these values change. They are declared once, during initial render, and are not re-created each render

krfong916 · 2021-11-17T02:56:06Z

proof-of-concepts/features/stories/useDebounce/src/hooks/useDebouncedCallback.ts

+  /**
+   * Re-computes the memoized value when one of the dependencies have changed
+   */
+  const debounce = React.useMemo(() => {


React.useMemo will only execute when one of the dependencies change - the function will be stored in the debounced variable.

krfong916 · 2021-11-17T02:57:39Z

proof-of-concepts/features/stories/useDebounce/src/hooks/useDebouncedCallback.ts

+export interface DebouncedReturnFunction<
+  T extends (...args: any[]) => ReturnType<T>
+> {
+  (...args: Parameters<T>): ReturnType<T> | void;


Currently, we don't return anything when we call our fn, but later we'll need the inferred ReturnType

krfong916 · 2021-11-17T03:06:16Z

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

-    // case BL.ComboboxActions.INPUT_KEYDOWN_DELETE: {
-    //   // does nothing, does not move the input cursor, only when the highlightedIndex is -1
-    //   // combobox can be open
-    //   const newState = { ...state };
-    //   return newState;
-    // }
-    // case BL.ComboboxActions.FUNCTION_OPEN_POPUP: {
-    //   return state;
-    // }
-    // case BL.ComboboxActions.FUNCTION_CLOSE_POPUP: {
-    //   return state;
-    // }
-    // case BL.ComboboxActions.FUNCTION_SET_HIGHLIGHTED_INDEX: {
-    //   return state;
-    // }
-    // case BL.ComboboxActions.FUNCTION_SELECT_ITEM: {
-    //   return state;
-    // }


We don't need these state change types for now, no use case as of now. Later, I could see a reality where a user (us or others) may need to make state recommendations within the onStateChange callback ... like they don't want to use a fully-loaded stateReducer as a prop, and instead, just want to handle a single piece of state

krfong916 · 2021-11-17T03:06:53Z

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

+    onSelectedItemChange?: (changes: Partial<ComboboxState<Item>>) => void;
+    onInputValueChange?: (changes: Partial<ComboboxState<string>>) => void;
+    onHighightedIndexChange?: (changes: Partial<ComboboxState<number>>) => void;
+    onIsOpenChange?: (changes: Partial<ComboboxState<boolean>>) => void;


We only pass a piece of state that changed, not the entire object (as of now), addresses #7

krfong916 · 2021-11-17T03:07:37Z

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

-  // Combobox Items
-  export interface Item {
-    name: string;
-    contents: any;
-  }


The user provides the type of Item. Constricting to make a user conform their data into our convention.

krfong916

Base version of tag use case. Will need to remove comments and implement tests, not ready for merge until complete

krfong916 · 2021-11-17T03:07:54Z

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

    type: ComboBoxStateChangeTypes;
-    getItemFromIndex?: (index: number) => Item;
+    getItemFromIndex?: (index: number) => any;


Should be item, woops.

krfong916 · 2021-11-17T03:08:31Z

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

+  }
+
+  export interface ComboboxInputProps {
+    controlDispatch?: (...args: any[]) => any;


Needed if the user wants to debounce the combobox input. Sure, there's many ways to skin cat, I decided to put here

krfong916 · 2021-11-17T03:08:50Z

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

      const keyEvt = normalizeKey(e);
      if (keyEvt.name in inputKeyDownHandlers) {
        inputKeyDownHandlers[keyEvt.name]();
      }
    };

    const inputBlurHandler = (e: React.FocusEvent<HTMLInputElement>) => {
+      e.preventDefault();


krfong916 · 2021-11-17T03:09:18Z

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

+      if (props?.controlDispatch) {
+        const fn = () => {
+          dispatch({
+            type: BL.ComboboxActions.INPUT_VALUE_CHANGE,
+            text: val
+          });
+        };
+        props.controlDispatch(fn);
+      } else {
+        dispatch({
+          type: BL.ComboboxActions.INPUT_VALUE_CHANGE,
+          text: e.currentTarget.value
+        });
+      }


If the user wants to control how/when the action is dispatched

krfong916 · 2021-11-17T03:10:15Z

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

+  const stateChangeCallback = `on${pieceOfState}Change`;
  if (stateChangeCallback in props) {
-    props[stateChangeCallback]({ changes: newState });
+    props[stateChangeCallback](newState[pieceOfState]);


Addresses #7 just pass the piece of state that changed for the onStateChange callback, nothing more

krfong916 · 2021-11-17T03:11:31Z

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

+  const debounce = useDebouncedCallback(
+    (dispatch) => {
+      console.log('dispatch:', dispatch);
+      dispatch();
+    },


Notice, we receive control of the dispatch function as argument - we control when to fire the dispatch function (based on the timer). Bless the power of useDebounceCallback 🙏🏼

…avigates combobox grid, maintain focus on input when combobox is open and styling when result is focused

… catch this because we started with the initial state as open each time * input cursor moves when the user navigates in the combobox grid - that should not happen - event.preventDefault() - the default behavior is move the caret, but we manually control this * maintain focus on the input when the combobox is open - use state and onchange callbacks * fix the styling of a result when focused, it shouldn't "popup" like it does (figure out why it does that, what syles make it that way) - css classnames weren't applied, we set focus via classname and not a pseudo selector property * abort network requests if the input is blurred - define abortcontroller and abort the network request - define a forceAbort function as part of the useAbort hook * fix, when there is valid input the grid is open and shows results, when the user changes their input and the input is invalid, the popup is still open (instead of showing no results found) and has the same fixed size - define no results found. Use stateReducer to make our own changes, based on internal state changes * don't let the tag squish - resize. It's minimum width must fit on a single line - use alignment and add more space for media query * test accessibility when the grid is open - use voiceover

…rops, fix focus on selected tags using useEffect and index

…, compose multiple prop getters for complex components

… mouse events

krfong916 · 2021-12-02T22:04:37Z

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

+  const statePiece = capitalizeString(pieceOfState as string);
+  const stateChangeCallback = `on${statePiece}Change`;


we are calling the piece of state that changed based on the recommendations from the reducer

krfong916 · 2021-12-02T22:06:20Z

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

+  const debounce = useDebouncedCallback(
+    (dispatch) => {
+      console.log('dispatch:', dispatch);
+      dispatch();
+    },
+    2000,
+    { trailing: true }
+  );


we define a function callback for useDebounce.
useDebounce returns a callback. We pass the dispatch function as an argument for debounce(dispatch)

krfong916 · 2021-12-02T22:11:01Z

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

+    ArrowRight: (e: React.KeyboardEvent) => {
+      e.preventDefault();


when the input is focused, the user will sometimes navigate the grid cell using the arrow keys. According to the WAI-ARIA specification for a combobox, we need to maintain focus on the input. Though not strictly necessary, it is a good user experience if the caret position of the cursor does not change while we navigate - thus, we prevent the default behavior of the arrow keys when the user navigates in the combobox.

krfong916 · 2021-12-02T22:11:12Z

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

      dispatch({
        type: BL.ComboboxActions.INPUT_KEYDOWN_ARROW_RIGHT,
        getItemFromIndex
      });
    },
-    ArrowLeft: () => {
+    ArrowLeft: (e: React.KeyboardEvent) => {
+      e.preventDefault();


when the input is focused, the user will sometimes navigate the grid cell using the arrow keys. According to the WAI-ARIA specification for a combobox, we need to maintain focus on the input. Though not strictly necessary, it is a good user experience if the caret position of the cursor does not change while we navigate - thus, we prevent the default behavior of the arrow keys when the user navigates in the combobox.

krfong916 · 2021-12-02T22:11:18Z

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

      dispatch({
        type: BL.ComboboxActions.INPUT_KEYDOWN_ARROW_LEFT,
        getItemFromIndex
      });
    },
-    ArrowDown: () => {
+    ArrowDown: (e: React.KeyboardEvent) => {
+      e.preventDefault();


when the input is focused, the user will sometimes navigate the grid cell using the arrow keys. According to the WAI-ARIA specification for a combobox, we need to maintain focus on the input. Though not strictly necessary, it is a good user experience if the caret position of the cursor does not change while we navigate - thus, we prevent the default behavior of the arrow keys when the user navigates in the combobox.

krfong916 · 2021-12-02T22:11:22Z

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

      dispatch({
        type: BL.ComboboxActions.INPUT_KEYDOWN_ARROW_DOWN,
        getItemFromIndex
      });
    },
-    ArrowUp: () => {
+    ArrowUp: (e: React.KeyboardEvent) => {
+      e.preventDefault();


when the input is focused, the user will sometimes navigate the grid cell using the arrow keys. According to the WAI-ARIA specification for a combobox, we need to maintain focus on the input. Though not strictly necessary, it is a good user experience if the caret position of the cursor does not change while we navigate - thus, we prevent the default behavior of the arrow keys when the user navigates in the combobox.

krfong916 · 2021-12-02T22:13:40Z

proof-of-concepts/features/stories/useDebounce/src/hooks/useAsync.ts

-    }
+  const { status, data, error } = state;
+
+  const run = React.useCallback((promise) => {


The run function is invoked only when we call run

It also makes the async api cleaner

krfong916 · 2021-12-02T22:15:47Z

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

-    if (!input || input === '') return;
-    run(fetchTags(input));
+    if (!input || (prevInput.current === '' && input === '')) return;
+    run(fetchTags(input, getSignal));


We must explicitly pass the abortSignal function in order to abort a fetch call. getSignal() is simply a getter

krfong916 · 2021-12-02T22:16:36Z

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

@@ -0,0 +1,45 @@
+import React from 'react';
+export function useAbortController() {
+  const abortControllerRef = React.useRef<AbortController>();


Create an abort controller that we control when it changes/updates between renders

krfong916 · 2021-12-02T22:17:42Z

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

+  // callback ran when we need to create a new abort controller
+  const createNewAbortController = React.useCallback(() => {
+    abortControllerRef.current = new AbortController();
+  }, []);


We might cancel a request. When that happens, and a new request comes around, we need to create a new 'instance' of an abort controller

krfong916 · 2021-12-02T22:18:21Z

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

+  const forceAbort = React.useCallback(() => {
+    if (getAbortController()) {
+      // abort the previous request
+      getAbortController().abort();
+    }
+  }, []);


A convenience function that we expose as a part of our API for the user to explicitly cancel an inflight request

krfong916 · 2021-12-02T22:19:35Z

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

@@ -92,7 +93,7 @@ export function useCombobox<Item>(props: BL.ComboboxProps<Item> = {}) {
   *
   */
  React.useEffect(() => {
-    if (inputRef.current && isOpen) {
+    if (inputRef.current && (isOpen || props.initialIsOpen)) {


we only want to focus the input when the popup is open OR the user wants the popup to always be open

krfong916 · 2021-12-02T22:22:34Z

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

+export function mergeRefs(...refs: React.MutableRefObject<any>[]) {
+  return function(node: React.ReactElement) {
+    // iterate over every ref
+    // assign the node to the current ref
+    refs.forEach((ref) => {
+      ref.current = node;
+    });
+  };
+}


We close over the refs passed as arguments, when React finishes its rendering phase, it looks to assign the ref a value, we iterate over all refs all assign each ref the node value.
This function is important because it allows us to compose multiple components together.
For instance the combox and multiple selection and component that implements both hooks needs a ref to the textbox. This function allows us to compose all hooks/components together.

krfong916 · 2021-12-02T22:23:18Z

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

+export function callAllEventHandlers(...fns: ((...args: any[]) => any)[]) {
+  return function(...args: any[]) {
+    fns.forEach((fn) => {
+      if (typeof fn === 'function') {
+        fn(...args);
+      }
+    });
+  };
+}


for every fn, call the function with args. Used for composing event handlers, both internal and component usage handlers

krfong916 · 2021-12-02T22:24:59Z

proof-of-concepts/features/stories/useMultipleSelection/utils.ts

+export function getInitialValue<Item>(
+  props: MultipleSelectionProps<Item>,
+  propKey: keyof MultipleSelectionState<Item>
+): Partial<MultipleSelectionState<Item>> {
+  if (propKey in props) {
+    return props[propKey as keyof MultipleSelectionProps<Item>] as Partial<
+      MultipleSelectionState<Item>
+    >;
+  }
+
+  // get the user-provided initial prop state, it is a piece of state
+  const initialPropKey = `initial${capitalizeString(
+    propKey
+  )}` as keyof MultipleSelectionProps<Item>;
+  if (initialPropKey in props) {
+    // console.log('initialPropKey', initialPropKey);
+    // console.log('initialPropKey', props[initialPropKey]);
+    return props[initialPropKey] as Partial<MultipleSelectionState<Item>>;
+  }
+
+  // return values from statically defined initial state object
+  return initialState[propKey] as Partial<MultipleSelectionState<Item>>;


The component accepts from initial props. Get those initial values if they exist

krfong916 · 2021-12-02T22:29:41Z

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

+export function useMouseAndTracker(
+  isOpen: boolean,
+  refs: React.MutableRefObject[],
+  handleBlur: (...args: any) => any
+) {
+  const mouseAndTrackerRef = React.useRef({
+    isMouseDown: false,
+    isTouchMove: false
+  });
+
+  React.useEffect(() => {
+    const onMouseDown = () => {
+      mouseAndTrackerRef.current.isMouseDown = true;
+    };
+    const onMouseUp = (e: React.SyntheticEvent) => {
+      mouseAndTrackerRef.current.isMouseDown = false;
+      if (isOpen && !isWithinBottomline(refs, e)) {
+        console.log('[USE_MOUSE_TRACKER_BLUR]');
+        handleBlur();
+      }
+    };
+    const onTouchStart = () => {
+      mouseAndTrackerRef.current.isTouchMove = true;
+    };
+
+    const onTouchMove = () => {
+      mouseAndTrackerRef.current.isTouchMove = true;
+    };
+
+    const onTouchEnd = (e: React.SyntheticEvent) => {
+      mouseAndTrackerRef.current.isTouchMove = false;
+      if (isOpen && !isWithinBottomline(refs, e)) {
+        handleBlur();
+      }
+    };
+
+    window.addEventListener('mousedown', onMouseDown);
+    window.addEventListener('mouseup', onMouseUp);
+    window.addEventListener('touchstart', onTouchStart);
+    window.addEventListener('touchmove', onTouchMove);
+    window.addEventListener('touchend', onTouchEnd);
+
+    return function() {
+      window.removeEventListener('mousedown', onMouseDown);
+      window.removeEventListener('mouseup', onMouseUp);
+      window.removeEventListener('touchstart', onTouchStart);
+      window.removeEventListener('touchmove', onTouchMove);
+      window.removeEventListener('touchend', onTouchEnd);
+    };
+  }, [isOpen]);
+  return mouseAndTrackerRef;
+}


We want to register mouse events that detect when we either click or touch within or away from our component. This hook is for handling internal focusing and blurring of a component

krfong916 · 2021-12-02T22:31:10Z

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

+export function isWithinBottomline(
+  refs: React.MutableRefObject[],
+  event: React.SyntheticEvent<any>
+) {
+  return refs.some((ref) => {
+    if (ref.current && event.target) {
+      return ref.current.contains(event.target);
+    } else {
+      return false;
+    }
+  });
+}


This function allows us to detect whether or not the element clicked belongs to one of the nodes that our component keeps reference of. This is important because it allows us to differentiate between elements that we own and elements that we do not.

krfong916 · 2021-12-02T22:32:07Z

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

+    refs.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    });
+  };


If the ref is a ref, assign it. Otherwise, the ref is another mergeRef() function call, in that case, pass the node to the function

krfong916 · 2021-12-02T22:34:42Z

proof-of-concepts/features/stories/useMultipleSelection/utils.ts

+      } else if (currentSelectedItemIndex === -1) {
+        return -1;
+      }


When we remove an item, it may be the case that the input is not focused, or a selected item is not focused. In that case, current index === -1. We don't want to 'select' the item, so return -1

krfong916 · 2021-12-02T22:36:13Z

proof-of-concepts/features/stories/useMultipleSelection/utils.ts

+export function canNavigateToItems(): boolean {
+  const selection = window.getSelection();
+  if (selection && selection.isCollapsed && selection.anchorOffset === 0) {
+    return true;
+  } else {
+    return false;
+  }
+}


This function is for the textbox. The result of the function tells the caller whether or not the cursor is at the very first position of the textbox and is collapsed

krfong916 · 2021-12-02T22:39:46Z

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

+  React.useEffect(() => {
+    if (currentSelectedItemIndex === -1 && dropdownRef.current) {
+      dropdownRef.current.focus();
+    } else if (
+      currentSelectedItemIndex >= 0 &&
+      currentSelectedItemsRef.current &&
+      currentSelectedItemsRef.current[currentSelectedItemIndex]
+    ) {
+      console.log(state);
+      console.log(currentSelectedItemsRef.current);
+      currentSelectedItemsRef.current[currentSelectedItemIndex].focus();
+    }
+  }, [currentSelectedItemIndex, currentSelectedItem]);


highlight the selected item if it's defined. The reason why the element may not exist BUT the current selected index is because clicking on an item to remove dispatches two actions - function_remove_item and item_clicked. Suppose we have a list that contains one selected item. We cannot remove the item end then focus the item - no longer exists.

krfong916 · 2021-12-02T23:18:10Z

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

+  function getItemProps(index: number) {
+    const handleClick = () => {
+      console.log('[GET_ITEM_PROPS] handle click');
+      dispatch({
+        type: ComboboxActions.ITEM_CLICK,
+        getItemFromIndex,
+        index,
+        selectedItem: true
+      });
+      if (inputRef.current) {
+        console.log('[GET_ITEM_PROPS] focus input');
+        inputRef.current.focus();
+      }
+    };


if we're clicking an item, the input will lose focus, refocus the input

krfong916 · 2021-12-02T23:19:36Z

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

+  const mouseTrackerRef = useMouseAndTracker(isOpen, [inputRef, popupRef], () => {
+    dispatch({
+      type: ComboboxActions.INPUT_BLUR
+    });
+  });


wrap the dispatch in a function because it will be invoked causing an infinite re-render otherwise

…ing tags via enter

…i-select item, WIP: focus management

…ss. WIP: formatting tools, ask question, standardize font and text spacing, error handling, a11y, comment code, keybindings, information icon

…nts. WIP: review question steps

add useDebounce

6b93e6e

krfong916 commented Nov 17, 2021

View reviewed changes

update tag editor to use useCombobox hook edit type support for combobox

845e5a0

krfong916 commented Nov 17, 2021

View reviewed changes

krfong916 added 19 commits November 17, 2021 22:09

fix onStateChange capitalization bug, add editor use case UI

0c9d2c0

add spacing and screen-size standards for scss

8d1b902

implement loader, redo editor css, fix a11y bugs

53bb3e0

xed isopen state when user input changes, prevent default when user n…

152a810

…avigates combobox grid, maintain focus on input when combobox is open and styling when result is focused

init useMultipleSelection, create generic types file

2d30eee

add keyboard tests for usemultiselect

41dc125

change keyboard navigation API for usemultiselect

7166dd6

implement all tests for usemultiselection

d4a79ee

fix combobox tests and cleanup type namespace

0b1b344

move combobox folder

a74ce35

implement tag use case, fix arrow navigation remove selectedItemListP…

5ffc4e7

…rops, fix focus on selected tags using useEffect and index

fix merge refs to include functions, this allows for composeable refs…

e033268

…, compose multiple prop getters for complex components

fix initial state, highlighted index

96783d4

implement current item selection index and accessible navigation

67276b6

add cancel debounce callback and tests for tag editor

3b450a2

add msw for mocking fetch and init tag tests, add event listeners for…

655f397

… mouse events

add mock server setup for jest tests

aaded5a

implement final tag editor tests

5e7e8b9

krfong916 commented Dec 2, 2021

View reviewed changes

krfong916 added 9 commits December 2, 2021 22:37

WIP: cursor position and highlighting selected items, implement creat…

d13e762

…ing tags via enter

fix keydown navigation for usemultislection, when we can focus a mult…

bad0890

…i-select item, WIP: focus management

WIP: question styling, implemented error-handling

9c6a1e9

implement focus for editor, button spacing and color, remove extran c…

5434c43

…ss. WIP: formatting tools, ask question, standardize font and text spacing, error handling, a11y, comment code, keybindings, information icon

add link and editor bindings, refactor focus management for q compone…

ff867ef

…nts. WIP: review question steps

WIP: layout and styling, todo: spacing on large screens

4e55f63

WIP: error handling, implement review and spacing

7d0d0b3

implement error handling, validate on change

f72f4ca

implement a11y for form and base tests, TODO: network error message

b9f7697

krfong916 merged commit 4629be4 into main Jan 22, 2022

		const statePiece = capitalizeString(pieceOfState as string);
		const stateChangeCallback = `on${statePiece}Change`;

		ArrowRight: (e: React.KeyboardEvent) => {
		e.preventDefault();

Tag Use Case #8

Tag Use Case #8

Conversation

krfong916 commented Nov 17, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

krfong916 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

krfong916 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment