implement multiple authors to articles and assign other user as autho…

…rs and refactor some code
webkom · Feb 28, 2023 · b962f02 · b962f02
1 parent 20d1da9
commit b962f02
Show file tree

Hide file tree

Showing 12 changed files with 140 additions and 106 deletions.
diff --git a/app/components/Form/ObjectPermissions.tsx b/app/components/Form/ObjectPermissions.tsx
@@ -1,5 +1,6 @@
 import { SelectInput, CheckBox } from 'app/components/Form';
 import Tooltip from 'app/components/Tooltip';
+import type { PublicGroup } from 'app/store/models/Group';
 
 /*
  * Usage inside redux-form:
@@ -24,12 +25,14 @@ const ObjectPermissions = ({
   canEditGroups,
   canViewGroups,
   requireAuth,
+  authors,
   ...props
 }: {
-  canEditUsers?: any;
-  canEditGroups?: any;
-  canViewGroups?: any;
-  requireAuth?: any;
+  canEditUsers?: PublicGroup[];
+  canEditGroups?: PublicGroup[];
+  canViewGroups?: PublicGroup[];
+  requireAuth?: boolean;
+  authors?: number[];
 }) => {
   return [
     requireAuth && (
@@ -41,6 +44,15 @@ const ObjectPermissions = ({
         />
       </Tooltip>
     ),
+    authors && (
+      <SelectInput.AutocompleteField
+        {...authors}
+        label="Forfattere"
+        isMulti
+        placeholder="Velg forfattere"
+        filter={['users.user']}
+      />
+    ),
     canEditGroups && (
       <SelectInput.AutocompleteField
         {...canEditGroups}
@@ -78,73 +90,51 @@ export const normalizeObjectPermissions = ({
   canViewGroups: initialCanViewGroups,
   canEditGroups: initialCanEditGroups,
   canEditUsers: initialCanEditUsers,
+  authors: initialAuthors,
+  currentUser: currentUser,
 }: Record<string, any>) => {
-  const canEditUsers = initialCanEditUsers && initialCanEditUsers.map(toIds);
-  const canViewGroups = initialCanViewGroups && initialCanViewGroups.map(toIds);
-  const canEditGroups = initialCanEditGroups && initialCanEditGroups.map(toIds);
+  const authors = initialAuthors?.length
+    ? initialAuthors?.map(toIds)
+    : [currentUser.id];
+
   return {
     requireAuth: !!requireAuth,
-    ...(canEditUsers
-      ? {
-          canEditUsers,
-        }
-      : {}),
-    //$FlowFixMe
-    ...(canEditGroups
-      ? {
-          canEditGroups,
-        }
-      : {}),
-    ...(canViewGroups
-      ? {
-          canViewGroups,
-        }
-      : {}),
+    canEditUsers: initialCanEditUsers?.map(toIds) ?? {},
+    canViewGroups: initialCanViewGroups?.map(toIds) ?? {},
+    canEditGroups: initialCanEditGroups?.map(toIds) ?? {},
+    authors: authors,
   };
 };
-export const objectPermissionsToInitialValues = ({
+export const objectToInitialValues = ({
   canViewGroups: initialCanViewGroups,
   canEditGroups: initialCanEditGroups,
   canEditUsers: initialCanEditUsers,
+  authors: initialAuthors,
 }: Record<string, any>) => {
-  const canEditGroups =
-    initialCanEditGroups &&
-    initialCanEditGroups
-      .filter(Boolean)
-      .map((group) => ({ ...group, label: group.name, value: group.id }));
-  const canViewGroups =
-    initialCanViewGroups &&
-    initialCanViewGroups
-      .filter(Boolean)
-      .map((group) => ({ ...group, label: group.name, value: group.id }));
-  const canEditUsers =
-    initialCanEditUsers &&
-    initialCanEditUsers
-      .filter(Boolean)
-      .map((user) => ({ ...user, label: user.fullName, value: user.id }));
+  const canEditGroups = initialCanEditGroups
+    ?.filter(Boolean)
+    .map((group) => ({ ...group, label: group.name, value: group.id }));
+  const canViewGroups = initialCanViewGroups
+    ?.filter(Boolean)
+    .map((group) => ({ ...group, label: group.name, value: group.id }));
+  const canEditUsers = initialCanEditUsers
+    ?.filter(Boolean)
+    .map((user) => ({ ...user, label: user.fullName, value: user.id }));
+  const authors = initialAuthors
+    ?.filter(Boolean)
+    .map((user) => ({ ...user, label: user.fullName, value: user.id }));
   return {
-    ...(canEditUsers
-      ? {
-          canEditUsers,
-        }
-      : {}),
-    //$FlowFixMe
-    ...(canEditGroups
-      ? {
-          canEditGroups,
-        }
-      : {}),
-    ...(canViewGroups
-      ? {
-          canViewGroups,
-        }
-      : {}),
+    canEditUsers: canEditUsers ?? {},
+    canEditGroups: canEditGroups ?? {},
+    canViewGroups: canViewGroups ?? {},
+    authors: authors ?? {},
   };
 };
 export const objectPermissionsInitialValues = {
   requireAuth: true,
   canEditUsers: [],
   canEditGroups: [],
   canViewGroups: [],
+  authors: [],
 };
 export default ObjectPermissions;
diff --git a/app/reducers/index.ts b/app/reducers/index.ts
@@ -38,8 +38,9 @@ export const reactionSchema = new schema.Entity('reactions');
 export const articleSchema = new schema.Entity('articles', {
   comments: [commentSchema],
   reactions: [reactionSchema],
-  author: userSchema,
+  authors: [userSchema],
 });
+
 export const galleryPictureSchema = new schema.Entity('galleryPictures', {
   comments: [commentSchema],
 });

diff --git a/app/reducers/users.ts b/app/reducers/users.ts
@@ -70,6 +70,7 @@ export const selectUserById = createSelector(
   (state, props) => props.userId,
   (usersById, userId) => usersById[userId] || {}
 );
+
 export const selectUserByUsername = createSelector(
   (state) => state.users.byId,
   (state, props) => props.username,

diff --git a/app/routes/articles/ArticleCreateRoute.ts b/app/routes/articles/ArticleCreateRoute.ts
@@ -4,17 +4,26 @@ import { compose } from 'redux';
 import { createArticle } from 'app/actions/ArticleActions';
 import { uploadFile } from 'app/actions/FileActions';
 import { LoginPage } from 'app/components/LoginForm';
+import { selectCurrentUser } from 'app/reducers/auth';
 import replaceUnlessLoggedIn from 'app/utils/replaceUnlessLoggedIn';
 import ArticleEditor from './components/ArticleEditor';
 
-const mapStateToProps = () => ({
-  isNew: true,
-  article: {},
-  initialValues: {
-    content: '',
-  },
-});
-
+const mapStateToProps = (state, props) => {
+  const currentUser = selectCurrentUser(state);
+  const authors = [currentUser];
+  return {
+    isNew: true,
+    article: {},
+    initialValues: {
+      content: '',
+      authors: authors.map((user) => ({
+        ...user,
+        label: user.fullName,
+        value: user.id,
+      })),
+    },
+  };
+};
 const mapDispatchToProps = {
   submitArticle: createArticle,
   uploadFile,

diff --git a/app/routes/articles/ArticleDetailRoute.ts b/app/routes/articles/ArticleDetailRoute.ts
@@ -25,8 +25,10 @@ const mapStateToProps = (state, props) => {
   const comments = selectCommentsForArticle(state, {
     articleId,
   });
-  const author = selectUserById(state, {
-    userId: article.author,
+  const authors = article?.authors?.map((e) => {
+    return selectUserById(state, {
+      userId: e,
+    });
   });
   const emojis = selectEmojis(state);
   return {
@@ -35,7 +37,7 @@ const mapStateToProps = (state, props) => {
     comments,
     article,
     articleId,
-    author,
+    authors,
     emojis,
   };
 };
@@ -56,7 +58,7 @@ export default compose(
   ),
   connect(mapStateToProps, mapDispatchToProps),
   loadingIndicator(['article.content']),
-  helmet((props: { article: PublicArticle; author: PublicUser }, config) => {
+  helmet((props: { article: PublicArticle; authors: PublicUser }, config) => {
     const tags = props.article.tags.map((content) => ({
       content,
       property: 'article:tag',
@@ -104,8 +106,8 @@ export default compose(
         content: props.article.description,
       },
       {
-        property: 'article:author',
-        content: `${config.webUrl}/users/${props.author.username}`,
+        property: 'article:authors',
+        content: `${config.webUrl}/users/${props.authors.username}`,
       },
       ...tags,
     ];

diff --git a/app/routes/articles/ArticleEditRoute.ts b/app/routes/articles/ArticleEditRoute.ts
@@ -6,9 +6,11 @@ import {
   editArticle,
   deleteArticle,
 } from 'app/actions/ArticleActions';
-import { objectPermissionsToInitialValues } from 'app/components/Form/ObjectPermissions';
+import { objectToInitialValues } from 'app/components/Form/ObjectPermissions';
 import { LoginPage } from 'app/components/LoginForm';
 import { selectArticleById } from 'app/reducers/articles';
+import { selectCurrentUser } from 'app/reducers/auth';
+import { selectUserById } from 'app/reducers/users';
 import loadingIndicator from 'app/utils/loadingIndicator';
 import replaceUnlessLoggedIn from 'app/utils/replaceUnlessLoggedIn';
 import withPreparedDispatch from 'app/utils/withPreparedDispatch';
@@ -19,13 +21,24 @@ const mapStateToProps = (state, props) => {
   const article = selectArticleById(state, {
     articleId,
   });
+
+  const currentUser = selectCurrentUser(state);
+  const authors = article?.authors?.length
+    ? article.authors.map((e) => selectUserById(state, { userId: e }))
+    : [currentUser];
+
   return {
     article,
     articleId,
     isNew: false,
     initialValues: {
       ...article,
-      ...objectPermissionsToInitialValues(article),
+      ...objectToInitialValues({
+        canViewGroups: article.canViewGroups,
+        canEditGroups: article.canEditGroups,
+        canEditUsers: article.canEditUsers,
+        authors: authors,
+      }),
       tags: (article.tags || []).map((tag) => ({
         label: tag,
         value: tag,

diff --git a/app/routes/articles/ArticleListRoute.ts b/app/routes/articles/ArticleListRoute.ts
@@ -12,8 +12,8 @@ import type { PublicUser } from 'app/store/models/User';
 import withPreparedDispatch from 'app/utils/withPreparedDispatch';
 import Overview from './components/Overview';
 
-export type ArticleWithAuthorDetails = Omit<PublicArticle, 'author'> & {
-  author: PublicUser;
+export type ArticleWithAuthorDetails = Omit<PublicArticle, 'authors'> & {
+  authors: Array<PublicUser>;
 };
 
 const mapStateToProps = (state, props) => {
@@ -34,8 +34,10 @@ const mapStateToProps = (state, props) => {
     }
   ).map((article) => ({
     ...article,
-    author: selectUserById(state, {
-      userId: article.author,
+    authors: article?.authors?.map((e) => {
+      return selectUserById(state, {
+        userId: e,
+      });
     }),
   }));
 

diff --git a/app/routes/articles/components/ArticleDetail.tsx b/app/routes/articles/components/ArticleDetail.tsx
@@ -22,15 +22,15 @@ type Props = {
   article: DetailedArticle | AdminDetailedArticle;
   comments: Comment[];
   loggedIn: boolean;
-  author: DetailedUser;
+  authors: DetailedUser[];
   currentUser: CurrentUser;
   deleteComment: (id: ID, contentTarget: string) => Promise<void>;
   emojis: Array<EmojiEntity>;
   addReaction: (arg0: {
     emoji: string;
     contentTarget: string;
   }) => Promise<unknown>;
-  reactionsGrouped: Array<ReactionEntity>;
+  reactionsGrouped: ReactionEntity[];
   deleteReaction: (arg0: {
     reactionId: ID;
     contentTarget: string;
@@ -41,7 +41,7 @@ type Props = {
 
 const ArticleDetail = ({
   article,
-  author,
+  authors,
   loggedIn,
   currentUser,
   comments,
@@ -70,16 +70,30 @@ const ArticleDetail = ({
         )}
       </NavigationTab>
 
-      <div className={styles.articleDetails}>
-        <span className={styles.detail}>
-          Skrevet av
-          <Link to={`/users/${author.username}`}> {author.fullName}</Link>
-        </span>
-        <span className={styles.detail}>
-          {moment(article.createdAt).format('lll')}
-        </span>
-      </div>
-
+      {
+        <div className={styles.articleDetails}>
+          <span className={styles.detail}>
+            Skrevet av{' '}
+            {authors?.map((e, i) => {
+              return (
+                <span key={e.username}>
+                  <Link
+                    to={`/users/${e.username}`}
+                    className={styles.overviewAuthor}
+                  >
+                    {' '}
+                    {e.fullName}
+                  </Link>
+                  {i === authors.length - 1 ? '' : ','}
+                </span>
+              );
+            })}
+          </span>
+          <span className={styles.detail}>
+            {moment(article.createdAt).format('lll')}
+          </span>
+        </div>
+      }
       <DisplayContent content={article.content} />
 
       <Tags>

diff --git a/app/routes/articles/components/ArticleEditor.tsx b/app/routes/articles/components/ArticleEditor.tsx
@@ -137,6 +137,7 @@ const ArticleEditor = ({
             'canViewGroups',
             'canEditUsers',
             'canEditGroups',
+            'authors',
           ]}
           component={ObjectPermissions}
         />
@@ -189,15 +190,15 @@ const onSubmit = (
           cover: data.cover,
         }
       : {}),
-    ...normalizeObjectPermissions(data),
+    ...normalizeObjectPermissions({ ...data, currentUser: currentUser }),
     youtubeUrl: data.youtubeUrl,
     title: data.title,
-    author: currentUser.id,
     description: data.description,
     content: data.content,
     tags: (data.tags || []).map((tag) => tag.value.toLowerCase()),
     pinned: data.pinned,
   };
+
   return submitArticle(body);
 };