[E] Auto assign title + hide field for markdown

client/src/frontend/components/collecting/reading-group/edit/CollectionEditor/CategoryCreator/index.js

@@ -1,44 +1,53 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
-import { useUID } from "react-uid";
+import { useUID, useUIDSeed } from "react-uid";
 import IconComposer from "global/components/utility/IconComposer";
 import * as Styled from "./styles";
 
-function CategoryCreator({ onSubmit, isMarkdown }) {
+function CategoryCreator({ onSubmit, isMarkdown, count }) {
   const { t } = useTranslation();
+
   const uid = useUID();
+  const seed = useUIDSeed();
+
   const [inputValue, setInputValue] = useState("");
 
   function handleSubmit(event) {
     event.preventDefault();
-    onSubmit({ title: inputValue, markdownOnly: isMarkdown });
+    const title = isMarkdown ? `markdown_${seed(count)}` : inputValue;
+    onSubmit({ title, markdownOnly: isMarkdown });
     setInputValue("");
   }
 
-  const label = isMarkdown
+  const buttonLabel = isMarkdown
     ? t("forms.category.add_markdown")
-    : t("forms.category.create");
+    : t("actions.add");
   const placeholder = isMarkdown
     ? t("forms.category.title_placeholder")
     : t("forms.category.name_placeholder");
 
+  const ButtonComponent = isMarkdown ? Styled.MarkdownButton : Styled.Button;
+
   return (
     <Styled.CategoryCreator onSubmit={handleSubmit}>
-      <Styled.Label htmlFor={uid}>{label}:</Styled.Label>
+      {!isMarkdown && (
+        <Styled.Label htmlFor={uid}>{t("forms.category.create")}</Styled.Label>
+      )}
       <Styled.InputWrapper>
         <Styled.Input
           id={uid}
           type="text"
           value={inputValue}
           onChange={({ target: { value } }) => setInputValue(value)}
           placeholder={placeholder}
-          required
+          required={!isMarkdown}
+          hidden={isMarkdown}
         />
-        <Styled.Button type="submit">
+        <ButtonComponent type="submit">
           <IconComposer icon="circlePlus32" size={32} />
-          <span>{t("actions.add")}</span>
-        </Styled.Button>
+          <span>{buttonLabel}</span>
+        </ButtonComponent>
       </Styled.InputWrapper>
     </Styled.CategoryCreator>
   );
@@ -48,7 +57,9 @@ CategoryCreator.displayName =
   "ReadingGroup.Collecting.CollectionEditor.CategoryCreator";
 
 CategoryCreator.propTypes = {
-  onSubmit: PropTypes.func.isRequired
+  onSubmit: PropTypes.func.isRequired,
+  isMarkdown: PropTypes.bool,
+  count: PropTypes.number
 };
 
 export default CategoryCreator;

client/src/frontend/components/collecting/reading-group/edit/CollectionEditor/CategoryCreator/styles.js

@@ -11,6 +11,8 @@ const inputHeight = collectableMinHeight;
 export const CategoryCreator = styled.form`
   --label-color: var(--color-base-neutral80);
   --label-margin-bottom: 20px;
+
+  align-self: end;
 `;
 
 export const Label = styled.label`
@@ -70,3 +72,8 @@ export const Button = styled.button`
     margin-inline-start: 0.75em;
   }
 `;
+
+export const MarkdownButton = styled(Button)`
+  border-radius: var(--box-border-radius);
+  margin-inline-start: auto;
+`;

client/src/frontend/components/collecting/reading-group/edit/CollectionEditor/SortableCategories/parts/CategoryEdit.js

@@ -16,7 +16,7 @@ function CategoryEdit({ category, groupId, onSuccess, onCancel }) {
 
   const nameLabel = isMarkdown ? t("common.title") : t("forms.category.name");
   const descriptionLabel = isMarkdown
-    ? t("common.body")
+    ? t("common.content")
     : t("forms.category.description");
   const descriptionPlaceholder = isMarkdown
     ? t("forms.category.markdown_body_placeholder")
@@ -34,12 +34,14 @@ function CategoryEdit({ category, groupId, onSuccess, onCancel }) {
       className="form-secondary"
     >
       <Form.FieldGroup>
-        <Form.TextInput
-          wide
-          label={nameLabel}
-          name="attributes[title]"
-          placeholder={t("forms.category.name_placeholder")}
-        />
+        {!isMarkdown && (
+          <Form.TextInput
+            wide
+            label={nameLabel}
+            name="attributes[title]"
+            placeholder={t("forms.category.name_placeholder")}
+          />
+        )}
         <Form.TextArea
           wide
           height={122}

client/src/frontend/components/collecting/reading-group/edit/CollectionEditor/SortableCategories/parts/CategoryHeader.js

@@ -17,15 +17,17 @@ function CategoryHeader({
 }) {
   const { t } = useTranslation();
 
+  const { markdownOnly, title } = category?.attributes ?? {};
+
   return (
     <>
       <Collapse initialVisible={initExpanded}>
         <Styled.Header>
-          <Styled.Title>{category?.attributes.title}</Styled.Title>
+          {!markdownOnly && <Styled.Title>{title}</Styled.Title>}
           {dragProps && (
             <Styled.Actions>
               <CategoryRemove
-                isMarkdown={!!category.attributes.markdownOnly}
+                isMarkdown={!!markdownOnly}
                 onRemove={() => onCategoryRemove(category)}
               />
               <Styled.Action as={Collapse.Toggle}>

client/src/frontend/components/collecting/reading-group/edit/CollectionEditor/SortableCategories/parts/styles.js

@@ -20,6 +20,7 @@ export const Header = styled.header`
   background-color: var(--box-medium-bg-color);
   border-top-left-radius: var(--box-border-radius);
   border-top-right-radius: var(--box-border-radius);
+  min-block-size: 52px;
 `;
 
 export const Title = styled.h3`
@@ -40,6 +41,10 @@ export const Actions = styled.div`
   align-items: center;
   margin-inline-start: 10px;
   color: var(--color);
+
+  &:only-child {
+    margin-inline-start: auto;
+  }
 `;
 
 export const Action = styled.div`

client/src/frontend/components/collecting/reading-group/edit/CollectionEditor/index.js

@@ -159,7 +159,11 @@ function CollectionEditor({
     <Styled.Editor>
       <Styled.CategoryInputs>
         <CategoryCreator onSubmit={createCategory} />
-        <CategoryCreator onSubmit={createCategory} isMarkdown />
+        <CategoryCreator
+          onSubmit={createCategory}
+          count={categories?.length ?? 0}
+          isMarkdown
+        />
       </Styled.CategoryInputs>
       <SortableCategories
         collection={collection}

client/src/frontend/components/collecting/reading-group/edit/CollectionEditor/styles.js

@@ -23,5 +23,5 @@ export const CategoryInputs = styled.div`
   row-gap: 25px;
   grid-template-columns: 1fr;
 
-  ${respond(`grid-template-columns: 1fr 1fr;`, 85)}
+  ${respond(`grid-template-columns: 1fr auto;`, 85)}
 `;

client/src/frontend/components/collecting/reading-group/static/Category/index.js

@@ -41,7 +41,7 @@ function Category({ category, mappings, responses, onUncollect }) {
   return (
     <CategoryComponent>
       <Styled.Header>
-        <Styled.Title>{title}</Styled.Title>
+        {!markdownOnly && <Styled.Title>{title}</Styled.Title>}
         {descriptionFormatted && (
           <Styled.Description
             dangerouslySetInnerHTML={{ __html: descriptionFormatted }}