All files / pages/Articles ArticlesEditPage.jsx

100% Statements 59/59
100% Branches 7/7
100% Functions 4/4
100% Lines 59/59

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 761x 1x 1x 1x 1x   1x 7x   7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x     7x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x   7x 2x 2x   7x 7x 7x 7x 7x     7x   7x 2x 2x   7x 2x 2x   5x 5x 5x 5x 5x 7x 7x 7x 7x           7x  
import BasicLayout from "main/layouts/BasicLayout/BasicLayout";
import ArticlesForm from "main/components/Articles/ArticlesForm";
import { Navigate, useParams } from "react-router";
import { useBackend, useBackendMutation } from "main/utils/useBackend";
import { toast } from "react-toastify";
 
export default function ArticlesEditPage({ storybook = false }) {
  const { id } = useParams();
 
  const {
    data: article,
    _error,
    _status,
  } = useBackend(
    // Stryker disable next-line all : rely on react-query caching for GET
    [`/api/articles?id=${id}`],
    {
      // Stryker disable next-line all : GET is the default, mutating this adds no value
      method: "GET",
      url: "/api/articles",
      params: { id },
    },
  );
 
  const objectToAxiosPutParams = (article) => ({
    url: "/api/articles",
    method: "PUT",
    params: {
      id: article.id,
    },
    data: {
      title: article.title,
      url: article.url,
      explanation: article.explanation,
      submitterEmail: article.submitterEmail,
      dateAdded: article.dateAdded,
    },
  });
 
  const onSuccess = (article) => {
    toast(`Article Updated - id: ${article.id} title: ${article.title}`);
  };
 
  const mutation = useBackendMutation(
    objectToAxiosPutParams,
    { onSuccess },
    // Stryker disable next-line all : mutation invalidates cached article detail
    [`/api/articles?id=${id}`],
  );
 
  const { isSuccess } = mutation;
 
  const onSubmit = async (data) => {
    mutation.mutate(data);
  };
 
  if (isSuccess && !storybook) {
    return <Navigate to="/articles" />;
  }
 
  return (
    <BasicLayout>
      <div className="pt-2">
        <h1>Edit Article</h1>
        {article && (
          <ArticlesForm
            submitAction={onSubmit}
            buttonLabel="Update"
            initialContents={article}
          />
        )}
      </div>
    </BasicLayout>
  );
}