Move entry components into separate file

package.json

@@ -8,7 +8,7 @@
   "private": true,
   "scripts": {
     "start": "parcel index.html",
-    "build": "parcel build index.html --no-source-maps",
+    "build": "parcel build index.html --no-source-maps --detailed-report",
     "prebuild": "yarn run typecheck",
     "typecheck": "tsc --noEmit --jsx preserve",
     "lint": "eslint src/*",

src/App.tsx

@@ -1,8 +1,8 @@
 import React, {useState} from 'react';
 
 import './App.scss';
-import {declineSaimiar} from './saimiar_morphology';
 import {SaiEntryProps, JutEntryProps, ElesuEntryProps, TukEntryProps} from './dbtypes';
+import {SaiEntry, JutEntry, ElesuEntry, TukEntry} from './Entries';
 
 const backendUrl = 'https://kucinakobackend.ichigo.everydayimshuflin.com';
 
@@ -81,80 +81,6 @@ const Entry = (props: EntryProps) => {
     }
 };
 
-const SaiEntry = (props: {entry: SaiEntryProps}) => {
-    const {entry} = props;
-    const synCategory = entry.syn_category;
-    const isNominal = synCategory === 'nominal';
-    return (
-        <div className="searchResult" key={ entry.id }>
-            <b>{ entry.sai }</b> - { entry.eng }
-            <br />
-            <span className="synclass">
-                <i>{ entry.syn_category }</i>
-                { entry.morph_type ? `\t\t${entry.morph_type}` : null }
-                <br/>
-                { isNominal ? formatMorphology(entry) : null }
-            </span>
-        </div>
-    );
-};
-
-const JutEntry = (props: {entry: JutEntryProps}) => {
-    const {entry} = props;
-
-    return (
-        <div className="searchResult" key={ entry.id }>
-            <b>{ entry.jut }</b> - { entry.eng }
-            <br/>
-            <span className="synclass">
-                { entry.syn_category === 'noun' ? entry.gender : null }
-            </span>
-        </div>);
-};
-
-const ElesuEntry = (props: {entry: ElesuEntryProps}) => {
-    const {entry} = props;
-
-    return (
-        <div className="searchResult" key={ entry.id }>
-            <b>{ entry.elesu }</b> - { entry.eng }
-            <br/>
-            <span className="synclass">
-                { entry.syn_category }
-            </span>
-        </div>);
-};
-
-const TukEntry = (props: {entry: TukEntryProps}) => {
-    const {entry} = props;
-
-    return (
-        <div className="searchResult" key={ entry.id }>
-            <b>{ entry.tuk }</b> - { entry.eng }
-            <br/>
-            <span className="synclass">
-                { entry.syn_category }
-            </span>
-        </div>);
-};
-
-function formatMorphology(entry) {
-    const decl = declineSaimiar(entry);
-    if (!decl) {
-        return '';
-    }
-
-    return (<span style={ {fontSize: 'medium', color: '#6a3131'} } >
-        Abs: <i>{decl.abs}</i>, Erg: <i>{decl.erg}</i>,
-        Adp: <i>{decl.adp}</i>,
-        All: <i>{decl.all}</i>,
-        Loc: <i>{decl.loc}</i>,
-        Ell: <i>{decl.ell}</i>,
-        Inst: <i>{decl.inst}</i>,
-        Rel: <i>{decl.rel}</i>
-    </span>);
-}
-
 interface ResultsProps {
     searchResults: Array<any>;
     searchTerm: string;

src/Entries.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import {declineSaimiar} from './saimiar_morphology';
+import {SaiEntryProps, JutEntryProps, ElesuEntryProps, TukEntryProps} from './dbtypes';
+
+const SaiEntry = (props: {entry: SaiEntryProps}) => {
+    const {entry} = props;
+    const synCategory = entry.syn_category;
+    const isNominal = synCategory === 'nominal';
+    return (
+        <div className="searchResult" key={ entry.id }>
+            <b>{ entry.sai }</b> - { entry.eng }
+            <br />
+            <span className="synclass">
+                <i>{ entry.syn_category }</i>
+                { entry.morph_type ? `\t\t${entry.morph_type}` : null }
+                <br/>
+                { isNominal ? formatMorphology(entry) : null }
+            </span>
+        </div>
+    );
+};
+
+function formatMorphology(entry) {
+    const decl = declineSaimiar(entry);
+    if (!decl) {
+        return '';
+    }
+
+    return (<span style={ {fontSize: 'medium', color: '#6a3131'} } >
+        Abs: <i>{decl.abs}</i>, Erg: <i>{decl.erg}</i>,
+        Adp: <i>{decl.adp}</i>,
+        All: <i>{decl.all}</i>,
+        Loc: <i>{decl.loc}</i>,
+        Ell: <i>{decl.ell}</i>,
+        Inst: <i>{decl.inst}</i>,
+        Rel: <i>{decl.rel}</i>
+    </span>);
+}
+
+const JutEntry = (props: {entry: JutEntryProps}) => {
+    const {entry} = props;
+
+    return (
+        <div className="searchResult" key={ entry.id }>
+            <b>{ entry.jut }</b> - { entry.eng }
+            <br/>
+            <span className="synclass">
+                { entry.syn_category === 'noun' ? entry.gender : null }
+            </span>
+        </div>);
+};
+
+const ElesuEntry = (props: {entry: ElesuEntryProps}) => {
+    const {entry} = props;
+
+    return (
+        <div className="searchResult" key={ entry.id }>
+            <b>{ entry.elesu }</b> - { entry.eng }
+            <br/>
+            <span className="synclass">
+                { entry.syn_category }
+            </span>
+        </div>);
+};
+
+const TukEntry = (props: {entry: TukEntryProps}) => {
+    const {entry} = props;
+
+    return (
+        <div className="searchResult" key={ entry.id }>
+            <b>{ entry.tuk }</b> - { entry.eng }
+            <br/>
+            <span className="synclass">
+                { entry.syn_category }
+            </span>
+        </div>);
+};
+
+export {SaiEntry, ElesuEntry, JutEntry, TukEntry};