fix: refactor authorboxes to single component

Author: drodil

plugins/qeta-react/src/components/AnswerCard/AnswerCard.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { VoteButtons } from '../Buttons/VoteButtons';
 import { AnswerForm } from '../AnswerForm';
-import { AuthorBox } from '../AuthorBox/AuthorBox';
 import { CommentSection } from '../CommentSection/CommentSection';
 import { LinkButton } from '../Buttons/LinkButton';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -23,6 +22,7 @@ import {
 } from '@material-ui/core';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { qetaTranslationRef } from '../../translation.ts';
+import { AuthorBoxes } from '../AuthorBox/AuthorBoxes.tsx';
 
 export type AnswerCardClassKeys =
   | 'root'
@@ -181,29 +181,7 @@ export const AnswerCard = (props: {
                         </Box>
                       )}
                     </Box>
-                    <Box
-                      display="flex"
-                      minWidth={220}
-                      style={{ gap: '8px' }}
-                      ml={1}
-                    >
-                      {answerEntity.updated && answerEntity.updatedBy && (
-                        <AuthorBox
-                          userEntityRef={answerEntity.updatedBy}
-                          time={answerEntity.updated}
-                          label={t('authorBox.updatedAtTime')}
-                          expert={false}
-                          anonymous={answerEntity.anonymous}
-                        />
-                      )}
-                      <AuthorBox
-                        userEntityRef={answerEntity.author}
-                        time={answerEntity.created}
-                        label={t('authorBox.answeredAtTime')}
-                        expert={answerEntity.expert}
-                        anonymous={answerEntity.anonymous}
-                      />
-                    </Box>
+                    <AuthorBoxes entity={answerEntity} />
                   </Box>
                 </>
               )}

plugins/qeta-react/src/components/AuthorBox/AuthorBoxes.tsx

@@ -0,0 +1,44 @@
+import {
+  Answer,
+  PostAnswerEntity,
+  QetaIdEntity,
+} from '@drodil/backstage-plugin-qeta-common';
+import { Box } from '@material-ui/core';
+import { AuthorBox } from './AuthorBox.tsx';
+import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
+import { qetaTranslationRef } from '../../translation.ts';
+
+function isAnswer(entity: QetaIdEntity): entity is Answer {
+  return 'postId' in entity && 'correct' in entity;
+}
+
+export const AuthorBoxes = (props: { entity: PostAnswerEntity }) => {
+  const entity = props.entity;
+  const { t } = useTranslationRef(qetaTranslationRef);
+
+  return (
+    <Box
+      display="flex"
+      minWidth={220}
+      style={{ gap: '8px', justifyContent: 'flex-end' }}
+      ml={1}
+    >
+      {entity.updated && entity.updatedBy && (
+        <AuthorBox
+          userEntityRef={entity.updatedBy}
+          time={entity.updated}
+          label={t('authorBox.updatedAtTime')}
+          expert={false}
+          anonymous={entity.anonymous}
+        />
+      )}
+      <AuthorBox
+        userEntityRef={entity.author}
+        time={entity.created}
+        label={t('authorBox.answeredAtTime')}
+        expert={isAnswer(entity) ? entity.expert : false}
+        anonymous={entity.anonymous}
+      />
+    </Box>
+  );
+};

plugins/qeta-react/src/components/QuestionCard/QuestionCard.tsx

@@ -9,7 +9,6 @@ import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/Edit';
 import RestoreIcon from '@material-ui/icons/Restore';
 import { FavoriteButton } from '../Buttons/FavoriteButton';
-import { AuthorBox } from '../AuthorBox/AuthorBox';
 import { TagsAndEntities } from '../TagsAndEntities/TagsAndEntities';
 import { CommentSection } from '../CommentSection/CommentSection';
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
@@ -30,6 +29,7 @@ import {
 } from '@material-ui/core';
 import { useIsModerator } from '../../hooks';
 import { qetaApiRef } from '../../api.ts';
+import { AuthorBoxes } from '../AuthorBox/AuthorBoxes.tsx';
 
 export type QuestionCardClassKeys =
   | 'root'
@@ -185,27 +185,7 @@ export const QuestionCard = (props: { question: PostResponse }) => {
                     )}
                   </Box>
                 </Box>
-                <Box
-                  display="flex"
-                  minWidth={230}
-                  style={{ gap: '8px' }}
-                  ml={1}
-                >
-                  {questionEntity.updated && questionEntity.updatedBy && (
-                    <AuthorBox
-                      userEntityRef={questionEntity.updatedBy}
-                      time={questionEntity.updated}
-                      label={t('authorBox.updatedAtTime')}
-                      anonymous={questionEntity.anonymous}
-                    />
-                  )}
-                  <AuthorBox
-                    userEntityRef={questionEntity.author}
-                    time={questionEntity.created}
-                    label={t('authorBox.postedAtTime')}
-                    anonymous={questionEntity.anonymous}
-                  />
-                </Box>
+                <AuthorBoxes entity={questionEntity} />
               </Box>
             </Grid>
           </Grid>