All files / pages/Articles ArticlesEditPage.jsx

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

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 76 77 781x 1x 1x 1x 1x 1x   1x 6x 6x   6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x     6x 6x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x   6x 2x 2x   6x 6x 6x 6x 6x     6x   6x 2x 2x   6x 2x 2x   4x 4x 4x 4x 4x 6x 6x 6x 6x           6x  
import BasicLayout from "main/layouts/BasicLayout/BasicLayout";
import { useParams, Navigate } from "react-router";
import ArticlesForm from "main/components/Articles/ArticlesForm";
import { useBackend, useBackendMutation } from "main/utils/useBackend";
import { toast } from "react-toastify";
import { normalizeDateTime } from "main/utils/dateUtils";
 
export default function ArticlesEditPage({ storybook = false }) {
  // 取路由 id
  const { id } = useParams();
 
  // 读取当前要编辑的 Article
  const {
    data: article,
    _error,
    _status,
  } = useBackend(
    // Stryker disable next-line all : don't test internal caching of React Query
    [`/api/articles?id=${id}`],
    {
      // Stryker disable next-line all : GET is the default, so mutating this to "" doesn't introduce a bug
      method: "GET",
      url: "/api/articles",
      params: { id },
    }
  );
 
  // PUT 参数构造(注意把 dateAdded 规范成 T00:00:00)
  const objectToAxiosPutParams = (a) => ({
    url: "/api/articles",
    method: "PUT",
    params: { id: a.id },
    data: {
      title: a.title,
      url: a.url,
      explanation: a.explanation,
      email: a.email,
      dateAdded: normalizeDateTime(a.dateAdded),
    },
  });
 
  const onSuccess = (a) => {
    toast(`Article Updated - id: ${a.id} title: ${a.title}`);
  };
 
  const mutation = useBackendMutation(
    objectToAxiosPutParams,
    { onSuccess },
    // Stryker disable next-line all : hard to set up test for caching
    [`/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>
  );
}