@drodil/backstage-plugin-qeta-react 3.3.0 → 3.4.0

package/dist/utils/hooks.esm.js

@@ -1,701 +0,0 @@
-import useAsync from 'react-use/lib/useAsync';
-import { useApi, identityApiRef, useAnalytics, appThemeApiRef, configApiRef } from '@backstage/core-plugin-api';
-import { makeStyles } from '@material-ui/core';
-import { catalogApiRef, useEntityPresentation } from '@backstage/plugin-catalog-react';
-import { trimEnd } from 'lodash';
-import { useSearchParams } from 'react-router-dom';
-import React, { useEffect, useMemo, useCallback, useState } from 'react';
-import { filterTags } from '@drodil/backstage-plugin-qeta-common';
-import DataLoader from 'dataloader';
-import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
-import { qetaTranslationRef } from '../translation.esm.js';
-import { qetaApiRef } from '../api.esm.js';
-import { filterKeys } from '../components/FilterPanel/FilterPanel.esm.js';
-import useDebounce from 'react-use/lib/useDebounce';
-import { getFiltersWithDateRange } from './utils.esm.js';
-import { useSignal } from '@backstage/plugin-signals-react';
-import { useAsyncRetry } from 'react-use';
-
-const useTranslation = () => {
-  return useTranslationRef(qetaTranslationRef);
-};
-const useFormStyles = makeStyles(
-  (theme) => {
-    return {
-      headerImage: {
-        marginBottom: "1rem",
-        marginTop: "1rem",
-        height: "250px",
-        objectFit: "cover",
-        width: "100%",
-        border: `1px solid ${theme.palette.background.paper}`,
-        boxShadow: theme.shadows[1]
-      },
-      postButton: {
-        marginTop: theme.spacing(1),
-        marginBottom: theme.spacing(1)
-      },
-      form: {}
-    };
-  },
-  { name: "QetaForm" }
-);
-function usePaginatedPosts(props) {
-  const { type, tags, author, entity, favorite, initialPageSize } = props;
-  const analytics = useAnalytics();
-  const [page, setPage] = React.useState(1);
-  const [pageCount, setPageCount] = React.useState(1);
-  const [postsPerPage, setPostsPerPage] = React.useState(initialPageSize ?? 10);
-  const [showFilterPanel, setShowFilterPanel] = React.useState(false);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [searchQuery, setSearchQuery] = React.useState("");
-  const [filters, setFilters] = React.useState({
-    order: "desc",
-    orderBy: "created",
-    noAnswers: "false",
-    noCorrectAnswer: "false",
-    noVotes: "false",
-    searchQuery: "",
-    entity: entity ?? "",
-    tags: tags ?? [],
-    dateRange: "",
-    collectionId: props.collectionId
-  });
-  const onPageChange = (value) => {
-    setPage(value);
-    setSearchParams((prev) => {
-      const newValue = prev;
-      newValue.set("page", String(value));
-      return newValue;
-    });
-  };
-  const loadNextPage = () => {
-    setPage((prev) => prev + 1);
-  };
-  const onFilterChange = (key, value) => {
-    if (filters[key] === value) {
-      return;
-    }
-    setPage(1);
-    setFilters({ ...filters, ...{ [key]: value } });
-    setSearchParams((prev) => {
-      const newValue = prev;
-      if (!value || value === "false") {
-        newValue.delete(key);
-      } else if (Array.isArray(value)) {
-        if (value.length === 0) {
-          newValue.delete(key);
-        } else {
-          newValue.set(key, value.join(","));
-        }
-      } else if (value.length > 0) {
-        newValue.set(key, value);
-      } else {
-        newValue.delete(key);
-      }
-      return newValue;
-    });
-  };
-  const onSearchQueryChange = (event) => {
-    onPageChange(1);
-    if (event.target.value) {
-      analytics.captureEvent("qeta_search", event.target.value);
-    }
-    setSearchQuery(event.target.value);
-  };
-  useDebounce(
-    () => {
-      if (filters.searchQuery !== searchQuery) {
-        setFilters({ ...filters, searchQuery });
-      }
-    },
-    400,
-    [searchQuery]
-  );
-  useEffect(() => {
-    let filtersApplied = false;
-    searchParams.forEach((value, key) => {
-      try {
-        if (key === "page") {
-          const pv = Number.parseInt(value, 10);
-          if (pv > 0) {
-            setPage(pv);
-          } else {
-            setPage(1);
-          }
-        } else if (key === "postsPerPage") {
-          const qpp = Number.parseInt(value, 10);
-          if (qpp > 0) setPostsPerPage(qpp);
-        } else if (filterKeys.includes(key)) {
-          filtersApplied = true;
-          if (key === "tags") {
-            filters.tags = filterTags(value) ?? [];
-          } else {
-            filters[key] = value;
-          }
-        }
-      } catch (_e) {
-      }
-    });
-    setFilters(filters);
-    if (filtersApplied) {
-      setShowFilterPanel(true);
-    }
-  }, [searchParams, filters]);
-  const {
-    value: response,
-    loading,
-    error
-  } = useQetaApi(
-    (api) => {
-      return api.getPosts({
-        type,
-        limit: postsPerPage,
-        offset: (page - 1) * postsPerPage,
-        includeEntities: true,
-        author,
-        favorite,
-        ...getFiltersWithDateRange(filters)
-      });
-    },
-    [type, page, filters, postsPerPage]
-  );
-  useEffect(() => {
-    if (response) {
-      setPageCount(Math.ceil(response.total / postsPerPage));
-    }
-  }, [response, postsPerPage]);
-  const onPageSizeChange = (value) => {
-    if (response) {
-      let newPage = page;
-      while (newPage * value > response.total) {
-        newPage -= 1;
-      }
-      onPageChange(Math.max(1, newPage));
-    }
-    setPostsPerPage(value);
-    setSearchParams((prev) => {
-      const newValue = prev;
-      newValue.set("postsPerPage", String(value));
-      return newValue;
-    });
-  };
-  return {
-    page,
-    setPage,
-    postsPerPage,
-    setPostsPerPage,
-    showFilterPanel,
-    setShowFilterPanel,
-    searchParams,
-    setSearchParams,
-    searchQuery,
-    setSearchQuery,
-    filters,
-    setFilters,
-    onPageChange,
-    onPageSizeChange,
-    onFilterChange,
-    onSearchQueryChange,
-    response,
-    loading,
-    error,
-    loadNextPage,
-    pageCount
-  };
-}
-function useVoting(resp) {
-  const [entity, setEntity] = React.useState(
-    resp
-  );
-  const [ownVote, setOwnVote] = React.useState(entity.ownVote ?? 0);
-  const [correctAnswer, setCorrectAnswer] = useState(
-    "postId" in entity ? entity.correct : false
-  );
-  const [score, setScore] = useState(entity.score);
-  const analytics = useAnalytics();
-  const qetaApi = useApi(qetaApiRef);
-  const { t } = useTranslation();
-  const isQuestion = "title" in entity;
-  const own = entity.own ?? false;
-  const { lastSignal } = useSignal(
-    isQuestion ? `qeta:question_${entity.id}` : `qeta:answer_${entity.id}`
-  );
-  useEffect(() => {
-    if (entity) {
-      setScore(entity.score);
-    }
-  }, [entity]);
-  useEffect(() => {
-    if (lastSignal?.type === "post_stats" || lastSignal?.type === "answer_stats") {
-      setCorrectAnswer(lastSignal.correctAnswer);
-      setScore(lastSignal.score);
-    }
-  }, [lastSignal]);
-  const voteUp = () => {
-    if (isQuestion) {
-      qetaApi.votePostUp(entity.id).then((response) => {
-        setOwnVote(1);
-        analytics.captureEvent("vote", "question", { value: 1 });
-        setEntity(response);
-      });
-    } else if ("postId" in entity) {
-      qetaApi.voteAnswerUp(entity.postId, entity.id).then((response) => {
-        setOwnVote(1);
-        analytics.captureEvent("vote", "answer", { value: 1 });
-        setEntity(response);
-      });
-    }
-  };
-  const voteDown = () => {
-    if (isQuestion) {
-      qetaApi.votePostDown(entity.id).then((response) => {
-        setOwnVote(-1);
-        analytics.captureEvent("vote", "question", { value: -1 });
-        setEntity(response);
-      });
-    } else if ("postId" in entity) {
-      qetaApi.voteAnswerDown(entity.postId, entity.id).then((response) => {
-        setOwnVote(-1);
-        analytics.captureEvent("vote", "answer", { value: -1 });
-        setEntity(response);
-      });
-    }
-  };
-  let correctTooltip = correctAnswer ? t("voteButtons.answer.markIncorrect") : t("voteButtons.answer.markCorrect");
-  if (!entity?.own) {
-    correctTooltip = correctAnswer ? t("voteButtons.answer.marked") : "";
-  }
-  let voteUpTooltip = isQuestion ? t("voteButtons.question.good") : t("voteButtons.answer.good");
-  if (own) {
-    voteUpTooltip = isQuestion ? t("voteButtons.question.own") : t("voteButtons.answer.own");
-  }
-  let voteDownTooltip = isQuestion ? t("voteButtons.question.bad") : t("voteButtons.answer.bad");
-  if (own) {
-    voteDownTooltip = voteUpTooltip;
-  }
-  const toggleCorrectAnswer = () => {
-    if (!("postId" in entity)) {
-      return;
-    }
-    if (correctAnswer) {
-      qetaApi.markAnswerIncorrect(entity.postId, entity.id).then((response) => {
-        if (response) {
-          setCorrectAnswer(false);
-        }
-      });
-    } else {
-      qetaApi.markAnswerCorrect(entity.postId, entity.id).then((response) => {
-        if (response) {
-          setCorrectAnswer(true);
-        }
-      });
-    }
-  };
-  return {
-    entity,
-    ownVote,
-    correctAnswer,
-    score,
-    voteUp,
-    voteDown,
-    toggleCorrectAnswer,
-    voteUpTooltip,
-    voteDownTooltip,
-    correctTooltip
-  };
-}
-function useQetaApi(f, deps = []) {
-  const qetaApi = useApi(qetaApiRef);
-  return useAsyncRetry(async () => {
-    return await f(qetaApi);
-  }, deps);
-}
-function useIdentityApi(f, deps = []) {
-  const identityApi = useApi(identityApiRef);
-  return useAsync(async () => {
-    return await f(identityApi);
-  }, deps);
-}
-function useEntityQueryParameter(entity) {
-  const [searchParams] = useSearchParams();
-  const [entityRef, setEntityRef] = React.useState(entity);
-  useEffect(() => {
-    setEntityRef(searchParams.get("entity") ?? void 0);
-  }, [searchParams, setEntityRef]);
-  return entityRef;
-}
-function useIsDarkTheme() {
-  const appThemeApi = useApi(appThemeApiRef);
-  const themes = appThemeApi.getInstalledThemes();
-  const theme = useMemo(() => appThemeApi.getActiveThemeId(), [appThemeApi]);
-  return Boolean(themes.find((t) => t.id === theme)?.variant === "dark");
-}
-const useStyles = makeStyles(
-  (theme) => {
-    return {
-      questionDivider: {
-        marginTop: theme.spacing(2),
-        marginBottom: theme.spacing(2)
-      },
-      questionCard: {
-        marginBottom: theme.spacing(1),
-        position: "relative"
-      },
-      questionCardVote: {
-        textAlign: "center",
-        width: "32px",
-        marginRight: "20px",
-        marginLeft: "5px",
-        display: "inline-block",
-        verticalAlign: "top"
-      },
-      questionCardContent: {
-        minHeight: "160px"
-      },
-      questionListItem: {
-        padding: "0.7rem",
-        paddingBottom: "1.4rem"
-      },
-      questionListItemStats: {
-        width: "70px",
-        textAlign: "right",
-        marginRight: "5px",
-        display: "inline-block",
-        verticalAlign: "top"
-      },
-      questionListItemContent: {
-        display: "inline-block",
-        width: "calc(100% - 80px)"
-      },
-      questionListItemAuthor: {
-        display: "inline",
-        float: "right"
-      },
-      questionListItemAvatar: {
-        display: "inline-flex !important",
-        marginRight: "0.25rem",
-        fontSize: "1rem",
-        maxWidth: "1rem",
-        maxHeight: "1rem"
-      },
-      answerCardContent: {
-        display: "inline-block",
-        width: "calc(100% - 70px)"
-      },
-      questionListPagination: {
-        marginTop: theme.spacing(2)
-      },
-      questionsPerPageInput: {
-        paddingTop: "10px"
-      },
-      questionsPerPage: {
-        marginRight: theme.spacing(3)
-      },
-      postHighlightListContainer: {
-        width: "100%",
-        backgroundColor: theme.palette.background.paper,
-        border: `1px solid ${theme.palette.action.selected}`,
-        borderRadius: theme.shape.borderRadius,
-        "&:not(:first-child)": {
-          marginTop: theme.spacing(2)
-        }
-      },
-      postHighlightList: {
-        paddingBottom: "0px",
-        "& p": {
-          marginTop: "0",
-          marginBottom: "0"
-        }
-      },
-      filterPanel: {
-        border: `1px solid ${theme.palette.action.selected}`,
-        borderRadius: theme.shape.borderRadius,
-        padding: theme.spacing(3)
-      },
-      questionCardMetadata: {
-        marginTop: theme.spacing(3)
-      },
-      marginRight: {
-        marginRight: theme.spacing(1)
-      },
-      marginLeft: {
-        marginLeft: theme.spacing(1)
-      },
-      questionCardActions: {
-        marginTop: theme.spacing(2),
-        "& a": {
-          marginRight: theme.spacing(1)
-        }
-      },
-      noPadding: {
-        padding: `0 !important`
-      },
-      deleteModal: {
-        position: "absolute",
-        top: "20%",
-        left: "50%",
-        transform: "translate(-50%, -50%)",
-        width: 400,
-        backgroundColor: theme.palette.background.default,
-        border: `1px solid ${theme.palette.action.selected}`,
-        borderRadius: theme.shape.borderRadius,
-        padding: theme.spacing(2),
-        "& button": {
-          marginTop: theme.spacing(2),
-          float: "right"
-        }
-      },
-      highlight: {
-        animation: "$highlight 2s"
-      },
-      "@keyframes highlight": {
-        "0%": {
-          boxShadow: `0px 0px 0px 3px ${theme.palette.secondary.light}`
-        },
-        "100%": {
-          boxShadow: "none"
-        }
-      },
-      dateFilter: {
-        minWidth: "200px",
-        marginTop: theme.spacing(2),
-        marginBottom: theme.spacing(2)
-      }
-    };
-  },
-  { name: "Qeta" }
-);
-const useBaseUrl = () => {
-  try {
-    const config = useApi(configApiRef);
-    return config.getOptionalString("app.baseUrl");
-  } catch {
-    return void 0;
-  }
-};
-const useBasePath = () => {
-  const base = "http://sample.dev";
-  const url = useBaseUrl() ?? "/";
-  const { pathname } = new URL(url, base);
-  return trimEnd(pathname, "/");
-};
-const userCache = /* @__PURE__ */ new Map();
-const dataLoaderFactory = (catalogApi) => new DataLoader(
-  async (entityRefs) => {
-    const { items } = await catalogApi.getEntitiesByRefs({
-      fields: [
-        "kind",
-        "metadata.name",
-        "metadata.namespace",
-        "spec.profile.displayName",
-        "spec.profile.picture"
-      ],
-      entityRefs
-    });
-    entityRefs.forEach((entityRef, index) => {
-      userCache.set(entityRef, items[index]);
-    });
-    return items;
-  },
-  {
-    name: "EntityAuthorLoader",
-    cacheMap: /* @__PURE__ */ new Map(),
-    maxBatchSize: 100,
-    batchScheduleFn: (callback) => {
-      setTimeout(callback, 50);
-    }
-  }
-);
-const useEntityAuthor = (entity) => {
-  const catalogApi = useApi(catalogApiRef);
-  const identityApi = useApi(identityApiRef);
-  const [name, setName] = React.useState(void 0);
-  const [user, setUser] = React.useState(null);
-  const [initials, setInitials] = React.useState(null);
-  const [currentUser, setCurrentUser] = React.useState(null);
-  const anonymous = "anonymous" in entity ? entity.anonymous ?? false : false;
-  let author = (
-    // eslint-disable-next-line no-nested-ternary
-    "author" in entity ? entity.author : "userRef" in entity ? entity.userRef : entity.owner
-  );
-  if (!author.startsWith("user:")) {
-    author = `user:${author}`;
-  }
-  const { primaryTitle: userName } = useEntityPresentation(author);
-  useEffect(() => {
-    if (anonymous) {
-      return;
-    }
-    if (userCache.get(author)) {
-      setUser(userCache.get(author));
-      return;
-    }
-    dataLoaderFactory(catalogApi).load(author).then((data) => {
-      if (data) {
-        setUser(data);
-      } else {
-        setUser(null);
-      }
-    }).catch(() => {
-      setUser(null);
-    });
-  }, [catalogApi, author, anonymous]);
-  useEffect(() => {
-    identityApi.getBackstageIdentity().then((res) => {
-      setCurrentUser(res.userEntityRef ?? "user:default/guest");
-    });
-  }, [identityApi]);
-  useEffect(() => {
-    let displayName = userName;
-    if (author === currentUser) {
-      displayName = "You";
-      if (anonymous) {
-        displayName += " (anonymous)";
-      }
-    }
-    setName(displayName);
-  }, [author, anonymous, currentUser, userName]);
-  useEffect(() => {
-    const init = (name ?? "").split(" ").map((p) => p[0]).join("").substring(0, 2).toUpperCase();
-    setInitials(init);
-  }, [name]);
-  return { name, initials, user };
-};
-let followedTags = void 0;
-const useTagsFollow = () => {
-  const [tags, setTags] = React.useState(followedTags ?? []);
-  const [loading, setLoading] = React.useState(followedTags === void 0);
-  const qetaApi = useApi(qetaApiRef);
-  useEffect(() => {
-    if (followedTags === void 0) {
-      qetaApi.getFollowedTags().then((res) => {
-        followedTags = res.tags;
-        setTags(res.tags);
-        setLoading(false);
-      });
-    } else {
-      setTags(followedTags);
-    }
-  }, [qetaApi]);
-  const followTag = useCallback(
-    (tag) => {
-      qetaApi.followTag(tag).then(() => {
-        setTags((prev) => [...prev, tag]);
-        followedTags?.push(tag);
-      });
-    },
-    [qetaApi]
-  );
-  const unfollowTag = useCallback(
-    (tag) => {
-      qetaApi.unfollowTag(tag).then(() => {
-        setTags((prev) => prev.filter((t) => t !== tag));
-        followedTags = followedTags?.filter((t) => t !== tag);
-      });
-    },
-    [qetaApi]
-  );
-  const isFollowingTag = useCallback(
-    (tag) => tags.includes(tag),
-    [tags]
-  );
-  return {
-    tags,
-    followTag,
-    unfollowTag,
-    isFollowingTag,
-    loading
-  };
-};
-let followedEntities = void 0;
-const useEntityFollow = () => {
-  const [entities, setEntities] = React.useState(
-    followedEntities ?? []
-  );
-  const [loading, setLoading] = React.useState(followedEntities === void 0);
-  const qetaApi = useApi(qetaApiRef);
-  useEffect(() => {
-    if (followedEntities === void 0) {
-      qetaApi.getFollowedEntities().then((res) => {
-        followedEntities = res.entityRefs;
-        setEntities(res.entityRefs);
-        setLoading(false);
-      });
-    } else {
-      setEntities(followedEntities);
-    }
-  }, [qetaApi]);
-  const followEntity = useCallback(
-    (entityRef) => {
-      qetaApi.followEntity(entityRef).then(() => {
-        setEntities((prev) => [...prev, entityRef]);
-        followedEntities?.push(entityRef);
-      });
-    },
-    [qetaApi]
-  );
-  const unfollowEntity = useCallback(
-    (entityRef) => {
-      qetaApi.unfollowEntity(entityRef).then(() => {
-        setEntities((prev) => prev.filter((t) => t !== entityRef));
-        followedEntities = followedEntities?.filter((t) => t !== entityRef);
-      });
-    },
-    [qetaApi]
-  );
-  const isFollowingEntity = useCallback(
-    (entityRef) => entities.includes(entityRef),
-    [entities]
-  );
-  return { entities, followEntity, unfollowEntity, isFollowingEntity, loading };
-};
-let followedUsers = void 0;
-const useUserFollow = () => {
-  const [users, setUsers] = React.useState(followedUsers ?? []);
-  const [loading, setLoading] = React.useState(followedUsers === void 0);
-  const qetaApi = useApi(qetaApiRef);
-  useEffect(() => {
-    if (followedUsers === void 0) {
-      qetaApi.getFollowedUsers().then((res) => {
-        followedUsers = res.followedUserRefs;
-        setUsers(res.followedUserRefs);
-        setLoading(false);
-      });
-    } else {
-      setUsers(followedUsers);
-    }
-  }, [qetaApi]);
-  const followUser = useCallback(
-    (user) => {
-      qetaApi.followUser(user).then(() => {
-        setUsers((prev) => [...prev, user]);
-        followedUsers?.push(user);
-      });
-    },
-    [qetaApi]
-  );
-  const unfollowUser = useCallback(
-    (user) => {
-      qetaApi.unfollowUser(user).then(() => {
-        setUsers((prev) => prev.filter((t) => t !== user));
-        followedUsers = followedUsers?.filter((t) => t !== user);
-      });
-    },
-    [qetaApi]
-  );
-  const isFollowingUser = useCallback(
-    (user) => users.includes(user),
-    [users]
-  );
-  return {
-    users,
-    followUser,
-    unfollowUser,
-    isFollowingUser,
-    loading
-  };
-};
-
-export { useBasePath, useBaseUrl, useEntityAuthor, useEntityFollow, useEntityQueryParameter, useFormStyles, useIdentityApi, useIsDarkTheme, usePaginatedPosts, useQetaApi, useStyles, useTagsFollow, useTranslation, useUserFollow, useVoting };
-//# sourceMappingURL=hooks.esm.js.map