feat: allow editing of answers

drodil · drodil · commit 93d4870d4720 · 2023-01-02T10:02:23.000+02:00
closes #5
diff --git a/plugins/qeta-backend/src/database/DatabaseQetaStore.ts b/plugins/qeta-backend/src/database/DatabaseQetaStore.ts
@@ -562,6 +562,24 @@ export class DatabaseQetaStore implements QetaStore {
     return this.getAnswer(answers[0].id);
   }
 
+  async updateAnswer(
+    user_ref: string,
+    questionId: number,
+    answerId: number,
+    answer: string,
+  ): Promise<MaybeAnswer> {
+    const rows = await this.db('answers')
+      .where('answers.id', '=', answerId)
+      .where('answers.questionId', '=', questionId)
+      .where('answers.author', '=', user_ref)
+      .update({ content: answer, updatedBy: user_ref, updated: new Date() });
+
+    if (!rows) {
+      return null;
+    }
+    return this.getAnswer(answerId);
+  }
+
   async getAnswer(answerId: number): Promise<MaybeAnswer> {
     const answers = await this.getAnswerBaseQuery().where('id', '=', answerId);
     return this.mapAnswer(answers[0], true);
diff --git a/plugins/qeta-backend/src/database/QetaStore.ts b/plugins/qeta-backend/src/database/QetaStore.ts
@@ -156,6 +156,20 @@ export interface QetaStore {
     answer: string,
   ): Promise<MaybeAnswer>;
 
+  /**
+   * Update answer to a question
+   * @param user_ref user name of the user updating the answer
+   * @param questionId question id
+   * @param answerId answer id
+   * @param answer answer content
+   */
+  updateAnswer(
+    user_ref: string,
+    questionId: number,
+    answerId: number,
+    answer: string,
+  ): Promise<MaybeAnswer>;
+
   /** Get answer by id
    * @param answerId answer id
    */
diff --git a/plugins/qeta-backend/src/service/router.test.ts b/plugins/qeta-backend/src/service/router.test.ts
@@ -66,6 +66,7 @@ describe('createRouter', () => {
     markAnswerIncorrect: jest.fn(),
     getTags: jest.fn(),
     updateQuestion: jest.fn(),
+    updateAnswer: jest.fn(),
   };
 
   const getIdentityMock = jest
diff --git a/plugins/qeta-backend/src/service/router.ts b/plugins/qeta-backend/src/service/router.ts
@@ -300,6 +300,58 @@ export async function createRouter({
     response.send(answer);
   });
 
+  // POST /questions/:id/answers/:answerId
+  router.post(`/questions/:id/answers/:answerId`, async (request, response) => {
+    // Validation
+    const validateRequestBody = ajv.compile(PostAnswerSchema);
+    if (!validateRequestBody(request.body)) {
+      response
+        .status(400)
+        .send({ errors: validateRequestBody.errors, type: 'body' });
+      return;
+    }
+
+    const username = await getUsername(request);
+    // Act
+    const answer = await database.updateAnswer(
+      username,
+      Number.parseInt(request.params.id, 10),
+      Number.parseInt(request.params.answerId, 10),
+      request.body.answer,
+    );
+
+    if (!answer) {
+      response.sendStatus(404);
+      return;
+    }
+
+    mapAdditionalFields(username, answer);
+
+    // Response
+    response.status(201);
+    response.send(answer);
+  });
+
+  // GET /questions/:id/answers/:answerId
+  router.get(`/questions/:id/answers/:answerId`, async (request, response) => {
+    // Validation
+    // Act
+    const username = await getUsername(request);
+    const answer = await database.getAnswer(
+      Number.parseInt(request.params.answerId, 10),
+    );
+
+    if (answer === null) {
+      response.sendStatus(404);
+      return;
+    }
+
+    mapAdditionalFields(username, answer);
+
+    // Response
+    response.send(answer);
+  });
+
   // DELETE /questions/:id/answers/:answerId
   router.delete(
     '/questions/:id/answers/:answerId',
diff --git a/plugins/qeta/src/api/QetaApi.ts b/plugins/qeta/src/api/QetaApi.ts
@@ -49,4 +49,11 @@ export interface QetaApi {
     id: string,
     question: QuestionRequest,
   ): Promise<QuestionResponse>;
+
+  updateAnswer(id: number, answer: AnswerRequest): Promise<AnswerResponseBody>;
+
+  getAnswer(
+    questionId: string | number | undefined,
+    id: string | number | undefined,
+  ): Promise<AnswerResponseBody>;
 }
diff --git a/plugins/qeta/src/api/QetaClient.ts b/plugins/qeta/src/api/QetaClient.ts
@@ -282,4 +282,44 @@ export class QetaClient implements QetaApi {
 
     return data;
   }
+
+  async updateAnswer(
+    id: number,
+    answer: AnswerRequest,
+  ): Promise<AnswerResponseBody> {
+    const response = await this.fetchApi.fetch(
+      `${this.baseUrl}/api/qeta/questions/${answer.questionId}/answers/${id}`,
+      {
+        method: 'POST',
+        body: JSON.stringify({ answer: answer.answer }),
+        headers: { 'Content-Type': 'application/json' },
+      },
+    );
+    const data = (await response.json()) as AnswerResponseBody;
+
+    if ('errors' in data) {
+      throw new QetaError('Failed to fetch', data.errors);
+    }
+
+    return data;
+  }
+
+  async getAnswer(
+    questionId: string | number | undefined,
+    id: string | number | undefined,
+  ): Promise<AnswerResponseBody> {
+    if (!questionId || !id) {
+      throw new QetaError('Invalid id provided', undefined);
+    }
+    const response = await this.fetchApi.fetch(
+      `${this.baseUrl}/api/qeta/questions/${questionId}/answers/${id}`,
+    );
+    const data = (await response.json()) as AnswerResponseBody;
+
+    if ('errors' in data) {
+      throw new QetaError('Failed to fetch', data.errors);
+    }
+
+    return data;
+  }
 }
diff --git a/plugins/qeta/src/components/QuestionPage/AnswerCard.tsx b/plugins/qeta/src/components/QuestionPage/AnswerCard.tsx
@@ -13,6 +13,9 @@ import { VoteButtons } from './VoteButtons';
 import { useStyles } from '../../utils/hooks';
 import { formatUsername } from '../../utils/utils';
 import { DeleteModal } from '../DeleteModal/DeleteModal';
+import { AnswerForm } from './AnswerForm';
+// @ts-ignore
+import RelativeTime from 'react-relative-time';
 
 export const AnswerCard = (props: {
   answer: AnswerResponse;
@@ -21,39 +24,80 @@ export const AnswerCard = (props: {
   const { answer, question } = props;
   const styles = useStyles();
 
+  const [editMode, setEditMode] = React.useState(false);
+  const [answerEntity, setAnswerEntity] = React.useState(answer);
+
   const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
   const handleDeleteModalOpen = () => setDeleteModalOpen(true);
   const handleDeleteModalClose = () => setDeleteModalOpen(false);
 
+  const onAnswerEdit = (a: AnswerResponse) => {
+    setEditMode(false);
+    setAnswerEntity(a);
+  };
+
   return (
     <Card id={`a${answer.id}`}>
       <CardContent>
         <Grid container spacing={0}>
           <Grid item className={styles.questionCardVote}>
-            <VoteButtons entity={answer} question={question} />
+            <VoteButtons entity={answerEntity} question={question} />
           </Grid>
           <Grid item>
-            <Typography variant="body1" gutterBottom>
-              <MarkdownContent content={answer.content} dialect="gfm" />
-            </Typography>
-            <Box>
-              By{' '}
-              <Link href={`/qeta/users/${answer.author}`}>
-                {formatUsername(answer.author)}
-              </Link>
-            </Box>
-            {answer.own && (
-              <Box className={styles.questionCardActions}>
-                <Link underline="none" href="#" onClick={handleDeleteModalOpen}>
-                  Delete
-                </Link>
-                <DeleteModal
-                  open={deleteModalOpen}
-                  onClose={handleDeleteModalClose}
-                  entity={answer}
-                  question={question}
-                />
-              </Box>
+            {editMode ? (
+              <AnswerForm
+                question={question}
+                onPost={onAnswerEdit}
+                id={answerEntity.id}
+              />
+            ) : (
+              <>
+                <Typography variant="body1" gutterBottom>
+                  <MarkdownContent
+                    content={answerEntity.content}
+                    dialect="gfm"
+                  />
+                </Typography>
+                <Box>
+                  <Typography variant="caption" gutterBottom>
+                    By{' '}
+                    <Link href={`/qeta/users/${answerEntity.author}`}>
+                      {formatUsername(answerEntity.author)}
+                    </Link>{' '}
+                    <RelativeTime value={answerEntity.created} />
+                    {answerEntity.updated && (
+                      <>
+                        {' '}
+                        (updated <RelativeTime value={answerEntity.updated} />)
+                      </>
+                    )}
+                  </Typography>
+                </Box>
+                {answerEntity.own && (
+                  <Box className={styles.questionCardActions}>
+                    <Link
+                      underline="none"
+                      href="#"
+                      onClick={handleDeleteModalOpen}
+                    >
+                      Delete
+                    </Link>
+                    <Link
+                      underline="none"
+                      href="#"
+                      onClick={() => setEditMode(true)}
+                    >
+                      Edit
+                    </Link>
+                    <DeleteModal
+                      open={deleteModalOpen}
+                      onClose={handleDeleteModalClose}
+                      entity={answerEntity}
+                      question={question}
+                    />
+                  </Box>
+                )}
+              </>
             )}
           </Grid>
         </Grid>
diff --git a/plugins/qeta/src/components/QuestionPage/AnswerForm.tsx b/plugins/qeta/src/components/QuestionPage/AnswerForm.tsx
@@ -1,6 +1,6 @@
 import { WarningPanel } from '@backstage/core-components';
 import { Button, Typography } from '@material-ui/core';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useApi } from '@backstage/core-plugin-api';
 import {
   AnswerRequest,
@@ -12,11 +12,17 @@ import { useStyles } from '../../utils/hooks';
 import { Controller, useForm } from 'react-hook-form';
 import { MarkdownEditor } from '../MarkdownEditor/MarkdownEditor';
 
+const getDefaultValues = (questionId: number) => {
+  return { questionId, answer: '' };
+};
+
 export const AnswerForm = (props: {
   question: QuestionResponse;
   onPost: (answer: AnswerResponse) => void;
+  id?: number;
 }) => {
-  const { question, onPost } = props;
+  const { question, onPost, id } = props;
+  const [values, setValues] = React.useState(getDefaultValues(question.id));
   const [error, setError] = React.useState(false);
   const qetaApi = useApi(qetaApiRef);
   const styles = useStyles();
@@ -26,9 +32,27 @@ export const AnswerForm = (props: {
     control,
     formState: { errors },
     reset,
-  } = useForm<AnswerRequest>();
+  } = useForm<AnswerRequest>({
+    values,
+    defaultValues: getDefaultValues(question.id),
+  });
 
   const postAnswer = (data: AnswerRequest) => {
+    if (id) {
+      qetaApi
+        .updateAnswer(id, { questionId: question.id, answer: data.answer })
+        .then(a => {
+          if (!a || !('id' in a)) {
+            setError(true);
+            return;
+          }
+          reset();
+          onPost(a);
+        })
+        .catch(_e => setError(true));
+      return;
+    }
+
     qetaApi
       .postAnswer({ questionId: question.id, answer: data.answer })
       .then(a => {
@@ -42,6 +66,22 @@ export const AnswerForm = (props: {
       .catch(_e => setError(true));
   };
 
+  useEffect(() => {
+    if (id) {
+      qetaApi.getAnswer(question.id, id).then(a => {
+        if ('content' in a) {
+          setValues({ questionId: question.id, answer: a.content });
+        } else {
+          setError(true);
+        }
+      });
+    }
+  }, [id, question, qetaApi]);
+
+  useEffect(() => {
+    reset(values);
+  }, [values, reset]);
+
   return (
     <form onSubmit={handleSubmit(postAnswer)}>
       <Typography variant="h6">Your answer</Typography>
@@ -63,7 +103,7 @@ export const AnswerForm = (props: {
         name="answer"
       />
       <Button variant="contained" type="submit" className={styles.postButton}>
-        Post
+        {id ? 'Save' : 'Post'}
       </Button>
     </form>
   );
