WIP

src/apps/recommendation/recommendation.dev.tsx

@@ -0,0 +1,34 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import Recommendation, {
+  RecommendationEntryProps
+} from "./recommendation.entry";
+import globalTextArgs, {
+  GlobalEntryTextProps
+} from "../../core/storybook/globalTextArgs";
+import serviceUrlArgs from "../../core/storybook/serviceUrlArgs";
+
+export default {
+  title: "Apps / Recommendation",
+  component: Recommendation,
+  argTypes: {
+    titleText: {
+      defaultValue: "Greetings",
+      control: { type: "text" }
+    },
+    introductionText: {
+      defaultValue: "We warmly welcome everybody by saying:",
+      control: { type: "text" }
+    },
+    whatText: {
+      defaultValue: "world",
+      control: { type: "text" }
+    },
+    ...globalTextArgs,
+    ...serviceUrlArgs
+  }
+} as ComponentMeta<typeof Recommendation>;
+
+export const App: ComponentStory<typeof Recommendation> = (
+  args: RecommendationEntryProps & GlobalEntryTextProps
+) => <Recommendation {...args} />;

src/apps/recommendation/recommendation.entry.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { GlobalEntryTextProps } from "../../core/storybook/globalTextArgs";
+import { withText } from "../../core/utils/text";
+import Recommendation from "./recommendation";
+import { withConfig } from "../../core/utils/config";
+import { withUrls } from "../../core/utils/url";
+
+export interface RecommendationEntryProps {
+  titleText: string;
+  introductionText: string;
+  whatText: string;
+  href: string;
+}
+
+const RecommendationEntry: React.FC<
+  RecommendationEntryProps & GlobalEntryTextProps
+> = () => <Recommendation href="#" />;
+
+export default withConfig(withUrls(withText(RecommendationEntry)));

src/apps/recommendation/recommendation.mount.ts

@@ -0,0 +1,4 @@
+import addMount from "../../core/addMount";
+import recommendation from "./recommendation.entry";
+
+addMount({ appName: "recommendation", app: recommendation });

src/apps/recommendation/recommendation.tsx

@@ -0,0 +1,117 @@
+import * as React from "react";
+import clsx from "clsx";
+import { Hello } from "../../components/hello/hello";
+import {
+  Manifestation,
+  useGetMaterialQuery
+} from "../../core/dbc-gateway/generated/graphql";
+import { useText } from "../../core/utils/text";
+import { Work } from "../../core/utils/types/entities";
+import {
+  creatorsToString,
+  flattenCreators,
+  getManifestationPid
+} from "../../core/utils/helpers/general";
+import { Cover } from "../../components/cover/cover";
+import Arrow from "../../components/atoms/icons/arrow/arrow";
+import { useDispatch } from "react-redux";
+import ButtonFavourite, {
+  ButtonFavouriteId
+} from "../../components/button-favourite/button-favourite";
+import { guardedRequest } from "../../core/guardedRequests.slice";
+import { TypedDispatch } from "../../core/store";
+
+export type RecommendationProps = {
+  positionImageRight?: boolean;
+  href: string;
+};
+
+const Recommendation: React.FC<RecommendationProps> = ({
+  positionImageRight,
+  href
+}) => {
+  const t = useText();
+  const { data, isLoading } = useGetMaterialQuery({
+    wid: "work-of:870970-basis:136336282"
+  });
+  const [selectedManifestations, setSelectedManifestations] = React.useState<
+    Manifestation[] | null
+  >(null);
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+  const {
+    work,
+    work: {
+      manifestations: { all: manifestations },
+      relations: { hasReview },
+      creators,
+      workId
+    }
+  } = data as { work: Work };
+
+  const pid = manifestations ? getManifestationPid(manifestations) : null; // Noget med typen
+  const dispatch = useDispatch<TypedDispatch>();
+  console.log("work", work);
+  const author = creatorsToString(flattenCreators(creators), t);
+
+  const addToListRequest = (id: ButtonFavouriteId) => {
+    dispatch(
+      guardedRequest({
+        type: "addFavorite",
+        args: { id },
+        app: "search-result"
+      })
+    );
+  };
+  return (
+    <>
+      <div
+        className={clsx(
+          "recommendation",
+          positionImageRight && "recommendation--reversed"
+        )}
+      >
+        <div className="recommendation__material">
+          <div className="recommended-material">
+            <div className="recommended-material__icon">
+              <ButtonFavourite
+                title={"test"}
+                id={workId}
+                addToListRequest={addToListRequest}
+              />
+            </div>
+
+            {pid && (
+              <div>
+                {" "}
+                <Cover id={pid} size="large" animate shadow />
+              </div>
+            )}
+            <div className="recommended-material__texts">
+              <p className="recommended-material__author">
+                {author}{" "}
+                <span className="recommended-material__publication-year">
+                  something year
+                </span>
+              </p>
+              <p className="recommended-material__description">
+                something text
+              </p>
+            </div>
+          </div>
+        </div>
+        <a
+          href={href}
+          className="recommendation__texts arrow__hover--right-small"
+        >
+          <h3 className="recommendation__title">midlertidig titel</h3>
+          <p className="recommendation__description">midlertidig text</p>
+          <Arrow />
+        </a>
+      </div>
+    </>
+  );
+};
+export default Recommendation;