feat: new dialog approach

danielsimao · Jan 8, 2022 · 4671a9c · 4671a9c · vercel · Jan 8, 2022
1 parent 87caace
commit 4671a9c
Show file tree

Hide file tree

Showing 769 changed files with 20,265 additions and 20,342 deletions.
diff --git a/components/ChapterContainer.tsx b/components/ChapterContainer.tsx
@@ -4,9 +4,8 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 import books from '../data/bible-books';
 import { findBookByCode, findBookSiblingByCode } from '../utils';
-import Search from './SearchForm';
-import BookCombobox from './SearchForm/BookCombobox';
-import SearchDialog from './SearchForm/Dialog';
+import Search from './Search';
+import SearchDialog from './Search/Dialog';
 
 export default function Container(props: any) {
   const router = useRouter();
@@ -107,29 +106,14 @@ export default function Container(props: any) {
           </svg>
         </button>
         <button
-          tabIndex={0}
           onClick={() => setSearchDialog(true)}
           className="md:hidden bg-gray-200 dark:bg-gray-800 py-3 rounded-full flex-1 flex justify-center items-center"
         >
           <span>
             {book?.book_pt} {router.query.chapter}
           </span>
         </button>
-        <SearchDialog
-          isOpen={isSearchDialogOpen}
-          onCompleteForm={(form) => {
-            setSearchDialog(false);
-            router.push({
-              pathname: router.pathname,
-              query: {
-                version: router.query.version,
-                book: form.book.code.toLowerCase(),
-                chapter: form.chapter
-              }
-            });
-          }}
-          onDismiss={() => router}
-        />
+
         <div className="hidden md:block">
           <Search book={book?.book_pt} chapter={chapter} />
         </div>
@@ -168,7 +152,7 @@ export default function Container(props: any) {
       </nav>
       <main
         id="skip"
-        className="flex flex-col justify-center px-8 bg-white dark:bg-black"
+        className="flex flex-col justify-center px-6 bg-white dark:bg-black"
       >
         {children}
         {/* <Footer /> */}
@@ -210,6 +194,20 @@ export default function Container(props: any) {
           </button>
         </div>
       </main>
+      <SearchDialog
+        isOpen={isSearchDialogOpen}
+        onCompleteForm={(form) => {
+          router.push({
+            pathname: router.pathname,
+            query: {
+              version: router.query.version,
+              book: form.book.code.toLowerCase(),
+              chapter: form.chapter
+            }
+          });
+        }}
+        onClose={() => setSearchDialog(false)}
+      />
     </div>
   );
 }
diff --git a/components/Container.tsx b/components/Container.tsx
@@ -26,8 +26,8 @@ export default function Container(props: any) {
         <title>{meta.title}</title>
         <meta name="robots" content="follow, index" />
         <meta content={meta.description} name="description" />
-        <meta property="og:url" content={`https://leerob.io${router.asPath}`} />
-        <link rel="canonical" href={`https://leerob.io${router.asPath}`} />
+        {/* <meta property="og:url" content={`https://leerob.io${router.asPath}`} />
+        <link rel="canonical" href={`https://leerob.io${router.asPath}`} /> */}
         <meta property="og:type" content={meta.type} />
         <meta property="og:site_name" content="As It Is Written" />
         <meta property="og:description" content={meta.description} />
@@ -38,9 +38,9 @@ export default function Container(props: any) {
         <meta name="twitter:title" content={meta.title} />
         <meta name="twitter:description" content={meta.description} />
         <meta name="twitter:image" content={meta.image} /> */}
-        {meta.date && (
+        {/* {meta.date && (
           <meta property="article:published_time" content={meta.date} />
-        )}
+        )} */}
       </Head>
       {/* sticky-nav */}
       <nav className="flex items-center justify-between w-full max-w-4xl p-8 mx-auto my-0 text-gray-900 bg-white  dark:bg-black bg-opacity-60 dark:text-gray-100">

diff --git a/components/MDXComponents.tsx b/components/MDXComponents.tsx
@@ -1,6 +1,6 @@
 const BibleVerse = (props: any) => (
   <p>
-    <span {...props}></span>
+    <span {...props}></span>{' '}
   </p>
 );
 const MDXComponents = {

diff --git a/...Form/BookCombobox/BookCombobox.module.css → ...arch/BookCombobox/BookCombobox.module.css b/...Form/BookCombobox/BookCombobox.module.css → ...arch/BookCombobox/BookCombobox.module.css
diff --git a/components/SearchForm/BookCombobox/index.tsx → components/Search/BookCombobox/index.tsx b/components/SearchForm/BookCombobox/index.tsx → components/Search/BookCombobox/index.tsx
diff --git a/...Form/ChapterInput/ChapterInput.module.css → ...arch/ChapterInput/ChapterInput.module.css b/...Form/ChapterInput/ChapterInput.module.css → ...arch/ChapterInput/ChapterInput.module.css
diff --git a/components/SearchForm/ChapterInput/index.tsx → components/Search/ChapterInput/index.tsx b/components/SearchForm/ChapterInput/index.tsx → components/Search/ChapterInput/index.tsx
@@ -6,6 +6,16 @@ import { findBookByName } from '../../../utils';
 import ChapterList from '../ChapterList';
 import styles from './ChapterInput.module.css';
 
+type ChapterInputProps = {
+  value?: string;
+  book?: string;
+  onSelect?: (chapter: number) => void;
+  onFocus: () => void;
+  onBlur: () => void;
+  onClick: () => void;
+  inputRef: Ref<HTMLInputElement>;
+};
+
 export default function ChapterInput({
   value: _value,
   book,
@@ -14,20 +24,12 @@ export default function ChapterInput({
   onFocus,
   onClick,
   inputRef
-}: {
-  value?: number;
-  book?: string;
-  onSelect?: (chapter: number) => void;
-  onFocus: () => void;
-  onBlur: () => void;
-  onClick: () => void;
-  inputRef: Ref<HTMLInputElement>;
-}) {
-  const [value, setValue] = useState<number | undefined>(_value);
+}: ChapterInputProps) {
+  const [value, setValue] = useState<string | undefined>(_value);
   const [isReady, setReady] = useState(false);
   const bibleBook = book ? findBookByName(book, books) : undefined;
 
-  function handleSelect(chapter: number) {
+  function handleSelect(chapter: string) {
     const selected = Number(chapter);
     onSelect?.(selected);
     setValue(chapter);
@@ -46,23 +48,20 @@ export default function ChapterInput({
   return (
     <>
       <input
-        // ref={inputRef}
         onClick={onClick}
-        // onBlur={onBlur}
-        // onFocus={onFocus}
         readOnly={!book}
         placeholder="Escolha um capítulo"
         className="block md:hidden text-sm text-gray-900 dark:text-gray-100 bg-transparent outline-none"
       />
-      <Combobox onSelect={(val) => handleSelect(Number(val))} openOnFocus>
+      <Combobox onSelect={(val) => handleSelect(val)} openOnFocus>
         <ComboboxInput
           value={value?.toString()}
           ref={inputRef}
           readOnly={!book}
           onBlur={onBlur}
           onFocus={onFocus}
           onClick={handleClick}
-          onChange={(e) => setValue(Number(e.target.value))}
+          onChange={(e) => setValue(e.target.value)}
           id="chapter"
           name="chapter"
           placeholder="Escolha um capítulo"

diff --git a/components/SearchForm/ChapterList/index.tsx → components/Search/ChapterList/index.tsx b/components/SearchForm/ChapterList/index.tsx → components/Search/ChapterList/index.tsx
@@ -1,22 +1,18 @@
 import { ComboboxList, ComboboxOption } from '@reach/combobox';
-import styles from './ChapterList.module.css';
-import { PropsWithChildren } from 'react';
 
 interface ChapterListProps {
   chapterCount?: number;
-  onSelect: (chapter: number) => void;
+  onSelect: (chapter: string) => void;
   isCombobox?: boolean;
 }
 
-function ChapterButton({
-  chapter,
-  onClick,
-  isCombobox
-}: {
-  chapter: number;
-  onClick: (chapter: number) => void;
+type ChapterButtonProps = {
+  chapter: string;
+  onClick: (chapter: string) => void;
   isCombobox?: boolean;
-}) {
+};
+
+function ChapterButton({ chapter, onClick, isCombobox }: ChapterButtonProps) {
   if (isCombobox) {
     return (
       <ComboboxOption
@@ -50,12 +46,12 @@ export default function ChapterList({
 
   const chapters = Array(chapterCount)
     .fill(null)
-    .map((_, i) => i + 1);
+    .map((_, i) => (i + 1).toString());
 
   if (isCombobox) {
     return (
       <ComboboxList
-        className="grid grid grid-cols-7 justify-items-center gap-y-4 grid-flow-row max-h-72 overflow-auto"
+        className="grid grid-cols-7 justify-items-center gap-y-4 grid-flow-row max-h-72 overflow-auto"
         aria-labelledby="chapter"
       >
         {chapters.map((chapter) => (
@@ -71,7 +67,10 @@ export default function ChapterList({
   }
 
   return (
-    <div className="grid grid grid-cols-6 justify-items-center gap-y-4 grid-flow-row p-6">
+    <div
+      className="grid grid-cols-6 justify-items-center gap-y-4 grid-flow-row p-6 overflow-auto"
+      style={{ maxHeight: 'calc(100% - 61px)' }}
+    >
       {chapters.map((chapter) => (
         <ChapterButton key={chapter} chapter={chapter} onClick={onSelect} />
       ))}