-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Collections): custom collection urls
- Loading branch information
1 parent
ca49347
commit 44c96ee
Showing
12 changed files
with
661 additions
and
1,117 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import { Card, Image } from "semantic-ui-react"; | ||
| import { Collection, CollectionResource } from "../../types"; | ||
| import { Link } from "react-router-dom"; | ||
| import { getLibGlyphURL, getLibraryName } from "../util/LibraryOptions"; | ||
| import { isBook as checkIsBook } from "../../utils/typeHelpers"; | ||
| import { getCollectionHref } from "../util/CollectionHelpers"; | ||
|
|
||
| interface CollectionCardProps { | ||
| item: Collection | CollectionResource; | ||
| } | ||
|
|
||
| const CollectionCard: React.FC<CollectionCardProps> = ({ item }) => { | ||
| const getResourceData = () => { | ||
| if ("resourceData" in item) { | ||
| return item.resourceData; | ||
| } else { | ||
| return item; | ||
| } | ||
| }; | ||
|
|
||
| const resourceData = getResourceData(); | ||
| const isBook = checkIsBook(resourceData); | ||
|
|
||
| return ( | ||
| <Card | ||
| as={Link} | ||
| to={getCollectionHref(item)} | ||
| className="commons-content-card" | ||
| > | ||
| <div | ||
| className="commons-content-card-img" | ||
| style={{ | ||
| backgroundImage: `url(${ | ||
| isBook ? resourceData.thumbnail : resourceData.coverPhoto | ||
| })`, | ||
| }} | ||
| /> | ||
| <Card.Content> | ||
| <Card.Header className="commons-content-card-header"> | ||
| {resourceData.title} | ||
| </Card.Header> | ||
| <Card.Meta> | ||
| <Image | ||
| src={getLibGlyphURL(isBook ? resourceData.library : "")} | ||
| className="library-glyph" | ||
| /> | ||
| {getLibraryName(isBook ? resourceData.library : "")} | ||
| </Card.Meta> | ||
| <Card.Description> | ||
| <p>{isBook ? resourceData.author : ""}</p> | ||
| <p> | ||
| <em>{isBook ? resourceData.affiliation : ""}</em> | ||
| </p> | ||
| </Card.Description> | ||
| </Card.Content> | ||
| </Card> | ||
| ); | ||
| }; | ||
|
|
||
| export default CollectionCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import { Header, Image, Table } from "semantic-ui-react"; | ||
| import { Collection, CollectionResource } from "../../types"; | ||
| import { getLibGlyphAltText, getLibGlyphURL } from "../util/LibraryOptions"; | ||
| import { Link } from "react-router-dom"; | ||
| import { isBook as checkIsBook } from "../../utils/typeHelpers"; | ||
| import { getCollectionHref } from "../util/CollectionHelpers"; | ||
|
|
||
| export interface CollectionTableProps { | ||
| data: Collection[] | CollectionResource[]; | ||
| loading: boolean; | ||
| } | ||
|
|
||
| const CollectionTable: React.FC<CollectionTableProps> = ({ data, loading }) => { | ||
| const getItemData = (item: Collection | CollectionResource) => { | ||
| if ("resourceData" in item) { | ||
| return item.resourceData; | ||
| } else { | ||
| return item; | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Table celled title="Collection Resources"> | ||
| <Table.Header> | ||
| <Table.Row> | ||
| <Table.HeaderCell scope="col" role="columnheader"> | ||
| <Image | ||
| centered | ||
| src={getLibGlyphURL("")} | ||
| className="commons-itemized-glyph" | ||
| alt={getLibGlyphAltText("")} | ||
| /> | ||
| </Table.HeaderCell> | ||
| <Table.HeaderCell scope="col"> | ||
| <Header sub>Title</Header> | ||
| </Table.HeaderCell> | ||
| <Table.HeaderCell scope="col"> | ||
| <Header sub>Subject</Header> | ||
| </Table.HeaderCell> | ||
| <Table.HeaderCell scope="col"> | ||
| <Header sub>Author</Header> | ||
| </Table.HeaderCell> | ||
| <Table.HeaderCell scope="col"> | ||
| <Header sub>Affiliation</Header> | ||
| </Table.HeaderCell> | ||
| </Table.Row> | ||
| </Table.Header> | ||
| <Table.Body> | ||
| {!loading && | ||
| data.length > 0 && | ||
| data.map((i) => { | ||
| const item = getItemData(i); | ||
| const isBook = checkIsBook(item); | ||
| return ( | ||
| <Table.Row key={crypto.randomUUID()}> | ||
| <Table.Cell> | ||
| <Image | ||
| centered | ||
| src={getLibGlyphURL(isBook ? item.library : "")} | ||
| className="commons-itemized-glyph" | ||
| alt={getLibGlyphAltText(isBook ? item.library : "")} | ||
| /> | ||
| </Table.Cell> | ||
| <Table.Cell> | ||
| <p> | ||
| <strong> | ||
| <Link to={getCollectionHref(i)}>{item.title}</Link> | ||
| </strong> | ||
| </p> | ||
| </Table.Cell> | ||
| <Table.Cell> | ||
| <p>{isBook ? item.subject : ""}</p> | ||
| </Table.Cell> | ||
| <Table.Cell> | ||
| <p>{isBook ? item.author : ""}</p> | ||
| </Table.Cell> | ||
| <Table.Cell> | ||
| <p> | ||
| <em>{isBook ? item.affiliation : ""}</em> | ||
| </p> | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| ); | ||
| })} | ||
| {!loading && data.length === 0 && ( | ||
| <Table.Row> | ||
| <Table.Cell colSpan={4}> | ||
| <p className="text-center"> | ||
| <em>No results found.</em> | ||
| </p> | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| )} | ||
| </Table.Body> | ||
| </Table> | ||
| ); | ||
| }; | ||
|
|
||
| export default CollectionTable; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.