profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/Haroenv/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.
Haroen Viaene Haroenv @algolia Paris, France https://haroen.me Working on an even better search experience @algolia. Making shit happen @bullgit. feminist. Belgian

enaqx/awesome-react 45230

A collection of awesome things regarding React ecosystem

dmnd/dedent 597

⬅️ ES6 string tag that strips indentation from multi-line strings.

bullgit/fuck-jquery 22

For when you don't like jQuery. Embed this script on every page.

bullgit/trump.js 18

MAKE THE WEB GREAT AGAIN

dervondenbergen/giphy-gitter 13

get the perfect gif in your gitter activity feed

bullgit/australia.css 7

Accessibility is important, even if you live on the wrong side of the globe!

bullgit/parseint 7

THE ultimate javascript function to parse strings (or even objects) to integers!

bullgit/fast-clock 5

A very fast clock, accuracy guaranteed

push eventFCCghent/ikhaat

Haroen Viaene [bot]

commit sha 8d064522a1ca525e54299cbac97e940cf16b4e24

Built from commit c0ec7cbcce4997bb25d3dc2af131857139687c27

view details

push time in 15 hours

push eventFCCghent/ikhaat

Haroen Viaene [bot]

commit sha 1ff6e3e52e30cd20c3a23c6c8d1ff0037fd7a78f

Built from commit c0ec7cbcce4997bb25d3dc2af131857139687c27

view details

push time in 2 days

push eventFCCghent/ikhaat

Haroen Viaene [bot]

commit sha c3328f534a67c01bd7ac94040e5c2ab5be2fc861

Built from commit c0ec7cbcce4997bb25d3dc2af131857139687c27

view details

push time in 3 days

issue commentalgolia/react-instantsearch

Pagination Not Working

Sorry, I’m not sure if this is documented correctly, but the method is called refineNext

bharamalhusen

comment created time in 3 days

push eventFCCghent/ikhaat

Haroen Viaene [bot]

commit sha b70080570692d2682a8babac03da4ce9a2142314

Built from commit c0ec7cbcce4997bb25d3dc2af131857139687c27

view details

push time in 4 days

push eventFCCghent/ikhaat

Haroen Viaene [bot]

commit sha 85b025d5345cdc0584555937a1b9ef0d8d2fac8b

Built from commit c0ec7cbcce4997bb25d3dc2af131857139687c27

view details

push time in 5 days

push eventFCCghent/ikhaat

Haroen Viaene [bot]

commit sha b107760832df0300ee1d7e2a183ebacb58e46297

Built from commit c0ec7cbcce4997bb25d3dc2af131857139687c27

view details

push time in 6 days

push eventFCCghent/ikhaat

Haroen Viaene [bot]

commit sha 20da9b58e39ec7d291dbad7cf32ad2009c45b1d8

Built from commit c0ec7cbcce4997bb25d3dc2af131857139687c27

view details

push time in 7 days

push eventFCCghent/ikhaat

Haroen Viaene [bot]

commit sha 5a5c1d572e4704f11758bab2fe80e435ad263c54

Built from commit c0ec7cbcce4997bb25d3dc2af131857139687c27

view details

push time in 8 days

Pull request review commentalgolia/react-instantsearch

feat(server): allow components to request an initial search

 class Index extends Component<InnerProps, State> {         multiIndexContext: this.state.indexContext,       },       this.props,-      undefined+      undefined,+      { displayName: 'AlgoliaIndex', getProvidedProps() {} }

what do you have as alternative in mind? I also thought instead of the widget requesting the rerender, it could be an argument to findResultsState (something like "renderPasses: 2")

Haroenv

comment created time in 8 days

PullRequestReviewEvent

Pull request review commentalgolia/react-instantsearch

feat(server): allow components to request an initial search

 class Index extends Component<InnerProps, State> {         multiIndexContext: this.state.indexContext,       },       this.props,-      undefined+      undefined,+      { displayName: 'AlgoliaIndex', getProvidedProps() {} }

yes, this doesn't really have a connector, could also make this key optional in the function

Haroenv

comment created time in 8 days

PullRequestReviewEvent

Pull request review commentalgolia/react-instantsearch

feat(server): allow components to request an initial search

 export default createConnector({       attributesToRender: props.transformItems(facetOrder, { results }),     };   },++  requiresInitialResults: true,

possible to put it in metadata, but that's used in current refinements, so I'll need to check a way to avoid it showing up there

Haroenv

comment created time in 8 days

PullRequestReviewEvent

Pull request review commentalgolia/react-instantsearch

feat(server): allow components to request an initial search

 describe('findResultsState', () => {       });     }); +    it('should search twice for a widget requesting initial results', async () => {+      const getSearchParameters = jest.fn();+      const getSearchParameters2 = jest.fn();++      const Connected = createWidget({+        getSearchParameters,+      });+      const Dynamic = createWidget({+        getSearchParameters: getSearchParameters2,+        requiresInitialResults: true,+      });++      const App = props => (+        <InstantSearch {...props}>+          <Dynamic />

to check it doesn't do three requests

Haroenv

comment created time in 8 days

PullRequestReviewEvent
PullRequestReviewEvent

Pull request review commentalgolia/autocomplete

feat(examples): add Twitter example

+import { AutocompleteOptions } from '@algolia/autocomplete-core';+import {+  getAlgoliaResults,+  parseAlgoliaHitHighlight,+} from '@algolia/autocomplete-preset-algolia';+import type { Hit } from '@algolia/client-search';+import algoliasearch from 'algoliasearch/lite';+import React, { Fragment, useRef } from 'react';+import getCaretCoordinates from 'textarea-caret';++import { useAutocomplete } from './hooks';+import type { Account, AutocompleteItem } from './types';+import { isValidTwitterUsername, replaceAt } from './utils';++const searchClient = algoliasearch(+  'latency',+  'a4390aa69f26de2fd0c4209ff113a4f9'+);++export function Autocomplete(+  props: Partial<AutocompleteOptions<AutocompleteItem>>+) {+  const inputRef = useRef<HTMLTextAreaElement>(null);+  const { autocomplete, state } = useAutocomplete({+    ...props,+    id: 'twitter-autocomplete',+    getSources({ query }) {+      const cursorPosition = inputRef.current?.selectionEnd;+      const tokenizedQuery = query+        .split(/[\s\n]/)+        .reduce((acc, word, index) => {+          const previous = acc[index - 1];+          const start = index === 0 ? index : previous.range[1] + 1;+          const end = start + word.length;++          return acc.concat([{ word, range: [start, end] }]);+        }, [] as Array<{ word: string; range: [number, number] }>);++      if (cursorPosition) {+        const activeToken = tokenizedQuery.find((token) =>+          token.range.includes(cursorPosition)+        );++        if (activeToken?.word && isValidTwitterUsername(activeToken?.word)) {+          return [+            {+              sourceId: 'accounts',+              onSelect({ item, setQuery }) {+                const [index] = activeToken.range;+                const replacement = `@${item.handle}`;+                const newQuery = replaceAt(query, replacement, index);++                setQuery(newQuery);+              },+              getItems() {+                return getAlgoliaResults({+                  searchClient,+                  queries: [+                    {+                      indexName: 'autocomplete_twitter_accounts',+                      query: activeToken.word.slice(1),+                      params: {+                        hitsPerPage: 8,+                      },+                    },+                  ],+                });+              },+            },+          ];+        }+      }++      return [];+    },+  });++  const { top, height } = inputRef.current+    ? getCaretCoordinates(inputRef.current, inputRef.current?.selectionEnd)+    : { top: 0, height: 0 };++  return (+    <div {...autocomplete.getRootProps({})}>+      <div className="box">+        <div className="box-body">+          <div className="box-avatar">+            <img src="https://robohash.org/autocomplete" alt="" />+          </div>+          <div className="box-compose">+            <form+              {...autocomplete.getFormProps({+                inputElement: (inputRef.current as unknown) as HTMLInputElement,+              })}+            >+              <textarea+                className="box-textbox"+                ref={inputRef}+                {...autocomplete.getInputProps({+                  inputElement: (inputRef.current as unknown) as HTMLInputElement,+                })}+                spellCheck={false}+                autoFocus={true}+                maxLength={280}+              />+            </form>+            <div+              {...autocomplete.getPanelProps({})}+              className="autocomplete-panel"+              style={{ top: `${top + height}px` }}+            >+              {state.status === 'stalled' && !state.isOpen && (+                <div className="autocomplete-loading">+                  <svg+                    className="autocomplete-loading-icon"+                    viewBox="0 0 100 100"+                    fill="currentColor"+                  >+                    <circle+                      cx="50"+                      cy="50"+                      r="35"+                      fill="none"+                      stroke="currentColor"+                      strokeDasharray="164.93361431346415 56.97787143782138"+                      strokeWidth="6"+                    >+                      <animateTransform+                        attributeName="transform"+                        dur="1s"+                        keyTimes="0;0.40;0.65;1"+                        repeatCount="indefinite"+                        type="rotate"+                        values="0 50 50;90 50 50;180 50 50;360 50 50"+                      ></animateTransform>+                    </circle>+                  </svg>+                </div>+              )}+              {state.isOpen &&+                state.collections.map(({ source, items }) => {+                  return (+                    <div+                      key={`source-${source.sourceId}`}+                      className={[+                        'autocomplete-source',+                        state.status === 'stalled' &&+                          'autocomplete-source-stalled',+                      ]+                        .filter(Boolean)+                        .join(' ')}+                    >+                      {items.length > 0 && (+                        <ul+                          {...autocomplete.getListProps()}+                          className="autocomplete-items"+                        >+                          {items.map((item) => {+                            const itemProps = autocomplete.getItemProps({+                              item,+                              source,+                            });++                            return (+                              <li key={item.handle} {...itemProps}>+                                <div+                                  className={[+                                    'autocomplete-item',+                                    itemProps['aria-selected'] &&+                                      'autocomplete-item-selected',+                                  ]+                                    .filter(Boolean)+                                    .join(' ')}+                                >+                                  <AccountItem hit={item} />+                                </div>+                              </li>+                            );+                          })}+                        </ul>+                      )}+                    </div>+                  );+                })}+            </div>+          </div>+        </div>+        <div className="box-footer">+          <button type="submit" className="tweet-button">+            Tweet+          </button>+        </div>+      </div>+    </div>+  );+}++type AccountItemProps = {+  hit: Hit<Account>;+};++function AccountItem({ hit }: AccountItemProps) {+  return (+    <>+      {(hit.follows_me || hit.followed_by_me) && (+        <div className="account-follow-status">+          <svg+            className="account-follow-status-icon"+            viewBox="0 0 20 20"+            fill="currentColor"+          >+            <path+              fillRule="evenodd"+              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"+              clipRule="evenodd"+            />+          </svg>+          {hit.follows_me && hit.followed_by_me && (+            <span>You follow each other</span>+          )}+          {!hit.follows_me && hit.followed_by_me && (+            <span>You follow them</span>+          )}+          {hit.follows_me && !hit.followed_by_me && (+            <span>They follow you</span>+          )}

I agree with Francois, the example is about rendering, but the following information doesn't really matter for creating let's say a mention inside google docs

sarahdayan

comment created time in 8 days

issue commentalgolia/angular-instantsearch

Where do I find documentation for v3 or v2 Angular instant search

v2 documentation: https://community.algolia.com/angular-instantsearch/

v3 documentation isn't significantly different to v4 and was never out of beta, so you should upgrade following this guide: https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/angular/

msjahun

comment created time in 8 days

push eventalgolia/angular-instantsearch

Haroen Viaene

commit sha 7ef79b2d3e873c3d77196b545766a8077baf7b2d

fix(stories): usage of TypedBaseWidget in custom widgets (#833) * fix(stories): usage of TypedBaseWidget in custom widgets * small fixes * Update examples/storybook/src/stories/CustomWidgets.stories.ts * eslint

view details

push time in 8 days

PR merged algolia/angular-instantsearch

Reviewers
fix(stories): usage of TypedBaseWidget in custom widgets

<!-- Thanks for submitting a pull request! Please provide enough information so that others can review your pull request. -->

Summary

<!-- Explain the motivation for making this change. What existing problem does the pull request solve? Are there any linked issues? -->

the examples of custom widgets were still using BaseWidget, and not initialising the state like other examples

Result

<!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI. -->

working storybook

+71 -27

2 comments

3 changed files

Haroenv

pr closed time in 8 days

push eventalgolia/instantsearch.js

Haroen Viaene

commit sha 8cbd5fb3f02427f2c7de6e818f1ff4c81485b3e1

fix(es): add warning to typescript declaration of keys to be imported from helpers (#4908) * fix(es): add warning to typescript declaration of keys to be imported from helpers * fix typos, more info

view details

push time in 8 days

delete branch algolia/instantsearch.js

delete branch : feat/es-import-ts-warn

delete time in 8 days

PR merged algolia/instantsearch.js

Reviewers
fix(es): add warning to typescript declaration of keys to be imported from helpers

<!-- Thanks for submitting a pull request! Please provide enough information so that others can review your pull request. -->

Summary

<!-- Explain the motivation for making this change. What existing problem does the pull request solve? Are there any linked issues? -->

We deprecated the properties added to instantsearch in #4814, but the deprecation does not mention the solution

Result

<!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.

You will be able to test out these changes on the deploy preview (address will be commented by a bot):

  1. the documentation site (/)
  2. a widget playground (/stories) -->

The same solution as at runtime is given by typescript, importing from ./helpers

+13 -7

1 comment

1 changed file

Haroenv

pr closed time in 8 days

push eventFCCghent/ikhaat

Haroen Viaene [bot]

commit sha baf80e885ce53d0fc49bb49752588a2e0b5c6cde

Built from commit c0ec7cbcce4997bb25d3dc2af131857139687c27

view details

push time in 9 days

Pull request review commentalgolia/vue-instantsearch

feat(dynamic): add fallback-component

 export default {     });      // by default, render everything, but hidden so that the routing doesn't disappear+    // TODO: make sure fallback component gets rendered here too, but how do we know which attributes?

I tried to find a similar solution with rendering/searching an extra time like in React InstantSearch, but couldn't find it :(

Haroenv

comment created time in 9 days

PullRequestReviewEvent

PR opened algolia/vue-instantsearch

feat(dynamic): add fallback-component
<ais-dynamic-widgets>
  <template v-slot:fallback-component="{ attribute }">
    <ais-panel>
      <template v-slot:header>{{ attribute }}</template>
      <template v-slot>
        <ais-refinement-list attribute="brand" />
      </template>
    </ais-panel>
  </template>
</ais-dynamic-widgets>

still WIP as i didn't figure out how to make ssr work with it

+9 -1

0 comment

1 changed file

pr created time in 9 days

create barnchalgolia/vue-instantsearch

branch : feat/dynamic-widgets-fallback

created branch time in 9 days