Redesign favorite repository layout

CHANGELOG.md

@@ -6,6 +6,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Unreleased
 ### Changed
+- Fix favorite repository layout to match new repository entry ([#35](https://github.com/scm-manager/scm-landingpage-plugin/pull/35))
 - Use react-query instead plain api calls ([#34](https://github.com/scm-manager/scm-landingpage-plugin/pull/34))
 
 ## 1.5.0 - 2021-04-22

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,34 @@ type Props = {
 const SpanWithPointer = styled.span`
   pointer-events: all;
   cursor: pointer;
+  margin-right: 0.25rem;
+  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/data/MyData.tsx

@@ -23,12 +23,12 @@
  */
 import React, { FC, ReactElement } from "react";
 import { useTranslation } from "react-i18next";
-import { ErrorNotification, Loading } from "@scm-manager/ui-components";
+import { ErrorNotification, Loading, Notification } from "@scm-manager/ui-components";
 import styled from "styled-components";
 import { binder } from "@scm-manager/ui-extensions";
 import CollapsibleContainer from "../CollapsibleContainer";
 import { Link, Links } from "@scm-manager/ui-types";
-import { useMyData } from "./myData";
+import { useMyData } from "./useMyData";
 
 const Headline = styled.h3`
   font-size: 1.25rem;
@@ -50,12 +50,21 @@ export type ExtensionProps = {
   emptyMessage?: string;
 };
 
+const Separator = styled.div`
+  border-bottom: 1px solid rgb(219, 219, 219, 0.5);
+  margin: 0 1rem;
+`;
+
+const Box = styled.div`
+  padding: 0.5rem;
+`;
+
 const MyData: FC<Props> = ({ links }) => {
   const [t] = useTranslation("plugins");
   const { data, error, isLoading } = useMyData((links?.landingpageData as Link)?.href);
 
   const renderExtension: (extension: ExtensionProps) => any = extension => {
-    const dataForExtension = data?._embedded.data.filter(data => data.type === extension.type);
+    const dataForExtension = data?._embedded.data.filter(entry => entry.type === extension.type);
 
     if (dataForExtension?.length === 0 && !extension.emptyMessage) {
       return null;
@@ -66,7 +75,17 @@ const MyData: FC<Props> = ({ links }) => {
           separatedEntries={extension.separatedEntries}
           emptyMessage={extension.emptyMessage}
         >
-          {dataForExtension?.map((dataEntry, key) => extension.render(dataEntry, key))}
+          {(dataForExtension?.length || 0) > 0 ? (
+            <Box className="box">
+              {dataForExtension?.map((dataEntry, key) => (
+                <>
+                  {extension.render(dataEntry, key)} {key + 1 !== dataForExtension.length ? <Separator /> : null}
+                </>
+              ))}
+            </Box>
+          ) : (
+            <Notification>{t("scm-landingpage-plugin.favoriteRepository.noData")}</Notification>
+          )}
         </CollapsibleContainer>
       );
     }

src/main/js/data/MyFavoriteRepositoriesData.tsx

@@ -26,7 +26,7 @@ import React from "react";
 import { binder } from "@scm-manager/ui-extensions";
 import { RepositoryDataType } from "../types";
 import FavoriteRepositoryCard from "./FavoriteRepositoryCard";
-import {ExtensionProps} from "./MyData";
+import { ExtensionProps } from "./MyData";
 
 const favoriteRepositoryData: ExtensionProps = {
   render: (data: RepositoryDataType, key: any) => data.repository && <FavoriteRepositoryCard data={data} key={key} />,

src/main/js/events/MyEvents.tsx

@@ -27,7 +27,7 @@ import CollapsibleContainer from "../CollapsibleContainer";
 import { ErrorNotification, Loading } from "@scm-manager/ui-components";
 import MyEvent from "./MyEvent";
 import { Link, Links } from "@scm-manager/ui-types";
-import { useMyEvents } from "./myEvents";
+import { useMyEvents } from "./useMyEvents";
 
 type Props = {
   links: Links;

src/main/js/favoriteRepository.ts

@@ -0,0 +1,50 @@
+/*
+ * 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 = () => {
+    return Promise.all([
+      queryClient.invalidateQueries(["landingpage", "myData"]),
+      queryClient.invalidateQueries(["repository", repository.namespace, repository.name]),
+      queryClient.invalidateQueries(["repositories"])
+    ]).then(() => undefined);
+  };
+
+  const { mutate, isLoading, error } = useMutation<unknown, Error, Link>(link => apiClient.post(link.href, {}), {
+    onSuccess: invalidateQueries
+  });
+
+  return {
+    favorize: repository._links.favorize ? () => mutate(repository._links.favorize as Link) : undefined,
+    unfavorize: repository._links.unfavorize ? () => mutate(repository._links.unfavorize as Link) : undefined,
+    isLoading,
+    error
+  };
+};

src/main/js/tasks/MyTasks.tsx

@@ -27,7 +27,7 @@ import { useTranslation } from "react-i18next";
 import { ErrorNotification, Loading } from "@scm-manager/ui-components";
 import MyTask from "./MyTask";
 import { Link, Links } from "@scm-manager/ui-types";
-import { useMyTasks } from "./myTasks";
+import { useMyTasks } from "./useMyTasks";
 
 type Props = {
   links: Links;