feat(research): author card component created

apps/research/src/components/article/article-body/ArticleRecommendation.tsx

@@ -19,16 +19,12 @@ const ArticleRecommendation: React.FC<ArticleRecommendationProps> = ({
   if (mergedArticles.length <= 0) return;
 
   const uniqueArticles = [...new Set(mergedArticles)]
-    .map(
-      ({
-        ...rest
-      }) => {
-        return {
-          ...rest,
-          tagsCollection: { items: [] },
-        };
-      }
-    )
+    .map(({ ...rest }) => {
+      return {
+        ...rest,
+        tagsCollection: { items: [] },
+      };
+    })
     .splice(0, 3);
 
   return (

apps/research/src/components/article/article-widgets/DashboardList.tsx

@@ -64,7 +64,7 @@ const DashboardList: React.FC<DashboardListProps> = ({
             ))
           : articles.slice(0, smallScreen).map((article, index) => (
               <>
-                <Col span={24} key={article.articleSlug! + index}>
+                <Col span={24} key={article.articleSlug! + index + '-slice'}>
                   <ArticleCard {...article} />
                 </Col>
                 {!isLastDivider(articles.slice(0, smallScreen), index) && (

apps/research/src/components/author/AuthorCard.tsx

@@ -0,0 +1,72 @@
+import { Author } from '@/types';
+import { Card, theme, Typography, Space, Image, Grid } from 'antd';
+import { EllipsisConfig } from 'antd/es/typography/Base';
+
+const { useToken } = theme;
+const { Link: AntLink, Text, Paragraph } = Typography;
+const { useBreakpoint } = Grid;
+
+interface AuthorCardProps extends Author {}
+
+const AuthorCard: React.FC<AuthorCardProps> = ({
+  title,
+  profilePicture,
+  description,
+  name,
+}) => {
+  const {
+    token: { fontSizeSM, fontSizeLG, colorBgLayout, fontSize },
+  } = useToken();
+  const { sm } = useBreakpoint();
+  return (
+    <Card
+      style={{
+        width: '100%',
+      }}
+      bordered
+      headStyle={{
+        backgroundColor: colorBgLayout,
+        fontSize: fontSize,
+      }}
+      bodyStyle={{
+        padding: '16px 24px 16px 24px',
+      }}
+      title={name}
+    >
+      <Space direction="horizontal" size={24} align="start">
+        <Space direction="vertical" size={8}>
+          <Paragraph
+            type="secondary"
+            ellipsis={
+              { rows: 4, expandable: true, symbol: 'more' } as EllipsisConfig
+            }
+            style={{
+              fontSize: fontSizeLG,
+              margin: 0,
+            }}
+          >
+            {description}
+          </Paragraph>
+        </Space>
+        {sm && (
+          <div
+            style={{
+              width: 137,
+            }}
+          >
+            <Image
+              style={{
+                objectFit: 'cover',
+              }}
+              preview={false}
+              src={profilePicture.url}
+              alt={profilePicture.title ?? name}
+            />
+          </div>
+        )}
+      </Space>
+    </Card>
+  );
+};
+
+export default AuthorCard;

apps/research/src/components/author/index.ts

@@ -0,0 +1 @@
+export { default as AuthorCard } from './AuthorCard';

apps/research/src/components/index.ts

@@ -6,3 +6,4 @@ export * from './token-valuation';
 export * from './dashboards';
 export * from './settings';
 export * from './search';
+export * from './author';

apps/research/src/components/search/SearchHits.tsx

@@ -1,39 +1,29 @@
 import * as React from 'react';
 import { Asset } from '@/types';
-import { useHits } from 'react-instantsearch-hooks-web';
+import { useHits, useInstantSearch } from 'react-instantsearch-hooks-web';
 import { ArticleCard } from '@/components';
 import { Col, Row } from 'antd';
+import { BaseHit } from 'instantsearch.js';
 
-interface ResultBoxProps {
-  hit: {
-    authors: ReadonlyArray<string>;
-    image: Omit<Asset, 'description'>;
-    objectID: string;
-    publishedAt: string;
-    publishedDate: string;
-    section: string;
-    slug: string;
-    subtitle: string;
-    summary: string;
-    tags: ReadonlyArray<string>;
-    title: string;
-  };
+interface SearchHit extends BaseHit {
+  authors: ReadonlyArray<string>;
+  image: Omit<Asset, 'description'>;
+  publishedAt: string;
+  horizontalThumbnail: Asset;
+  publishedDate: string;
+  section: string;
+  slug: string;
+  subtitle: string;
+  summary: string;
+  tags: ReadonlyArray<string>;
+  title: string;
 }
 
 const SearchHits: React.FC = () => {
-  const { results } = useHits<{
-    authors: ReadonlyArray<string>;
-    horizontalThumbnail: Omit<Asset, 'description'>;
-    objectID: string;
-    publishedAt: string;
-    publishedDate: string;
-    section: string;
-    slug: string;
-    subtitle: string;
-    summary: string;
-    tags: ReadonlyArray<string>;
-    title: string;
-  }>();
+  const { results } = useHits<SearchHit>();
+  const { indexUiState, setIndexUiState } = useInstantSearch();
+
+  console.log(indexUiState);
 
   if (results!.__isArtificial && results!.nbHits === 0) {
     return (
@@ -65,7 +55,10 @@ const SearchHits: React.FC = () => {
               <ArticleCard
                 title={hit.title}
                 subtitle={hit.subtitle}
-                horizontalThumbnail={{ url: imageUrl, description: imageDescription }}
+                horizontalThumbnail={{
+                  url: imageUrl,
+                  description: imageDescription,
+                }}
                 publishedDate={hit.publishedDate}
                 tagsCollection={{
                   items: hit.tags.map((tag) => ({ title: tag })),

apps/research/src/pages/articles/index.tsx

@@ -7,8 +7,8 @@ import { SearchHits, SearchText } from '@/components';
 import { NextSeo } from 'next-seo';
 import { siteUsername } from '@/utils';
 import styles from './styles.module.scss';
-import {UiState} from "instantsearch.js";
-import {RouterProps} from "instantsearch.js/es/middlewares";
+import { UiState } from 'instantsearch.js';
+import { RouterProps } from 'instantsearch.js/es/middlewares';
 
 const { useToken } = theme;
 
@@ -19,11 +19,11 @@ const searchClient = algoliasearch(
 
 // query params
 type RouteState = {
-  query?: string,
-  tags?: string,
-  authors?: string,
-  page?: number
-}
+  query?: string;
+  tags?: string;
+  authors?: string;
+  page?: number;
+};
 
 const Articles: NextPageWithLayout = () => {
   const {
@@ -33,24 +33,29 @@ const Articles: NextPageWithLayout = () => {
     router: history(),
     stateMapping: {
       stateToRoute(uiState: UiState): RouteState {
-        const indexUiState = uiState["articles"];
+        const indexUiState = uiState['articles'];
         const routeState: RouteState = {
           query: indexUiState.query,
           page: indexUiState.page,
         };
-        const tags = indexUiState.refinementList?.tags?.filter((tag) => tag.length > 0)
-        const authors = indexUiState.refinementList?.authors?.filter((author) => author.length > 0)
+        const tags = indexUiState.refinementList?.tags?.filter(
+          (tag) => tag.length > 0
+        );
+        const authors = indexUiState.refinementList?.authors?.filter(
+          (author) => author.length > 0
+        );
         if (tags && tags.length) {
           routeState.tags = tags.length == 1 ? tags[0] : tags?.join(',');
         }
         if (authors && authors.length) {
-          routeState.authors = authors.length == 1 ? authors[0] : authors?.join(',');
+          routeState.authors =
+            authors.length == 1 ? authors[0] : authors?.join(',');
         }
         return routeState;
       },
-      routeToState(routeState: RouteState): UiState  {
+      routeToState(routeState: RouteState): UiState {
         return {
-          ["articles"]: {
+          ['articles']: {
             query: routeState.query,
             refinementList: {
               tags: (routeState.tags || '').split(','),
@@ -60,8 +65,8 @@ const Articles: NextPageWithLayout = () => {
           },
         };
       },
-    }
-  }
+    },
+  };
   return (
     <>
       <NextSeo