implement multiple authors to articles and assign other user as authors.

webkom · Feb 14, 2023 · b32b3c8 · b32b3c8
1 parent 20d1da9
commit b32b3c8
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 32 deletions.
diff --git a/app/components/Form/ObjectPermissions.tsx b/app/components/Form/ObjectPermissions.tsx
@@ -24,12 +24,14 @@ const ObjectPermissions = ({
   canEditGroups,
   canViewGroups,
   requireAuth,
+  author,
   ...props
 }: {
   canEditUsers?: any;
   canEditGroups?: any;
   canViewGroups?: any;
   requireAuth?: any;
+  author?: any;
 }) => {
   return [
     requireAuth && (
@@ -41,6 +43,15 @@ const ObjectPermissions = ({
         />
       </Tooltip>
     ),
+    author && (
+      <SelectInput.AutocompleteField
+        {...author}
+        label="Forfattere"
+        isMulti
+        placeholder="Velg forfattere"
+        filter={['users.user']}
+      />
+    ),
     canEditGroups && (
       <SelectInput.AutocompleteField
         {...canEditGroups}
@@ -78,10 +89,12 @@ export const normalizeObjectPermissions = ({
   canViewGroups: initialCanViewGroups,
   canEditGroups: initialCanEditGroups,
   canEditUsers: initialCanEditUsers,
+  author: initialAuthors,
 }: Record<string, any>) => {
   const canEditUsers = initialCanEditUsers && initialCanEditUsers.map(toIds);
   const canViewGroups = initialCanViewGroups && initialCanViewGroups.map(toIds);
   const canEditGroups = initialCanEditGroups && initialCanEditGroups.map(toIds);
+  const author = initialAuthors && initialAuthors.map(toIds);
   return {
     requireAuth: !!requireAuth,
     ...(canEditUsers
@@ -100,12 +113,19 @@ export const normalizeObjectPermissions = ({
           canViewGroups,
         }
       : {}),
+
+    ...(author
+      ? {
+          author,
+        }
+      : {}),
   };
 };
 export const objectPermissionsToInitialValues = ({
   canViewGroups: initialCanViewGroups,
   canEditGroups: initialCanEditGroups,
   canEditUsers: initialCanEditUsers,
+  author: initialAuthors,
 }: Record<string, any>) => {
   const canEditGroups =
     initialCanEditGroups &&
@@ -122,6 +142,11 @@ export const objectPermissionsToInitialValues = ({
     initialCanEditUsers
       .filter(Boolean)
       .map((user) => ({ ...user, label: user.fullName, value: user.id }));
+  const author =
+    initialAuthors &&
+    initialAuthors
+      .filter(Boolean)
+      .map((user) => ({ ...user, label: user.fullName, value: user.id }));
   return {
     ...(canEditUsers
       ? {
@@ -139,12 +164,18 @@ export const objectPermissionsToInitialValues = ({
           canViewGroups,
         }
       : {}),
+    ...(author
+      ? {
+          author,
+        }
+      : {}),
   };
 };
 export const objectPermissionsInitialValues = {
   requireAuth: true,
   canEditUsers: [],
   canEditGroups: [],
   canViewGroups: [],
+  author: [],
 };
 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,
+  author: [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/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 author = article?.author?.map((e) => {
+    return selectUserById(state, {
+      userId: e,
+    });
   });
   const emojis = selectEmojis(state);
   return {

diff --git a/app/routes/articles/ArticleEditRoute.ts b/app/routes/articles/ArticleEditRoute.ts
@@ -9,6 +9,7 @@ import {
 import { objectPermissionsToInitialValues } from 'app/components/Form/ObjectPermissions';
 import { LoginPage } from 'app/components/LoginForm';
 import { selectArticleById } from 'app/reducers/articles';
+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 +20,24 @@ const mapStateToProps = (state, props) => {
   const article = selectArticleById(state, {
     articleId,
   });
+  const author = article?.author?.map((e) => {
+    return selectUserById(state, {
+      userId: e,
+    });
+  });
+  console.log(article);
   return {
     article,
     articleId,
     isNew: false,
     initialValues: {
       ...article,
-      ...objectPermissionsToInitialValues(article),
+      ...objectPermissionsToInitialValues({
+        canViewGroups: article.canViewGroups,
+        canEditGroups: article.canEditGroups,
+        canEditUsers: article.canEditUsers,
+        author: author,
+      }),
       tags: (article.tags || []).map((tag) => ({
         label: tag,
         value: tag,

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

diff --git a/app/routes/articles/components/ArticleDetail.tsx b/app/routes/articles/components/ArticleDetail.tsx
@@ -22,7 +22,7 @@ type Props = {
   article: DetailedArticle | AdminDetailedArticle;
   comments: Comment[];
   loggedIn: boolean;
-  author: DetailedUser;
+  author: Array<DetailedUser>;
   currentUser: CurrentUser;
   deleteComment: (id: ID, contentTarget: string) => Promise<void>;
   emojis: Array<EmojiEntity>;
@@ -70,16 +70,31 @@ 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{' '}
+            {author &&
+              author?.map((e) => {
+                return (
+                  <span key={e.username}>
+                    <Link
+                      to={`/users/${e.username}`}
+                      className={styles.overviewAuthor}
+                    >
+                      {' '}
+                      {e.fullName}
+                    </Link>
+                    {e === author[author.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',
+            'author',
           ]}
           component={ObjectPermissions}
         />
@@ -192,12 +193,12 @@ const onSubmit = (
     ...normalizeObjectPermissions(data),
     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,
   };
+  body.author = body.author?.length !== 0 ? body.author : [currentUser.id];
   return submitArticle(body);
 };
 

diff --git a/app/routes/articles/components/Overview.tsx b/app/routes/articles/components/Overview.tsx
@@ -24,17 +24,21 @@ const OverviewItem = ({ article }: { article: ArticleWithAuthorDetails }) => (
     </h2>
 
     <span className={styles.itemInfo}>
-      {article.author.id && (
-        <span>
-          <Link
-            to={`/users/${article.author.username}`}
-            className={styles.overviewAuthor}
-          >
-            {' '}
-            {article.author.fullName}
-          </Link>{' '}
-        </span>
-      )}
+      {article?.author &&
+        article?.author?.map((e) => {
+          return (
+            <span key={e.username}>
+              <Link
+                to={`/users/${e.username}`}
+                className={styles.overviewAuthor}
+              >
+                {' '}
+                {e.fullName}
+              </Link>{' '}
+            </span>
+          );
+        })}
+
       <Time time={article.createdAt} format="DD.MM.YYYY HH:mm" />
       <Tags className={styles.tagline}>
         {article.tags.map((tag) => (

diff --git a/app/store/models/Article.d.ts b/app/store/models/Article.d.ts
@@ -10,7 +10,7 @@ interface CompleteArticle {
   title: string;
   cover: string;
   coverPlaceholder: string;
-  author: ID;
+  author: Array<ID>;
   description: string;
   comments: ID[];
   contentTarget: ContentTarget;

diff --git a/app/types.ts b/app/types.ts
@@ -1,4 +1,5 @@
 import type { RootState } from 'app/store/createRootReducer';
+import type { ID } from './models';
 import type { ThunkAction } from '@reduxjs/toolkit';
 import type { JwtPayload } from 'jwt-decode';
 
@@ -12,7 +13,7 @@ export type EntityID = number;
 export type ArticleEntity = {
   id: EntityID;
   title: string;
-  author: number;
+  author: Array<ID>;
   content: string;
   tags: Array<string>;
   cover: string;