greg
/
gues-kucinako
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Move entry components into separate file

This commit is contained in:
Greg Shuflin 2021-09-13 00:00:51 -07:00
parent 60aa910978
commit a4c48b3cce
2 changed files with 80 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/App.tsx
View File

@ -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;

79
src/Entries.tsx Normal file
View File

@ -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};