Added SearchBar component and queryParsed

client/src/components/SearchBar.tsx

@@ -0,0 +1,38 @@
+import { useRef, useEffect, KeyboardEvent } from 'react';
+import { searchParser } from '../utils';
+
+export const SearchBar = (): JSX.Element => {
+  const inputRef = useRef<HTMLInputElement>(document.createElement('input'));
+
+  useEffect(() => {
+    inputRef.current.focus();
+  }, [inputRef]);
+
+  const inputHandler = (e: KeyboardEvent<HTMLInputElement>) => {
+    const rawQuery = searchParser(inputRef.current.value);
+  };
+
+  return (
+    <div className='mb-3'>
+      <input
+        type='text'
+        className='form-control'
+        placeholder='card lang:typescript tags:ui,react'
+        ref={inputRef}
+        onKeyUp={e => inputHandler(e)}
+      />
+      <div className='form-text text-gray'>
+        Submit search query by pressing `Enter`. Read more about available
+        filters{' '}
+        <a
+          href='https://github.com/pawelmalak/snippet-box/wiki/Search-filters'
+          target='_blank'
+          rel='noreferrer'
+          className='text-success text-decoration-none'
+        >
+          here
+        </a>
+      </div>
+    </div>
+  );
+};

client/src/containers/Home.tsx

@@ -2,6 +2,7 @@ import { useEffect, useContext, Fragment } from 'react';
 import { SnippetsContext } from '../store';
 import { Layout, PageHeader, EmptyState } from '../components/UI';
 import { SnippetGrid } from '../components/Snippets/SnippetGrid';
+import { SearchBar } from '../components/SearchBar';
 
 export const Home = (): JSX.Element => {
   const { snippets, getSnippets } = useContext(SnippetsContext);
@@ -16,6 +17,12 @@ export const Home = (): JSX.Element => {
         <EmptyState />
       ) : (
         <Fragment>
+          <PageHeader title='Search' />
+          <SearchBar />
+          {/* <div className='col-12 mb-4'>
+            <SnippetGrid snippets={snippets.filter(s => s.isPinned)} />
+          </div> */}
+
           {snippets.some(s => s.isPinned) && (
             <Fragment>
               <PageHeader title='Pinned snippets' />

client/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './dateParser';
 export * from './badgeColor';
 export * from './findLanguage';
+export * from './searchParser';

client/src/utils/searchParser.ts

@@ -0,0 +1,25 @@
+export const searchParser = (rawQuery: string): void => {
+  // const rawQuery = 'my search tags:ui,react lang:typescript';
+
+  // Extract filters from query
+  const tags = extractFilters(rawQuery, 'tags');
+  const languages = extractFilters(rawQuery, 'lang');
+  const query = rawQuery.replaceAll(/(tags|lang):[a-zA-Z]+(,[a-zA-Z]+)*/g, '');
+
+  console.log(tags);
+  console.log(languages);
+  console.log(query);
+};
+
+const extractFilters = (query: string, filter: string): string[] => {
+  let filters: string[] = [];
+
+  const regex = new RegExp(filter + ':[a-zA-Z]+(,[a-zA-Z]+)*');
+  const matcher = query.match(regex);
+
+  if (matcher) {
+    filters = matcher[0].split(':')[1].split(',');
+  }
+
+  return filters;
+};