Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tag Use Case #8

Merged
merged 30 commits into from
Jan 22, 2022
Merged

Tag Use Case #8

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
6b93e6e
add useDebounce
krfong916 Nov 17, 2021
845e5a0
update tag editor to use useCombobox hook edit type support for combobox
krfong916 Nov 17, 2021
0c9d2c0
fix onStateChange capitalization bug, add editor use case UI
krfong916 Nov 18, 2021
8d1b902
add spacing and screen-size standards for scss
krfong916 Nov 18, 2021
53bb3e0
implement loader, redo editor css, fix a11y bugs
krfong916 Nov 19, 2021
152a810
xed isopen state when user input changes, prevent default when user n…
krfong916 Nov 20, 2021
4d572e8
* fixed input isopen state when user input changes - our tests didn't…
krfong916 Nov 23, 2021
2d30eee
init useMultipleSelection, create generic types file
krfong916 Nov 23, 2021
41dc125
add keyboard tests for usemultiselect
krfong916 Nov 24, 2021
7166dd6
change keyboard navigation API for usemultiselect
krfong916 Nov 27, 2021
d4a79ee
implement all tests for usemultiselection
krfong916 Nov 29, 2021
0b1b344
fix combobox tests and cleanup type namespace
krfong916 Nov 29, 2021
a74ce35
move combobox folder
krfong916 Nov 29, 2021
5ffc4e7
implement tag use case, fix arrow navigation remove selectedItemListP…
krfong916 Nov 30, 2021
e033268
fix merge refs to include functions, this allows for composeable refs…
krfong916 Nov 30, 2021
96783d4
fix initial state, highlighted index
krfong916 Nov 30, 2021
67276b6
implement current item selection index and accessible navigation
krfong916 Nov 30, 2021
3b450a2
add cancel debounce callback and tests for tag editor
krfong916 Dec 1, 2021
655f397
add msw for mocking fetch and init tag tests, add event listeners for…
krfong916 Dec 2, 2021
aaded5a
add mock server setup for jest tests
krfong916 Dec 2, 2021
5e7e8b9
implement final tag editor tests
krfong916 Dec 2, 2021
d13e762
WIP: cursor position and highlighting selected items, implement creat…
krfong916 Dec 3, 2021
bad0890
fix keydown navigation for usemultislection, when we can focus a mult…
krfong916 Dec 6, 2021
9c6a1e9
WIP: question styling, implemented error-handling
krfong916 Jan 7, 2022
5434c43
implement focus for editor, button spacing and color, remove extran c…
krfong916 Jan 8, 2022
ff867ef
add link and editor bindings, refactor focus management for q compone…
krfong916 Jan 12, 2022
4e55f63
WIP: layout and styling, todo: spacing on large screens
krfong916 Jan 12, 2022
7d0d0b3
WIP: error handling, implement review and spacing
krfong916 Jan 13, 2022
f72f4ca
implement error handling, validate on change
krfong916 Jan 18, 2022
b9f7697
implement a11y for form and base tests, TODO: network error message
krfong916 Jan 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions proof-of-concepts/features/stories/combobox/hooks/useCombobox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,6 @@ export function useCombobox<Item>(props: BL.ComboboxProps<Item> = {}) {
// onchange prop will let the user control when the state updates
function getInputProps(props?: BL.ComboboxInputProps) {
const inputKeyDownHandler = (e: React.KeyboardEvent) => {
console.log('[INPUT_KEYDOWN]');
const keyEvt = normalizeKey(e);
if (keyEvt.name in inputKeyDownHandlers) {
inputKeyDownHandlers[keyEvt.name]();
Expand All @@ -232,7 +231,6 @@ export function useCombobox<Item>(props: BL.ComboboxProps<Item> = {}) {

const inputChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
const val = e.currentTarget.value;
console.log('current target:', val);
if (props?.controlDispatch) {
const fn = () => {
dispatch({
Expand Down
7 changes: 4 additions & 3 deletions proof-of-concepts/features/stories/combobox/hooks/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@ export function onStateChange<ComponentProps, ComponentState>(
const stateValue = state[pieceOfState];
const newStateValue = newState[pieceOfState];
if (stateValue !== newStateValue) {
console.log('call invoke');
invokeOnStateChange(pieceOfState, props, state, newState);
}
}
Expand All @@ -168,10 +169,10 @@ export function invokeOnStateChange<
state: ComponentState,
newState: ComponentState
) {
const prop = capitalizeString(pieceOfState as string);
const stateChangeCallback = `on${pieceOfState}Change`;
const statePiece = capitalizeString(pieceOfState as string);
const stateChangeCallback = `on${statePiece}Change`;
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

if (stateChangeCallback in props) {
props[stateChangeCallback](newState[pieceOfState]);
const test = props[stateChangeCallback](newState[pieceOfState]);
}
}

Expand Down
302 changes: 134 additions & 168 deletions proof-of-concepts/features/stories/tags/TagEditor/TagEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,17 @@ import {
cleanText,
isDuplicate,
isEmpty,
noop
noop,
fetchTags
} from './utils';
import { useCombobox } from '../../combobox/hooks/useCombobox';
import useDebouncedCallback from '../../useDebounce/src/hooks/useDebouncedCallback';
import useAsync from '../../useDebounce/src/hooks/useAsync';
import { UseAsyncStatus } from '../../useDebounce/src/types';
import { BL } from '../../combobox/hooks/types';
import { BottomlineTag, BottomlineTags } from './types';
import { GoQuestion } from 'react-icons/go';
import { AiFillQuestionCircle } from 'react-icons/ai';
import classNames from 'classnames';
import './TagUseCase.scss';
import './TagEditor.scss';

/**
Expand All @@ -43,14 +43,6 @@ export const TagEditor = () => {
const [selectedTags, setSelectedTags] = React.useState<BottomlineTags>({});
const [tagSuggestions, setTagSuggestions] = React.useState({ data: null });
const [duplicateTagAlert, setDuplicateTagAlert] = React.useState('');
const debounce = useDebouncedCallback(
(dispatch) => {
console.log('dispatch:', dispatch);
dispatch();
},
2000,
{ trailing: true }
);

function stateReducer(
state: BL.ComboboxState<BottomlineTag>,
Expand Down Expand Up @@ -95,35 +87,142 @@ export const TagEditor = () => {
stateReducer
});

React.useEffect(() => {
console.log('our input:', input);
}, [input]);
const debounce = useDebouncedCallback(
(dispatch) => {
console.log('dispatch:', dispatch);
dispatch();
},
2000,
{ trailing: true }
);
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


// const { data: tags, status, error } = useAsync(
// () => {
// if (input && input !== '') {
// return fetchTags(input);
// }
// },
// { status: UseAsyncStatus.IDLE },
// [input]
// );
const fetchTagResults = useAsync(
() => {
if (input && input !== '') {
return fetchTags(input);
}
},
{ status: UseAsyncStatus.IDLE },
[input]
);

const { data: tags, error, status } = fetchTagResults;
if (status === UseAsyncStatus.IDLE) {
console.log('we are idle');
} else if (status === UseAsyncStatus.PENDING) {
console.log('we are pending');
// set the loader
} else if (status === UseAsyncStatus.RESOLVED) {
console.log('we are resolved');
console.log(tags);
// unset the loader
// no results found
} else {
console.log('we are rejected');
console.log(error);
// keep the loader don't do anything with the error
}

return (
<section className="tag-editor-section">
<span {...getLabelProps({ id: 'tagInputDescription' })}>
Add up to 5 (five) tags to describe what your question is about
</span>
<div>
<input
{...getInputProps({ controlDispatch: debounce })}
type="text"
autoComplete="off"
className="tag-editor-input"
aria-describedby="tagInputDescription"
ref={null}
/>
<div className="tag-editor">
<div className="tag-header-container">
<span
className="tag-header-title"
{...getLabelProps({ id: 'tagInputDescription' })}
>
Add up to 5 (five) tags to describe what your question is about
</span>
<AiFillQuestionCircle size="1.25em" className="tag-header-description" />
</div>
<div className="selected-tags-container">
{selectedTags ? (
<ul className="selected-tags">
{Object.keys(selectedTags).map((tagName) => {
const tag = selectedTags[tagName];
return (
<li className="selected-tag">
<Tag size="small" type="outlined" text={tag.name}>
<TagCloseButton />
</Tag>
</li>
);
})}
</ul>
) : null}
</div>
{duplicateTagAlert ? <p role="alert">{duplicateTagAlert}</p> : null}
<div className="tag-search-container">
<input
{...getInputProps({ controlDispatch: debounce })}
type="text"
autoComplete="off"
className="tag-search-input"
aria-describedby="tagInputDescription"
ref={null}
/>
<span className="tag-search-loader">loader</span>
</div>
<div className="tag-results-container">
<ul className="tag-results">
<li className="tag-result">
<div className="tag-result-info">
<span className="tag-result-header">
<Tag className="tag-name" size="small" text="material-analysis" />
<span className="tag-result-count">{5}</span>
<AiFillQuestionCircle size="1rem" className="tag-result-details" />
</span>
</div>
<p className="tag-result-excerpt">
Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Qui
</p>
</li>
<li className="tag-result">
<div className="tag-result-info">
<span className="tag-result-header">
<Tag className="tag-result" size="small" text="material-max" />
<span className="tag-result-count">{5}</span>
<AiFillQuestionCircle size="1rem" className="tag-result-details" />
</span>
</div>
<p className="tag-result-excerpt">
Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Qui
expedita ratione,
</p>
</li>
<li className="tag-result">
<span className="tag-result-header">
<Tag className="tag-result" size="small" text="analysis" />
<span className="tag-result-count">{5}</span>
<AiFillQuestionCircle size="1rem" className="tag-result-details" />
</span>

<p className="tag-result-excerpt">
Lorem ipsum dolor sit, amet consectetur, adipisicing elit. Qui
expedita ratione, consectetur sint quibusdam placeat, beatae iusto
ipsum perspiciatis consequuntur cupiditate omnis voluptatibus
mollitia, fuga odio porro id praesentium. Dolore! Esse sunt,
recusandae architecto praesentium consequuntur. Iusto quas odit
pariatur fugiat ducimus itaque ad, natus dolore necessitatibus placeat
corporis, sint voluptas ea impedit. Sit quasi, voluptas, blanditiis
ullam fuga expedita? Accusamus distinctio praesentium deleniti saepe
eum magnam et aperiam, dolorum voluptatem voluptates. Voluptate
excepturi ipsa laudantium fugiat ex repellat magnam dolorum in.
Dolores veritatis molestias saepe, nemo non molestiae repudiandae.
</p>
</li>
<li className="tag-result">
<div className="tag-result-info">
<span className="tag-result-header">
<Tag className="tag-result" size="small" text="material" />
<span className="tag-result-count">{5}</span>
<AiFillQuestionCircle size="1rem" className="tag-result-details" />
</span>
</div>
<p className="tag-result-excerpt">Lorem</p>
</li>
</ul>
</div>
</div>
</section>
);
Expand All @@ -136,136 +235,3 @@ export const TagEditor = () => {
*
* *******************
*/

// /**
// * *******************
// *
// * Focusing
// *
// * *******************
// *
// * If leaving focus from text, convert the current text into a tag, apply TagCreation
// *
// */

// /**
// * *******************
// *
// * Update
// *
// * *******************
// *
// * Update an existing tag for a click event
// * If a user click's on a tag, convert the tag into input an input
// *
// */
// const editTag = (e: React.MouseEvent<React.ReactNode>) => {
// console.log('[EDIT_TAG]');
// const { name, index, tagContainer } = getTagAttributes();
// };

// /**
// * *******************
// *
// * Deletion
// *
// * *******************
// * There are two ways to delete a tag
// * - remove the tag via its close button
// * - edit and delete existing tags text
// *
// */
// const removeTag = (e: React.MouseEvent<HTMLButtonElement>) => {
// // prevents other click handlers on the Tag component from firing
// e.stopPropagation();
// };

// /**
// * *******************
// *
// * Create
// *
// * *******************
// */
// const createTag = (userInput: string) => {
// // strip text from characters not allowed
// let text = cleanText(userInput);

// // if the text contained bad characters, then return
// if (text === '') return;

// // check if we have a duplicate tag entry
// if (isDuplicate(text, state)) {
// setDuplicateTagAlert(getDuplicateTagAlert(text));

// // create the tag
// } else {
// // create a fresh piece of state to modify
// let newState = { ...state };

// let newTag = {
// name: text
// } as EditorTag;

// // insert the tag into our dictionary of tags
// newState.tags.set(text, newTag);

// // refresh the value of the input
// newState.inputValue = '';

// // update state
// setState(newState);
// }
// };

// const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
// if (e.charCode === SPACEBAR && isEmpty(state.inputValue) == false) {
// }
// };

// const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// console.log('[HANDLE_ONCHANGE]: ', e.target.value);
// // console.log('[HANDLE_ONCHANGE]: ', e.charCode);

// const text = e.target.value;

// if (isWhitespace(text) === false) {
// // update the text value
// console.log({ ...state, ...{ inputValue: text } });
// setState({ ...state, ...{ inputValue: text } });

// // if the editor has a duplicate tag, we remove the duplicate flag in the onChange handler
// // because the user is signaling that they've decided to correct the duplicate
// if (duplicateTagAlert) {
// setDuplicateTagAlert('');
// }
// }
// };

// const handleOnPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
// console.log('[ON_PASTE]');
// const text = event.clipboardData.getData('text');

// if (text.length > 1) {
// // create tags from the user's pasted text
// text.split(' ').forEach((pieceOfText) => createTag(pieceOfText));
// }
// };
// {tagSuggestions.data ? (
// <div className="tag-suggestions">
// <ul className="tag-suggestions__list">
// {tagSuggestions.suggestions.map((suggestion) => {
// const url = `thebottomlineapp.com/tags/${suggestion.name}/info`;
// return (
// <li className="tag-suggestions__list-item" tabIndex={0}>
// <div className="tag-suggestions__header">
// <Tag size="small" type="no-outline" text={suggestion.name} />
// <span className="tag-suggestions__count">{suggestion.count}</span>
// <a href={url}>
// <GoQuestion className="tag-suggestions__info" />
// </a>
// </div>
// <span className="tag-suggestions__body">{suggestion.excerpt}</span>
// </li>
// );
// })}
12 changes: 0 additions & 12 deletions proof-of-concepts/features/stories/tags/TagEditor/TagUseCase.scss
View file
Open in desktop

This file was deleted.

Loading