Add summary data to detail page and change how types are exported

pages/apps/category/All.tsx

@@ -1,7 +1,7 @@
 import { GetStaticProps } from 'next'
 
 import Collection from '../../../src/components/application/Collection'
-import Appstream from '../../../src/types/Appstream'
+import { Appstream } from '../../../src/types/Appstream'
 import { fetchApps } from '../../../src/fetchers'
 import { NextSeo } from 'next-seo'
 

pages/apps/category/[category].tsx

@@ -4,8 +4,8 @@ import { useRouter } from 'next/router'
 
 import Collection from '../../../src/components/application/Collection'
 import { fetchCategory } from '../../../src/fetchers'
-import Appstream from '../../../src/types/Appstream'
-import Category from '../../../src/types/Category'
+import { Appstream } from '../../../src/types/Appstream'
+import { Category } from '../../../src/types/Category'
 
 const ApplicationCategory = ({ applications }) => {
   const router = useRouter()

pages/apps/collection/editors-choice-apps.tsx

@@ -2,8 +2,8 @@ import { GetStaticProps } from 'next'
 
 import ApplicationCollection from '../../../src/components/application/Collection'
 import fetchCollection from '../../../src/fetchers'
-import Collections from '../../../src/types/Collection'
-import Appstream from '../../../src/types/Appstream'
+import { Collections } from '../../../src/types/Collection'
+import { Appstream } from '../../../src/types/Appstream'
 import { NextSeo } from 'next-seo'
 
 export default function EditorChoiceApps({ applications }) {

pages/apps/collection/editors-choice-games.tsx

@@ -2,8 +2,8 @@ import { GetStaticProps } from 'next'
 
 import ApplicationCollection from '../../../src/components/application/Collection'
 import fetchCollection from '../../../src/fetchers'
-import Collections from '../../../src/types/Collection'
-import Appstream from '../../../src/types/Appstream'
+import { Collections } from '../../../src/types/Collection'
+import { Appstream } from '../../../src/types/Appstream'
 import { NextSeo } from 'next-seo'
 
 export default function EditorChoiceGames({ applications }) {

pages/apps/collection/popular.tsx

@@ -2,8 +2,8 @@ import { GetStaticProps } from 'next'
 
 import ApplicationCollection from '../../../src/components/application/Collection'
 import fetchCollection from '../../../src/fetchers'
-import Collections from '../../../src/types/Collection'
-import Appstream from '../../../src/types/Appstream'
+import { Collections } from '../../../src/types/Collection'
+import { Appstream } from '../../../src/types/Appstream'
 import { NextSeo } from 'next-seo'
 
 export default function PopularApps({ applications }) {

pages/apps/collection/recently-updated.tsx

@@ -2,8 +2,8 @@ import { GetStaticProps } from 'next'
 
 import ApplicationCollection from '../../../src/components/application/Collection'
 import fetchCollection from '../../../src/fetchers'
-import Collections from '../../../src/types/Collection'
-import Appstream from '../../../src/types/Appstream'
+import { Collections } from '../../../src/types/Collection'
+import { Appstream } from '../../../src/types/Appstream'
 import { NextSeo } from 'next-seo'
 
 export default function RecentlyUpdatedApps({ applications }) {

pages/apps/details/[appDetails].tsx

@@ -2,11 +2,19 @@ import { GetStaticPaths, GetStaticProps } from 'next'
 
 import ApplicationDetails from '../../../src/components/application/Details'
 import Main from '../../../src/components/layout/Main'
-import { fetchEntry } from '../../../src/fetchers'
+import { fetchEntry, fetchSummary } from '../../../src/fetchers'
 import { APPSTREAM_URL } from '../../../src/env'
 import { NextSeo } from 'next-seo'
+import { Appstream, Screenshot } from '../../../src/types/Appstream'
+import { Summary } from '../../../src/types/Summary'
 
-export default function Details({ data }) {
+export default function Details({
+  data,
+  summary,
+}: {
+  data: Appstream
+  summary: Summary
+}) {
   return (
     <Main>
       <NextSeo
@@ -17,13 +25,13 @@ export default function Details({ data }) {
             {
               url: data.icon,
             },
-            ...data.screenshots.map((screenshot: string) => ({
+            ...data.screenshots.map((screenshot: Screenshot) => ({
               url: screenshot['752x423'],
             })),
           ],
         }}
       />
-      <ApplicationDetails data={data} />
+      <ApplicationDetails data={data} summary={summary} />
     </Main>
   )
 }
@@ -33,10 +41,12 @@ export const getStaticProps: GetStaticProps = async ({
 }) => {
   console.log('Fetching data for app details: ', appDetails)
   const data = await fetchEntry(appDetails as string)
+  const summary = await fetchSummary(appDetails as string)
 
   return {
     props: {
       data,
+      summary,
     },
   }
 }

pages/apps/index.tsx

@@ -1,5 +1,5 @@
 import { GetStaticProps } from 'next'
-import Collections from '../../src/types/Collection'
+import { Collections } from '../../src/types/Collection'
 import fetchCollection from '../../src/fetchers'
 import ApplicationSection from '../../src/components/application/Section'
 import Main from '../../src/components/layout/Main'

pages/apps/search/[query].tsx

@@ -2,7 +2,7 @@ import { GetServerSideProps } from 'next'
 import { NextSeo } from 'next-seo'
 import Collection from '../../../src/components/application/Collection'
 import { fetchSearchQuery } from '../../../src/fetchers'
-import Appstream from '../../../src/types/Appstream'
+import { Appstream } from '../../../src/types/Appstream'
 
 export default function Search({ applications }) {
   return (

pages/index.tsx

@@ -1,13 +1,13 @@
 import { GetStaticProps } from 'next'
 import Link from 'next/link'
 
-import Collections from '../src/types/Collection'
 import ApplicationSection from '../src/components/application/Section'
 import Main from '../src/components/layout/Main'
 
 import fetchCollection from '../src/fetchers'
 import { APPS_IN_PREVIEW_COUNT } from '../src/env'
 import { NextSeo } from 'next-seo'
+import { Collections } from '../src/types/Collection'
 
 export default function Home({
   recentlyUpdated,

src/components/application/Card.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react'
 import Link from 'next/link'
 
-import Appstream from '../../types/Appstream'
+import { Appstream } from '../../types/Appstream'
 import styles from './Card.module.scss'
 
 interface Props {

src/components/application/Collection.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react'
 import { useRouter } from 'next/router'
 
-import Appstream from '../../types/Appstream'
+import { Appstream } from '../../types/Appstream'
 
 import ApplicationCard from '../application/Card'
 import Main from '../layout/Main'

src/components/application/Details.tsx

@@ -1,16 +1,17 @@
 import { FunctionComponent } from 'react'
 import { Carousel } from 'react-responsive-carousel'
+import { Appstream } from '../../types/Appstream'
+import { ProjectUrl } from '../../types/ProjectUrl'
 
-import Appstream from '../../types/Appstream'
-import ProjectUrl from '../../types/ProjectUrl'
-
+import { Summary } from '../../types/Summary'
 import ProjectUrlWidget from './ProjectUrl'
 
 interface Props {
   data: Appstream
+  summary: Summary
 }
 
-const Details: FunctionComponent<Props> = ({ data }) => {
+const Details: FunctionComponent<Props> = ({ data, summary }) => {
   if (data) {
     const latestRelease = data.releases ? data.releases[0] : null
     const moreThan1Screenshot = data.screenshots

src/components/application/ProjectUrl.tsx

@@ -1,4 +1,4 @@
-import ProjectUrl from '../../types/ProjectUrl'
+import { ProjectUrl } from '../../types/ProjectUrl'
 
 const ProjectUrlWidget = ({ url, type }) => {
   let label = ''

src/components/application/Section.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react'
 import Link from 'next/link'
 
-import Appstream from '../../types/Appstream'
+import { Appstream } from '../../types/Appstream'
 
 import ApplicationCard from './Card'
 

src/components/categories/List.tsx

@@ -1,4 +1,4 @@
-import Category from '../../types/Category'
+import { Category } from '../../types/Category'
 import CategoryCard from './Card'
 
 const CategoriesList = () => (

src/components/layout/SideMenu_wip.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link'
 
-import Category from '../../types/Category'
+import { Category } from '../../types/Category'
 
 import styles from './SideMenu.module.scss'
 

src/env.ts

@@ -1,4 +1,4 @@
-import Category from './types/Category'
+import { Category } from './types/Category'
 
 const BASE_URI: string =
   process.env.API_BASE_URI ||

src/fetchers.ts

@@ -1,26 +1,58 @@
-import Appstream from './types/Appstream'
-import Collections, {Collection} from './types/Collection'
-import Category from './types/Category'
-
-import {POPULAR_URL, APP_DETAILS, RECENTLY_UPDATED_URL, EDITORS_PICKS_APPS_URL, EDITORS_PICKS_GAMES_URL, APPSTREAM_URL, CATEGORY_URL, SEARCH_APP} from './env'
+import { Appstream } from './types/Appstream'
+import { Collection, Collections } from './types/Collection'
+import { Category } from './types/Category'
+
+import {
+  POPULAR_URL,
+  APP_DETAILS,
+  RECENTLY_UPDATED_URL,
+  EDITORS_PICKS_APPS_URL,
+  EDITORS_PICKS_GAMES_URL,
+  APPSTREAM_URL,
+  CATEGORY_URL,
+  SEARCH_APP,
+  SUMMARY_DETAILS,
+} from './env'
+import { Summary } from './types/Summary'
 
 export async function fetchEntry(entry: string): Promise<Appstream | {}> {
   let entryJson: Appstream | {}
   try {
     const entryData = await fetch(`${APP_DETAILS(entry)}`)
     entryJson = await entryData.json()
-  } catch(error) {
+  } catch (error) {
     console.log(error)
     entryJson = {}
   }
 
-  if(!entryJson) {console.log("No data for ", entry)}
-  return entryJson;
+  if (!entryJson) {
+    console.log('No data for ', entry)
+  }
+  return entryJson
+}
+
+export async function fetchSummary(entry: string): Promise<Summary | {}> {
+  let summaryJson: Summary | {}
+  try {
+    const summaryData = await fetch(`${SUMMARY_DETAILS(entry)}`)
+    summaryJson = await summaryData.json()
+  } catch (error) {
+    console.log(error)
+    summaryJson = {}
+  }
+
+  if (!summaryJson) {
+    console.log('No data for ', entry)
+  }
+  return summaryJson
 }
 
-export default async function fetchCollection (collection: Collection, count?: number): Promise<Appstream[]> {
+export default async function fetchCollection(
+  collection: Collection,
+  count?: number
+): Promise<Appstream[]> {
   let collectionURL: string = ''
-  switch(collection) {
+  switch (collection) {
     case Collections.popular:
       collectionURL = POPULAR_URL
       break
@@ -33,10 +65,11 @@ export default async function fetchCollection (collection: Collection, count?: n
     case Collections.editorsGames:
       collectionURL = EDITORS_PICKS_GAMES_URL
       break
-    default: collectionURL = ''
+    default:
+      collectionURL = ''
   }
   if (collectionURL === '') {
-    console.log("Wrong collection parameter. Check your function call!")
+    console.log('Wrong collection parameter. Check your function call!')
     return
   }
 
@@ -49,9 +82,9 @@ export default async function fetchCollection (collection: Collection, count?: n
 
   const items: Appstream[] = await Promise.all(limitedList.map(fetchEntry))
 
-  console.log("\nCollection ", collection, " fetched")
+  console.log('\nCollection ', collection, ' fetched')
 
-  return items.filter(item => Boolean(item))
+  return items.filter((item) => Boolean(item))
 }
 
 export async function fetchApps() {
@@ -60,9 +93,9 @@ export async function fetchApps() {
 
   const items: Appstream[] = await Promise.all(appList.map(fetchEntry))
 
-  console.log("\nApps fetched")
+  console.log('\nApps fetched')
 
-  return items.filter(item => Boolean(item))
+  return items.filter((item) => Boolean(item))
 }
 
 export async function fetchCategory(category: keyof typeof Category) {
@@ -71,16 +104,16 @@ export async function fetchCategory(category: keyof typeof Category) {
 
   const items: Appstream[] = await Promise.all(appList.map(fetchEntry))
 
-  console.log("\nCategory", category, " fetched")
+  console.log('\nCategory', category, ' fetched')
 
-  return items.filter(item => Boolean(item))
+  return items.filter((item) => Boolean(item))
 }
 
-export async function fetchSearchQuery(query:string) {
+export async function fetchSearchQuery(query: string) {
   const appListRes = await fetch(SEARCH_APP(query))
   const appList = await appListRes.json()
 
   console.log("\nSearch for query: '", query, "' fetched")
 
-  return appList.filter(item => Boolean(item))
+  return appList.filter((item) => Boolean(item))
 }

src/types/Appstream.ts

@@ -1,4 +1,4 @@
-interface Appstream {
+export interface Appstream {
   description: string
   screenshots: Screenshot[]
   releases: Release[]
@@ -33,19 +33,17 @@ interface Urls {
   translate: string
 }
 
-interface Screenshot {
-  "624x351"?: string
-  "1248x702"?: string
-  "112x63"?: string
-  "224x126"?: string
-  "752x423"?: string
-  "1504x846"?: string
+export interface Screenshot {
+  '624x351'?: string
+  '1248x702'?: string
+  '112x63'?: string
+  '224x126'?: string
+  '752x423'?: string
+  '1504x846'?: string
 }
 
 interface Release {
   description?: string
   timestamp: number
   version: string
 }
-
-export default Appstream