#667 Fix transition title on articles and add folder item view

Author: Polleps

browser/data-browser/src/views/Article/ArticleCard.tsx

@@ -1,30 +1,31 @@
-import { properties, useString, useTitle } from '@tomic/react';
+import { core, useString } from '@tomic/react';
 import React from 'react';
 import { styled } from 'styled-components';
 import { AtomicLink } from '../../components/AtomicLink';
 import { markdownToPlainText } from '../../helpers/markdown';
+import { transitionName } from '../../helpers/transitionName';
+import { ViewTransitionProps } from '../../helpers/ViewTransitionProps';
 import { CardViewProps } from '../Card/CardViewProps';
 
 export function ArticleCard({ resource }: CardViewProps): JSX.Element {
-  const [title] = useTitle(resource);
-
-  const [description] = useString(resource, properties.description);
+  const [description] = useString(resource, core.properties.description);
   const truncated = markdownToPlainText(description ?? '').slice(0, 200);
 
   return (
     <div>
       <AtomicLink subject={resource.getSubject()}>
-        <Title>{title}</Title>
+        <Title subject={resource.getSubject()}>{resource.title}</Title>
       </AtomicLink>
       <p>{truncated}...</p>
     </div>
   );
 }
 
-const Title = styled.h2`
+const Title = styled.h2<ViewTransitionProps>`
   white-space: nowrap;
   text-overflow: ellipsis;
   width: 100%;
   overflow: hidden;
   font-size: 1.3rem;
+  ${props => transitionName('page-title', props.subject)}
 `;

browser/data-browser/src/views/Card/ResourceCard.tsx

@@ -4,8 +4,10 @@ import {
   useString,
   useResource,
   useTitle,
-  properties,
-  urls,
+  core,
+  server,
+  dataBrowser,
+  collections,
 } from '@tomic/react';
 import AllProps from '../../components/AllProps';
 import { AtomicLink } from '../../components/AtomicLink';
@@ -20,6 +22,9 @@ import { BookmarkCard } from './BookmarkCard.jsx';
 import { CardViewProps, CardViewPropsBase } from './CardViewProps';
 import { ElementCard } from './ElementCard';
 import { ArticleCard } from '../Article';
+import { styled } from 'styled-components';
+import { ViewTransitionProps } from '../../helpers/ViewTransitionProps';
+import { transitionName } from '../../helpers/transitionName';
 
 interface ResourceCardProps extends CardViewPropsBase {
   /** The subject URL - the identifier of the resource. */
@@ -73,7 +78,7 @@ function ResourceCardInner(props: ResourceCardProps): JSX.Element {
   const { subject } = props;
   const resource = useResource(subject);
   const [title] = useTitle(resource);
-  const [klass] = useString(resource, properties.isA);
+  const [klass] = useString(resource, core.properties.isA);
 
   if (resource.loading) {
     return <p>Loading...</p>;
@@ -92,17 +97,17 @@ function ResourceCardInner(props: ResourceCardProps): JSX.Element {
 
   /** Check if there exists a View for this Class. These should be registered in `../views` */
   switch (klass) {
-    case urls.classes.collection:
+    case collections.classes.collection:
       return <CollectionCard resource={resource} {...props} />;
-    case urls.classes.file:
+    case server.classes.file:
       return <FileCard resource={resource} {...props} />;
-    case urls.classes.message:
+    case dataBrowser.classes.message:
       return <MessageCard resource={resource} {...props} />;
-    case urls.classes.bookmark:
+    case dataBrowser.classes.bookmark:
       return <BookmarkCard resource={resource} {...props} />;
-    case urls.classes.elements.paragraph:
+    case dataBrowser.classes.paragraph:
       return <ElementCard resource={resource} {...props} />;
-    case urls.classes.article:
+    case dataBrowser.classes.article:
       return <ArticleCard resource={resource} {...props} />;
     default:
       return <ResourceCardDefault resource={resource} {...props} />;
@@ -113,16 +118,16 @@ export function ResourceCardDefault({
   resource,
   small,
 }: CardViewProps): JSX.Element {
-  const [title] = useTitle(resource);
-
   return (
     <React.Fragment>
       <AtomicLink subject={resource.getSubject()}>
-        <h2>{title}</h2>
+        <DefaultCardTitle subject={resource.getSubject()}>
+          {resource.title}
+        </DefaultCardTitle>
       </AtomicLink>
       <ValueForm
         resource={resource}
-        propertyURL={urls.properties.description}
+        propertyURL={core.properties.description}
       />
       {!small && (
         <AllProps
@@ -137,3 +142,7 @@ export function ResourceCardDefault({
 }
 
 export default ResourceCard;
+
+const DefaultCardTitle = styled.h2<ViewTransitionProps>`
+  ${props => transitionName('page-title', props.subject)}
+`;

browser/data-browser/src/views/FolderPage/GridItem/ArticleGridItem.tsx

@@ -0,0 +1,16 @@
+import { Server, useResource, useSubject } from '@tomic/react';
+import React from 'react';
+import { atomicArgu } from '../../../ontologies/atomic-argu';
+import { GridItemViewProps } from './GridItemViewProps';
+import { GridItemWithImage } from './GridItemWithImage';
+
+export function ArticleGridItem({ resource }: GridItemViewProps): JSX.Element {
+  const [coverImgSubject] = useSubject(
+    resource,
+    atomicArgu.properties.coverImage,
+  );
+
+  const coverImg = useResource<Server.File>(coverImgSubject);
+
+  return <GridItemWithImage src={coverImg.props.downloadUrl} />;
+}

browser/data-browser/src/views/FolderPage/GridItem/FileGridItem.tsx

@@ -7,6 +7,7 @@ import { TextPreview } from '../../File/TextPreview';
 import { InnerWrapper } from './components';
 import { GridItemViewProps } from './GridItemViewProps';
 import { useFileImageTransitionStyles } from '../../File/useFileImageTransitionStyles';
+import { GridItemWithImage } from './GridItemWithImage';
 
 const imageMimeTypes = new Set([
   'image/png',
@@ -27,16 +28,7 @@ export function FileGridItem({ resource }: GridItemViewProps): JSX.Element {
   }
 
   if (imageMimeTypes.has(mimeType)) {
-    return (
-      <InnerWrapper>
-        <Image
-          src={downloadUrl}
-          alt=''
-          loading='lazy'
-          style={transitionStyles}
-        />
-      </InnerWrapper>
-    );
+    return <GridItemWithImage src={downloadUrl} style={transitionStyles} />;
   }
 
   if (isTextFile(mimeType)) {
@@ -46,13 +38,6 @@ export function FileGridItem({ resource }: GridItemViewProps): JSX.Element {
   return <TextWrapper>No preview available</TextWrapper>;
 }
 
-const Image = styled.img`
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-`;
-
 const TextWrapper = styled(InnerWrapper)`
   display: grid;
   place-items: center;

browser/data-browser/src/views/FolderPage/GridItem/GridItemWithImage.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { styled } from 'styled-components';
+import { InnerWrapper } from './components';
+
+interface GridItemWithImageProps {
+  src: string | undefined;
+  style?: React.CSSProperties | undefined;
+}
+
+export function GridItemWithImage({
+  src,
+  style,
+}: GridItemWithImageProps): JSX.Element {
+  if (src === undefined) {
+    return <TextWrapper>No preview available</TextWrapper>;
+  }
+
+  return (
+    <InnerWrapper>
+      <Image src={src} alt='' loading='lazy' style={style} />
+    </InnerWrapper>
+  );
+}
+
+const Image = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+`;
+
+const TextWrapper = styled(InnerWrapper)`
+  display: grid;
+  place-items: center;
+  color: ${p => p.theme.colors.textLight};
+`;

browser/data-browser/src/views/FolderPage/GridItem/ResourceGridItem.tsx

@@ -1,6 +1,7 @@
 import {
-  classes,
-  properties,
+  core,
+  dataBrowser,
+  server,
   useResource,
   useString,
   useTitle,
@@ -21,18 +22,20 @@ import { FileGridItem } from './FileGridItem';
 import { ErrorBoundary } from '../../ErrorPage';
 import { useNavigateWithTransition } from '../../../hooks/useNavigateWithTransition';
 import { LoaderBlock } from '../../../components/Loader';
+import { ArticleGridItem } from './ArticleGridItem';
 
 export interface ResourceGridItemProps {
   subject: string;
 }
 
 const gridItemMap = new Map<string, React.FC<GridItemViewProps>>([
-  [classes.bookmark, BookmarkGridItem],
-  [classes.class, BasicGridItem],
-  [classes.property, BasicGridItem],
-  [classes.chatRoom, ChatRoomGridItem],
-  [classes.document, DocumentGridItem],
-  [classes.file, FileGridItem],
+  [dataBrowser.classes.bookmark, BookmarkGridItem],
+  [core.classes.class, BasicGridItem],
+  [core.classes.property, BasicGridItem],
+  [dataBrowser.classes.chatroom, ChatRoomGridItem],
+  [dataBrowser.classes.document, DocumentGridItem],
+  [server.classes.file, FileGridItem],
+  [dataBrowser.classes.article, ArticleGridItem],
 ]);
 
 function getResourceRenderer(
@@ -48,7 +51,7 @@ export function ResourceGridItem({
   const resource = useResource(subject);
   const [title] = useTitle(resource);
 
-  const [classTypeSubject] = useString(resource, properties.isA);
+  const [classTypeSubject] = useString(resource, core.properties.isA);
   const classType = useResource(classTypeSubject);
   const [classTypeName] = useTitle(classType);
 
@@ -71,7 +74,7 @@ export function ResourceGridItem({
     return <Loader />;
   }
 
-  const isFolder = classTypeSubject === classes.folder;
+  const isFolder = classTypeSubject === dataBrowser.classes.folder;
 
   const transitionSubject = isFolder ? undefined : subject;