@thoughtindustries/content

@thoughtindustries/content

A collection of content specific resources for @thoughtindustries/helium UI components. It comes with typings and React Hooks for making graphql queries and mutations, as well as utilities for content hydration.

Import

import {
  GlobalTypes,
  useCatalogContentQuery,
  LoadingDots,
  hydrateContent
} from '@thoughtindustries/content';

Usage

// run hook to query catalog content
const { data, loading, error } = useCatalogContentQuery({
  variables: {
     sortColumn: GlobalTypes.SortColumn.PublishDate,
     sortDirection: GlobalTypes.SortDirection.Desc,
     resultsDisplayType: GlobalTypes.ContentItemDisplayType.Grid,
     page: 2
  },
});

// render loading dots before data is resolved
if (loading) {
  return <LoadingDots />
}

// hydrate content response when data is resolved
const { i18n } = useTranslation();
if (data) {
  const { contentItems = [] } = data.CatalogContent;
  return contentItems.map((item, index) => {
    const hydratedItem = hydrateContent(i18n, item);
    // render component for hydrated content item
    // return ...
  });
}

Content Header

The Content Header component is used to display the title, description, and image of a Course or Learning Path. All content types, except learning paths, can also display rating and ratingsCount information.

Example code

import { ContentHeader } from '@thoughtindustries/content';

export function MyComponent() {
  // ...

  return (
    <ContentHeader contentKind={contentKind} slug={courseSlug} showStars={true} showImage={true} />
  );
}

Props

Name	Required	Type	Description
contentKind	Yes	string	The contentKind of the Content, e.g., learningPath, course.
slug	Yes	slug	The slug of the content that should be displayed.
showStars	No	boolean	Controls whether a course's rating is displayed, shown in stars.
showImage	No	boolean	Controls whether a piece of content's Detail Image is displayed.