feat(AF-66): Chapter progress overview

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "trailingComma": "all",
+  "printWidth": 90,
+  "singleQuote": false
+}

README.md

@@ -23,12 +23,10 @@ The schema is publicly available. But if you login first to the [Django admin in
 
 ## Additional steps to generate types with Apollo Codegen
 
-- Install the apollo package globally:
-  `npm install -g apollo`
 - Make sure that the settings in `apollo.config.js` in the root directory are correct
 - Write a new GraphQL query, preferably in the "queries" directory
 - Then generate the types with:
-  `apollo client:codegen --target typescript`
+  `npm run types`
 - This should generate some files in a **generated** folder. You can then import these types and use them in your components...
 
 ### Note:

package.json

@@ -71,6 +71,7 @@
     "@types/react-router-dom": "^5.1.2",
     "@types/react-swipeable-views": "^0.13.0",
     "@types/yup": "^0.26.24",
+    "apollo": "^2.32.5",
     "typedoc": "^0.15.2",
     "typescript": "^3.7.2"
   }

src/components/ChapterCard.tsx

@@ -14,6 +14,8 @@ import {
   subscribeChapterById_chapter,
   subscribeChapterById_chapter_subChapters,
 } from "queries/__generated__/subscribeChapterById";
+import ChapterComponents from "./ChapterComponents";
+import ChapterLanguages from "./ChapterLanguages";
 
 interface Props extends WithStyles<typeof styles> {
   chapter:
@@ -25,24 +27,21 @@ interface Props extends WithStyles<typeof styles> {
 const ChapterCard = ({ classes, chapter }: Props) => {
   const { t } = useTranslation("chapter");
 
-  // 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} />
+  const subChapterCount = chapter.subChapters.length;
   const isSubChapter = !!chapter.parentChapter;
   const path = isSubChapter
-    ? `/chapters/${chapter.parentChapter && chapter.parentChapter.id}/${
-        chapter.id
-      }`
+    ? `/chapters/${chapter.parentChapter && chapter.parentChapter.id}/${chapter.id}`
     : `/chapters/${chapter.id}`;
+
+  const rootComponents = hasComponents(chapter)
+    ? chapter.components?.filter(({ type }) => type.base)
+    : [];
+
   return (
     <Card>
-      <CardActionArea component={RouterLink} {...({ to: path } as any)}>
+      <CardActionArea component={RouterLink} to={path}>
         <CardContent>
-          <Typography
-            className={classes.title}
-            color="textSecondary"
-            gutterBottom
-          >
+          <Typography className={classes.title} color="textSecondary" gutterBottom>
             {t("chapter")}{" "}
             {isSubChapter
               ? `${chapter.parentChapter!.number}.${chapter.number}`
@@ -51,10 +50,30 @@ const ChapterCard = ({ classes, chapter }: Props) => {
           <Typography variant="h5" component="h2">
             {chapter.description}
           </Typography>
+
+          {subChapterCount > 0 && (
+            <Typography variant="subtitle2" color="textSecondary" gutterBottom>
+              {t("subChapter", { count: subChapterCount })}
+            </Typography>
+          )}
+
+          {isSubChapter && rootComponents.length > 0 && (
+            <>
+              <ChapterComponents components={rootComponents} />
+              <ChapterLanguages
+                components={rootComponents}
+                languages={chapter.languages}
+              />
+            </>
+          )}
         </CardContent>
       </CardActionArea>
     </Card>
   );
 };
 
+const hasComponents = (
+  chapter: any,
+): chapter is subscribeChapterById_chapter_subChapters => "components" in chapter;
+
 export default withStyles(styles, { withTheme: true })(ChapterCard);

src/components/ChapterComponents.tsx

@@ -0,0 +1,84 @@
+import { Table, TableBody, TableCell, TableHead, TableRow } from "@material-ui/core";
+import { WithStyles, withStyles, withTheme } from "@material-ui/core/styles";
+import { getChapters_chapters_subChapters_components } from "queries/__generated__/getChapters";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { styles } from "styles";
+import { EditStates } from "types/editStates";
+
+type ChapterState = {
+  [key: string]: {
+    [key in keyof typeof EditStates]?: number;
+  };
+};
+
+interface Props extends WithStyles<typeof styles> {
+  components: getChapters_chapters_subChapters_components[];
+}
+const ChapterComponents = ({ components }: Props) => {
+  const { t } = useTranslation("chapter");
+  const chapterState: ChapterState = components.reduce(
+    (acc, { state, type: { name } }) => ({
+      ...acc,
+      [name]: { [state]: (acc[name]?.[state as EditStates] || 0) + 1 },
+    }),
+    {} as ChapterState,
+  );
+
+  return (
+    <Table size="small">
+      <TableHead>
+        <TableRow>
+          <TableCell></TableCell>
+          <TableCell></TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {Object.entries(chapterState).map(([typeName, counts]) => (
+          <TableRow key={typeName}>
+            <TableCell variant="head" padding="none">
+              {typeName}
+            </TableCell>
+            <TableCell>
+              <StateList>
+                {Object.values(EditStates)
+                  .filter((state) => !!counts[state])
+                  .map((state) => (
+                    <StateListItem
+                      key={state}
+                      state={state}
+                      title={t(`chapters:editState${state}`)}
+                    >
+                      {counts[state]}
+                    </StateListItem>
+                  ))}
+              </StateList>{" "}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+};
+
+export default withStyles(styles, { withTheme: true })(ChapterComponents);
+
+const StateList = styled.ul`
+  list-style: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+`;
+
+const StateListItem = withTheme(styled.li<{ state: EditStates }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 8px;
+  height: 24px;
+  width: 24px;
+  border-radius: 99px;
+  padding: 0;
+  background: ${({ state, theme: { editStateColors } }) => editStateColors[state]};
+`);

src/components/ChapterLanguages.tsx

@@ -0,0 +1,98 @@
+import { Typography } from "@material-ui/core";
+import {
+  makeStyles,
+  Theme,
+  WithStyles,
+  withStyles,
+  withTheme,
+} from "@material-ui/core/styles";
+import {
+  getChapters_chapters_languages,
+  getChapters_chapters_subChapters_components,
+} from "queries/__generated__/getChapters";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { styles } from "styles";
+
+interface Props extends WithStyles<typeof styles> {
+  components: getChapters_chapters_subChapters_components[];
+  languages: getChapters_chapters_languages[];
+}
+const ChapterLanguages = ({ components, languages }: Props) => {
+  const { t } = useTranslation("chapters");
+  const { spacing } = useStyles();
+
+  // e.g. { de: { translations: 5, valid: 3 }, … }
+  const state = languages.reduce(
+    (acc, { language: { id } }) => ({ ...acc, [id]: { translations: 0, valid: 0 } }),
+    {} as { [key: string]: { translations: number; valid: number } },
+  );
+  components
+    .filter(({ texts }) => texts.length > 0 && texts.some((text) => text.translatable))
+    .flatMap(({ texts }) => texts)
+    .forEach(({ translations }) =>
+      translations.forEach(({ language: { id }, valid }) => {
+        state[id].translations++;
+        valid && state[id].valid++;
+      }),
+    );
+
+  return (
+    <>
+      <Typography variant="h6" component="h3" className={spacing}>
+        {t("translationProgress")}
+      </Typography>
+      <LanguageList>
+        {Object.entries(state).map(([language, { translations, valid }]) => (
+          <LanguageListItem key={language}>
+            <span style={{ width: "32px" }}>{language.toUpperCase()}</span>
+            <ProgressBar filled={valid / translations} />
+            <Count>
+              {valid} / {translations}
+            </Count>
+          </LanguageListItem>
+        ))}
+      </LanguageList>
+    </>
+  );
+};
+
+export default withStyles(styles, { withTheme: true })(ChapterLanguages);
+
+const useStyles = makeStyles((theme: Theme) => ({
+  spacing: {
+    marginTop: theme.spacing(2),
+  },
+}));
+
+const LanguageList = styled.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+`;
+
+const LanguageListItem = styled.li`
+  display: flex;
+  align-items: center;
+`;
+
+const Count = withTheme(styled.span`
+  color: ${({ theme: { palette } }) => palette.grey[500]};
+  font-size: 0.75em;
+  width: 32px;
+  text-align: right;
+`);
+
+const ProgressBar = withTheme(styled.span<{ filled: number }>`
+  margin: 0 4px;
+  border: 1px solid ${({ theme: { palette } }) => palette.grey[500]};
+  flex-grow: 1;
+  background: linear-gradient(
+    to right,
+    ${({ theme: { palette } }) => palette.primary.main} ${({ filled }) => filled * 100}%,
+    transparent ${({ filled }) => filled * 100}%
+  );
+  height: 10px;
+`);

src/locales/de.json

@@ -30,14 +30,22 @@
     "chapter": "Kapitel",
     "chapters": "Kapitel",
     "chaptersOverview": "Kapitelübersicht",
-    "noChaptersAvailable": "No keine Kapitel verfügbar",
+    "noChaptersAvailable": "Noch keine Kapitel verfügbar",
     "chapterNumber": "Kapitel nummer",
     "chapterDescriptionPlaceholder": "Um was geht es in diesem Kapitel?",
     "createNewChapter": "Kapitel anlegen",
-    "createNewSubChapter": "Subkapitel anlegen"
+    "createNewSubChapter": "Subkapitel anlegen",
+    "editStateC": "angelegt",
+    "editStateR": "im Review",
+    "editStateU": "Korrektur",
+    "editStateT": "Übersetzung",
+    "editStateF": "Fertig",
+    "translationProgress": "Übersetzungen"
   },
   "chapter": {
     "chapter": "Kapitel",
+    "subChapter": "{{count}} Subkapitel",
+    "subChapter_plural": "{{count}} Subkapitel",
     "newChapterTitle": "Neues Kapitel anlegen",
     "newSubChapterTitle": "Neues Unterkapitel anlegen",
     "chapterNumber": "Kapitelnummer",

src/locales/en.json

@@ -34,10 +34,18 @@
     "chapterNumber": "Chapter number",
     "chapterDescriptionPlaceholder": "What is the chapter about?",
     "createNewChapter": "Create new chapter",
-    "createNewSubChapter": "Create new subchapter"
+    "createNewSubChapter": "Create new subchapter",
+    "editStateC": "creation",
+    "editStateR": "in review",
+    "editStateU": "to be updated",
+    "editStateT": "to be translated",
+    "editStateF": "final",
+    "translationProgress": "Translation progress"
   },
   "chapter": {
     "chapter": "Chapter",
+    "subChapter": "{{count}} subchapter",
+    "subChapter_plural": "{{count}} subchapters",
     "newChapterTitle": "Create new chapter",
     "newSubChapterTitle": "Create new subchapter",
     "chapterNumber": "Chapter number",

src/pages/Dashboard/ChapterSection.tsx

@@ -16,26 +16,18 @@ interface Props extends WithStyles<typeof styles> {}
 const ChapterSection: React.FunctionComponent<Props> = ({ classes }) => {
   const { data, error, loading } = useQuery<getChapters>(GET_CHAPTERS);
 
-  if (loading || error || (data && data.chapters && !data.chapters.length)) {
-    return (
-      <BusyOrErrorCard
-        loading={loading}
-        error={error}
-        noResults={(data && data.chapters && !data.chapters.length) || false}
-      />
-    );
+  const hasChapters = !!data?.chapters?.length;
+  if (loading || error || !hasChapters) {
+    return <BusyOrErrorCard loading={loading} error={error} noResults={!hasChapters} />;
   }
+
   return (
     <SectionCardContainer>
-      {data &&
-        data.chapters &&
-        data.chapters.map((c, i: number) =>
-          c ? (
-            <Grid item key={c.id}>
-              <ChapterCard chapter={c} />
-            </Grid>
-          ) : null
-        )}
+      {data?.chapters?.filter(Boolean).map((c) => (
+        <Grid item key={c.id}>
+          <ChapterCard chapter={c} />
+        </Grid>
+      ))}
     </SectionCardContainer>
   );
 };