Fix favorite repository layout / use react-query for favorite reposit…

…ory toggle

build.gradle

@@ -31,7 +31,7 @@ dependencies {
 }
 
 scmPlugin {
-  scmVersion = "2.20.0"
+  scmVersion = "2.21.1-SNAPSHOT"
   displayName = "Landingpage"
   description = "Creates a personal landingpage for each user"
   author = "Cloudogu GmbH"

src/main/js/FavoriteRepositoryToggleIcon.tsx

@@ -21,11 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC, useEffect, useState } from "react";
+import React, { FC } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { Link, Repository } from "@scm-manager/ui-types";
-import { apiClient, Icon } from "@scm-manager/ui-components";
+import { Repository } from "@scm-manager/ui-types";
+import { Icon } from "@scm-manager/ui-components";
+import { useFavoriteRepository } from "./favoriteRepository";
 
 type Props = {
   repository: Repository;
@@ -35,45 +36,33 @@ type Props = {
 const SpanWithPointer = styled.span`
   pointer-events: all;
   cursor: pointer;
+  z-index: 1;
 `;
 
 const FavoriteRepositoryToggleIcon: FC<Props> = ({ repository, classes }) => {
   const [t] = useTranslation("plugins");
-  const [favorite, setFavorite] = useState(false);
-  const [link, setLink] = useState("");
-
-  useEffect(() => {
-    setFavorite(!!repository?._links?.unfavorize);
-    setLink(getLink(repository));
-  }, []);
-
-  const getLink: (repository: Repository) => string = (repository: Repository) => {
-    const currentLink = (repository?._links?.unfavorize || repository?._links?.favorize) as Link;
-    return currentLink.href;
-  };
+  const { favorize, unfavorize } = useFavoriteRepository(repository);
 
   const toggleFavoriteStatus = () => {
-    apiClient
-      .post(link)
-      .then(() => apiClient.get((repository._links.self as Link).href))
-      .then(response => response.json())
-      .then(updatedRepository => {
-        setFavorite(!favorite);
-        setLink(getLink(updatedRepository));
-      });
+    if (favorize) {
+      favorize();
+    }
+    if (unfavorize) {
+      unfavorize();
+    }
   };
 
   return (
     <SpanWithPointer onClick={() => toggleFavoriteStatus()}>
       <Icon
         title={
-          favorite
+          unfavorize
             ? t("scm-landingpage-plugin.favoriteRepository.unstar")
             : t("scm-landingpage-plugin.favoriteRepository.star")
         }
-        iconStyle={favorite ? "fas" : "far"}
+        iconStyle={unfavorize ? "fas" : "far"}
         name="star"
-        color={favorite ? "warning" : "dark"}
+        color={unfavorize ? "warning" : "dark"}
         className={classes}
       />
     </SpanWithPointer>

src/main/js/data/FavoriteRepositoryCard.tsx

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 import React, { FC } from "react";
-import classNames from "classnames";
 import styled from "styled-components";
 import { RepositoryEntry } from "@scm-manager/ui-components";
 import { RepositoryDataType } from "../types";
@@ -43,11 +42,9 @@ const RepositoryEntryWrapper = styled.div`
 
 const FavoriteRepositoryCard: FC<Props> = ({ data }) => {
   return (
-    <div className={classNames("card-columns", "content")}>
-      <RepositoryEntryWrapper className={classNames("box", "box-link-shadow", "column", "is-clipped")}>
-        <RepositoryEntry repository={data.repository} />
-      </RepositoryEntryWrapper>
-    </div>
+    <RepositoryEntryWrapper>
+      <RepositoryEntry repository={data.repository} />
+    </RepositoryEntryWrapper>
   );
 };
 

src/main/js/favoriteRepository.ts

@@ -0,0 +1,65 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { apiClient } from "@scm-manager/ui-components";
+import { Link, Repository } from "@scm-manager/ui-types";
+import { useMutation, useQueryClient } from "react-query";
+
+export const useFavoriteRepository = (repository: Repository) => {
+  const queryClient = useQueryClient();
+
+  const invalidateQueries = () => {
+    queryClient.invalidateQueries(["repository", repository.namespace, repository.name]);
+    queryClient.invalidateQueries(["landingpage", "myData"]);
+    return queryClient.invalidateQueries(["repositories"]);
+  };
+
+  const { mutate: favorize, isLoading: isLoadingFavorize, error: favorizeError } = useMutation<unknown, Error>(
+    () => {
+      return apiClient.post((repository?._links?.favorize as Link).href, {});
+    },
+    {
+      onSuccess: invalidateQueries
+    }
+  );
+
+  const { mutate: unfavorize, isLoading: isLoadingUnfavorize, error: unfavorizeError } = useMutation<
+    unknown,
+    Error
+  >(
+    () => {
+      return apiClient.post((repository?._links?.unfavorize as Link).href, {});
+    },
+    {
+      onSuccess: invalidateQueries
+    }
+  );
+
+  return {
+    favorize: repository._links.favorize ? () => favorize() : undefined,
+    unfavorize: repository._links.unfavorize ? () => unfavorize() : undefined,
+    isLoading: isLoadingFavorize || isLoadingUnfavorize,
+    error: favorizeError || unfavorizeError
+  };
+};