Restore bibtex-parse-js

package.json

@@ -12,6 +12,7 @@
     "@retorquere/bibtex-parser": "^1.0.74",
     "astrocite-bibtex": "^0.15.4",
     "biblatex-csl-converter": "^1.6.9",
+    "bibtex-parse-js": "^0.0.24",
     "json-stable-stringify": "^1.0.1",
     "react": "^16.10.2",
     "react-dom": "^16.10.2"

src/App.tsx

@@ -2,6 +2,7 @@ import React, { FormEvent, useCallback, useState } from 'react'
 import './App.css'
 import { Astrocite } from './Astrocite'
 import { BibLatexCslConverter } from './BibLatexCslConverter'
+import { BibtexParse } from './BibtexParse'
 import { BibtexParser } from './BibtexParser'
 import { Citation } from './Citation'
 
@@ -58,6 +59,7 @@ export const App: React.FC = () => {
             <BibtexParser input={inputToParse} />
             <BibLatexCslConverter input={inputToParse} />
             <Citation input={inputToParse} />
+            <BibtexParse input={inputToParse} />
           </>
         )}
       </div>

src/BibtexParse.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'react'
+import { toJSON } from 'bibtex-parse-js'
+import { Item } from './Item'
+
+export const BibtexParse: React.FC<{
+  input: string
+}> = React.memo(({ input }) => {
+  const [items, setItems] = useState<CSL.Data[]>()
+  const [error, setError] = useState<string>()
+
+  useEffect(() => {
+    if (input) {
+      setError(undefined)
+
+      try {
+        const result = toJSON(input)
+        setItems(result)
+      } catch (error) {
+        setError(error.message)
+      }
+    }
+  }, [input])
+
+  if (!items) {
+    return null
+  }
+
+  if (error) {
+    return <div>{error}</div>
+  }
+
+  return (
+    <section>
+      <h2>
+        <a href={'https://github.com/ORCID/bibtexParseJs'}>bibtexParseJs</a>
+      </h2>
+      <ol>
+        {items.map(item => (
+          <li key={item.citationKey}>
+            <Item data={item} />
+          </li>
+        ))}
+      </ol>
+    </section>
+  )
+})