9 manage vocabulary

src/components/VoggiChapterCard.tsx

@@ -9,10 +9,10 @@ import CardContent from "@material-ui/core/CardContent";
 import CardActionArea from "@material-ui/core/CardActionArea";
 
 import { styles } from "styles";
-import { chapters_wordGroups_chapters_edges_node } from "../queries/__generated__/chapters_wordGroups";
+import { chapters_wordGroups_chapters } from "../queries/__generated__/chapters_wordGroups";
 
 interface Props extends WithStyles<typeof styles> {
-  chapter: chapters_wordGroups_chapters_edges_node;
+  chapter: chapters_wordGroups_chapters;
 }
 
 const VoggiChapterCard = ({ classes, chapter }: Props) => {
@@ -35,7 +35,7 @@ const VoggiChapterCard = ({ classes, chapter }: Props) => {
           </Typography>
           <Typography variant="h5" component="h2">
             {t("chapter:nWordGroups")}{" "}
-            {chapter.wordGroups ? chapter.wordGroups.edges.length : 0}
+            {chapter.wordgroups ? chapter.wordgroups.length : 0}
           </Typography>
         </CardContent>
       </CardActionArea>

src/components/WordCard.tsx

@@ -9,34 +9,36 @@ import CardActionArea from "@material-ui/core/CardActionArea";
 
 import { styles } from "styles";
 import { subscribeWordGroupById_wordGroup_words_word } from "queries/__generated__/subscribeWordGroupById";
+import {useTranslation} from "react-i18next";
 
 interface Props extends WithStyles<typeof styles> {
   word: subscribeWordGroupById_wordGroup_words_word;
-  id: string;
+  wordGroupId: string;
 }
 
-const WordCard = ({ classes, word, id }: Props) => {
+const WordCard = ({ classes, word, wordGroupId }: Props) => {
+  const { t } = useTranslation();
   // Note: MUI links together with react-router-dom and Typescript are a bit tricky due to their dynamic nature
   // See the discussion and provided solutions here... https://github.com/mui-org/material-ui/issues/7877
   // <Button component={Link} {...{ to: "/about" } as any} />
   return (
     <Card>
       <CardActionArea
         component={RouterLink}
-        {...{ to: `/wordgroups/${id}/edit` } as any}
+        {...{ to: `${wordGroupId}/word/${word.id}` } as any}
       >
         <CardContent>
           <Typography
             className={classes.title}
             color="textSecondary"
             gutterBottom
           >
-            {word.translations.map(t => (
-              <>
+            {word.translations.length ? word.translations.map(t => (
+              <React.Fragment key={t.id}>
                 {t.text}
                 <br />
-              </>
-            ))}
+              </React.Fragment>
+            )): t("words:emptyWord") }
           </Typography>
         </CardContent>
       </CardActionArea>

src/pages/Dashboard/VoggiSection.tsx

@@ -18,20 +18,6 @@ const VoggiSection: React.FunctionComponent<Props> = ({ classes }) => {
     GET_WORDGROUPS
   );
 
-  if (loading || error || (data && data.wordGroups.length))
-    return (
-      <BusyOrErrorCard
-        loading={loading}
-        error={error}
-        noResults={
-          !loading &&
-          data &&
-          data.wordGroups &&
-          data.wordGroups &&
-          !data.wordGroups.length
-        }
-      />
-    );
   return (
     <SectionCardContainer>
       {data &&

src/pages/WordGroup/ChapterWordGroups.tsx

@@ -2,19 +2,22 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 
 import { withStyles, WithStyles } from "@material-ui/core/styles";
-import { useQuery } from "@apollo/react-hooks";
-import { RouteComponentProps } from "react-router-dom";
+import { useSubscription } from "@apollo/react-hooks";import { RouteComponentProps } from "react-router-dom";
 import Grid from "@material-ui/core/Grid";
 import AddIcon from "@material-ui/icons/Add";
 
 import { styles } from "styles";
 import BusyOrErrorCard from "components/BusyOrErrorCard";
 import SectionCardContainer from "../../components/SectionCardContainer";
 import Section from "../../components/Section";
-import { convertGlobalToDbId } from "../../helpers";
+import {GET_CHAPTER_WORDGROUPS_BY_CHAPTER_ID} from "../../queries/chapters";
+import {
+  subscribeChaptersWordGroupsByChapterId,
+  subscribeChaptersWordGroupsByChapterId_chapters_wordgroups
+} from "../../queries/__generated__/subscribeChaptersWordGroupsByChapterId";
+import WordGroupCard from "../../components/WordGroupCard";
 
 import LinkCard from "../../components/LinkCard";
-import { GET_CHAPTER_BY_ID } from "queries/chapters";
 
 interface WordGroupRouterProps {
   id: string;
@@ -27,44 +30,44 @@ interface Props
 const ChapterWordGroups = ({ classes, match }: Props) => {
   const { t } = useTranslation();
 
-  const { data, error, loading } = useQuery(GET_CHAPTER_BY_ID, {
+  const {data, error, loading} = useSubscription<subscribeChaptersWordGroupsByChapterId>(GET_CHAPTER_WORDGROUPS_BY_CHAPTER_ID, {
     variables: {
-      id: convertGlobalToDbId(match.params.id)
+      id: match.params.id
     },
-    skip: match.params.id === "new"
+    // skip: match.params.id === "new"
   });
 
   // Note: MUI links together with react-router-dom and Typescript are a bit tricky due to their dynamic nature
   // See the discussion and provided solutions here... https://github.com/mui-org/material-ui/issues/7877
   // <Button component={Link} {...{ to: "/about" } as any} />
   let chapter_name =
-    data && data.chapter
-      ? `${data.chapter.titleDE} / ${data.chapter.titleCH}`
-      : "";
-  return (
-    <Section title={t("wordGroups:wordGroupsChapter") + ` ${chapter_name}`}>
-      <SectionCardContainer>
-        <BusyOrErrorCard
-          loading={loading}
-          error={error}
-          noResults={
-            !loading &&
-            data &&
-            !!data.chapter &&
-            !!data.chapter.wordGroups &&
-            !data.chapter.wordGroups.edges.length
-          }
+    data && data.chapters && data.chapters.languages && data.chapters.languages.length ?
+      data.chapters.languages.map((language) => language.title) : "";
+  return <Section title={t("wordGroups:wordGroupsChapter") + ` ${chapter_name}`}>
+    <SectionCardContainer>
+      <BusyOrErrorCard
+        loading={loading}
+        error={error}
+        noResults={!loading && data && !!data.chapters && !!data.chapters.wordgroups && !data.chapters.wordgroups.length}
+      />
+      {data &&
+      data.chapters &&
+      data.chapters.wordgroups &&
+      data.chapters.wordgroups.map((w: subscribeChaptersWordGroupsByChapterId_chapters_wordgroups | null) => (
+        w ?
+          <Grid item key={w.id}>
+            <WordGroupCard wordGroup={w}/>
+          </Grid> : null
+      ))}
+      <Grid item>
+        <LinkCard
+          path={`/wordgroups/new`}
+          icon={<AddIcon/>}
+          helperText="wordGroups:createNewWordGroup"
         />
-        <Grid item>
-          <LinkCard
-            path={`/wordgroups/new`}
-            icon={<AddIcon />}
-            helperText="wordGroups:createNewWordGroup"
-          />
-        </Grid>
-      </SectionCardContainer>
-    </Section>
-  );
+      </Grid>
+    </SectionCardContainer>
+  </Section>;
 };
 
 export default withStyles(styles, { withTheme: true })(ChapterWordGroups);

src/pages/WordGroup/WordGroup.tsx

@@ -1,22 +1,37 @@
 import * as React from "react";
 
 import { withStyles, WithStyles } from "@material-ui/core/styles";
-import { useQuery } from "@apollo/react-hooks";
+import { useSubscription } from "@apollo/react-hooks";
 import { RouteComponentProps } from "react-router-dom";
 import AddIcon from "@material-ui/icons/Add";
 
 import { styles } from "styles";
 import NewWordGroup from "./WordGroupEditor";
 import { GET_WORDGROUP_BY_ID } from "queries/wordgroups";
 import BusyOrErrorCard from "components/BusyOrErrorCard";
-import { convertGlobalToDbId } from "../../helpers";
 import { useTranslation } from "react-i18next";
 import Section from "../../components/Section";
 import SectionCardContainer from "../../components/SectionCardContainer";
 import { Grid } from "@material-ui/core";
 import WordCard from "../../components/WordCard";
 import LinkCard from "../../components/LinkCard";
 import { subscribeWordGroupById } from "queries/__generated__/subscribeWordGroupById";
+import * as Yup from "yup";
+import i18next from "../../i18n";
+
+export const WordGroupSchema = Yup.object().shape({
+  titleDe: Yup.string()
+    .min(2, i18next.t("tooShort"))
+    .max(100, i18next.t("tooLong"))
+    .required(i18next.t("required")),
+  titleCh: Yup.string()
+    .min(2, i18next.t("tooShort"))
+    .max(100, i18next.t("tooLong"))
+    .required(i18next.t("required")),
+  chapter: Yup.number()
+    .min(1, i18next.t("chapterNumberTooLow"))
+    .max(100, i18next.t("chapterNumberTooHigh"))
+});
 
 // These can come from the router... See the route definitions
 interface WordGroupRouterProps {
@@ -30,13 +45,13 @@ interface Props
 const WordGroup = ({ classes, match }: Props) => {
   const { t } = useTranslation();
 
-  const { loading, data, error } = useQuery<subscribeWordGroupById>(
+  const { loading, data, error } = useSubscription<subscribeWordGroupById>(
     GET_WORDGROUP_BY_ID,
     {
       variables: {
-        id: convertGlobalToDbId(match.params.id)
+        id: match.params.id
       },
-      skip: match.params.id === "new"
+      // skip: match.params.id === "new"
     }
   );
 
@@ -47,7 +62,7 @@ const WordGroup = ({ classes, match }: Props) => {
   let title_name = ``;
 
   return (
-    <Section title={t("wordGroups:wordGroup") + ` ${title_name}`}>
+    <Section title={t("words:wordGroup") + ` ${title_name}`}>
       <SectionCardContainer>
         <BusyOrErrorCard
           loading={loading}
@@ -66,13 +81,13 @@ const WordGroup = ({ classes, match }: Props) => {
           data.wordGroup.words.map(w =>
             w ? (
               <Grid item key={w.id}>
-                <WordCard word={w.word} id={match.params.id} />
+                <WordCard word={w.word} wordGroupId={match.params.id} />
               </Grid>
             ) : null
           )}
         <Grid item>
           <LinkCard
-            path={`/wordgroups/${match.params.id}/edit`}
+            path={`/wordgroups/${match.params.id}/word/new`}
             icon={<AddIcon />}
             helperText="wordGroups:addWordToWordGroup"
           />

src/pages/WordGroup/WordGroups.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useQuery } from "@apollo/react-hooks";
+import { useSubscription } from "@apollo/react-hooks";
 
 import { withStyles, WithStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
@@ -11,7 +11,7 @@ import Section from "../../components/Section";
 import { GET_CHAPTER_WORDGROUPS } from "../../queries/chapters";
 import {
   chapters_wordGroups,
-  chapters_wordGroups_chapters_edges
+  chapters_wordGroups_chapters
 } from "../../queries/__generated__/chapters_wordGroups";
 import VoggiChapterCard from "../../components/VoggiChapterCard";
 
@@ -20,7 +20,7 @@ interface Props extends WithStyles<typeof styles> {
 }
 
 const WordGroups = ({ classes }: Props) => {
-  const { data, error, loading } = useQuery<chapters_wordGroups>(
+  const { data, error, loading } = useSubscription<chapters_wordGroups>(
     GET_CHAPTER_WORDGROUPS
   );
 
@@ -37,18 +37,16 @@ const WordGroups = ({ classes }: Props) => {
             !loading &&
             data &&
             !!data.chapters &&
-            data.chapters.edges &&
-            !data.chapters.edges.length
+            !data.chapters.length
           }
         />
         {data &&
           data.chapters &&
-          data.chapters.edges &&
-          data.chapters.edges.map(
-            (c: chapters_wordGroups_chapters_edges | null) =>
-              c && c.node && c.node.parentChapter ? (
-                <Grid item key={c.node.id}>
-                  <VoggiChapterCard chapter={c.node} />
+          data.chapters.map(
+            (c: chapters_wordGroups_chapters | null) =>
+              c && c.parentChapter ? (
+                <Grid item key={c.id}>
+                  <VoggiChapterCard chapter={c} />
                 </Grid>
               ) : null
           )}