From 7b43914b4ce07b62aba6ef70bf1256c930ecdf82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20=C5=A0korpil?= <stepan@skorpil.cz>
Date: Fri, 7 Jan 2022 16:01:42 +0100
Subject: [PATCH] Fixed Matomo, preparations for parentFeed

---
 Dockerfile                                |  4 ++--
 application/src/components/Avatar.tsx     |  5 ++---
 application/src/components/Layout.tsx     |  7 ++++---
 application/src/components/ParentFeed.tsx | 20 ++++++++++++++++++++
 application/src/components/Result.tsx     |  4 +++-
 application/src/lib/getMatomo.ts          | 14 ++++++++++++++
 application/src/lib/matomo.ts             | 12 ------------
 application/src/lib/matomoConfig.ts       | 10 ++++++++++
 application/src/pages/api/feed.ts         |  3 ++-
 application/src/pages/index.tsx           | 21 ++++++++++++++++-----
 application/src/types/FeedResponse.ts     | 12 +++++++++++-
 11 files changed, 84 insertions(+), 28 deletions(-)
 create mode 100644 application/src/components/ParentFeed.tsx
 create mode 100644 application/src/lib/getMatomo.ts
 delete mode 100644 application/src/lib/matomo.ts
 create mode 100644 application/src/lib/matomoConfig.ts

diff --git a/Dockerfile b/Dockerfile
index ecac0d5..e1e1cda 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,7 +1,7 @@
 FROM node:16-bullseye AS build
 ENV POSTGRES_URL='postgresql://fedisearch:passwd@postgres:5432/fedisearch?schema=public' \
-    NEXT_PUBLIC_MATOMO_URL='' \
-    NEXT_PUBLIC_MATOMO_SITE_ID='' \
+    MATOMO_URL='' \
+    MATOMO_SITE_ID='' \
     TZ='UTC'
 WORKDIR /srv
 COPY application/package*.json ./
diff --git a/application/src/components/Avatar.tsx b/application/src/components/Avatar.tsx
index a67a520..866cbc3 100644
--- a/application/src/components/Avatar.tsx
+++ b/application/src/components/Avatar.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
-import { FeedResponseItem } from '../types/FeedResponse'
 
-const Avatar:React.FC<{feed:FeedResponseItem}> = ({ feed }) => {
+const Avatar:React.FC<{url:string|null|undefined}> = ({ url }) => {
   const fallbackImage = '/avatar.svg'
 
   const handleAvatarImageError = (event) => {
@@ -11,7 +10,7 @@ const Avatar:React.FC<{feed:FeedResponseItem}> = ({ feed }) => {
   return (
       <img
           className={'avatar'}
-          src={feed.avatar ?? fallbackImage}
+          src={url ?? fallbackImage}
           alt={'Avatar'}
           onError={handleAvatarImageError}
       />
diff --git a/application/src/components/Layout.tsx b/application/src/components/Layout.tsx
index 866bc0a..b2aefa5 100644
--- a/application/src/components/Layout.tsx
+++ b/application/src/components/Layout.tsx
@@ -1,13 +1,14 @@
 import React, { useEffect } from 'react'
 import Head from 'next/head'
-import { tracker } from '../lib/matomo'
 import Footer from './Footer'
+import getMatomo from '../lib/getMatomo'
+import { UserOptions } from '@datapunt/matomo-tracker-js/es/types'
 
 export const siteTitle = 'FediSearch'
 
-const Layout:React.FC<{ children: React.ReactNode }> = ({ children }) => {
+const Layout:React.FC<{ matomoConfig:UserOptions, children: React.ReactNode }> = ({ matomoConfig, children }) => {
   useEffect(() => {
-    tracker.trackPageView()
+    getMatomo(matomoConfig).trackPageView()
   })
   return (
         <div className={'container'}>
diff --git a/application/src/components/ParentFeed.tsx b/application/src/components/ParentFeed.tsx
new file mode 100644
index 0000000..3f33724
--- /dev/null
+++ b/application/src/components/ParentFeed.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import Avatar from './Avatar'
+import { FeedResponseParent } from '../types/FeedResponse'
+
+const ParentFeed: React.FC<{feed:FeedResponseParent|null}> = ({ feed }) => {
+  if (feed === null) {
+    return (<></>)
+  }
+  return (
+        <div className={'parent-feed'}>
+            <Avatar url={feed.avatar}/>
+            <div className={'display-name'}>
+                <a href={feed.url}>{feed.displayName}</a>
+            </div>
+            <div className={'address'}>{feed.name}@{feed.domain}</div>
+        </div>
+  )
+}
+
+export default ParentFeed
diff --git a/application/src/components/Result.tsx b/application/src/components/Result.tsx
index d915c42..9ebcadd 100644
--- a/application/src/components/Result.tsx
+++ b/application/src/components/Result.tsx
@@ -8,6 +8,7 @@ import CreatedAtBadge from './badges/CreatedAtBadge'
 import LastPostAtBadge from './badges/LastPostAtBadge'
 import BotBadge from './badges/BotBadge'
 import { FeedResponseField, FeedResponseItem } from '../types/FeedResponse'
+import ParentFeed from './ParentFeed'
 
 const Result:React.FC<{ feed:FeedResponseItem }> = ({ feed }) => {
   const fallbackEmojiImage = '/emoji.svg'
@@ -33,9 +34,10 @@ const Result:React.FC<{ feed:FeedResponseItem }> = ({ feed }) => {
                  dangerouslySetInnerHTML={{ __html: striptags(feed.displayName, ['img']) }}
               />
           </h3>
-        <Avatar feed={feed}/>
+        <Avatar url={feed.avatar}/>
         <div className={'address'}>
             <span>{feed.name}@{feed.node.domain}</span>
+            <ParentFeed feed={feed.parentFeed}/>
         </div>
       <div className={'badges'}>
           <SoftwareBadge softwareName={feed.node.softwareName}/>
diff --git a/application/src/lib/getMatomo.ts b/application/src/lib/getMatomo.ts
new file mode 100644
index 0000000..b28c393
--- /dev/null
+++ b/application/src/lib/getMatomo.ts
@@ -0,0 +1,14 @@
+import { UserOptions } from '@datapunt/matomo-tracker-js/es/types'
+import MatomoTracker from '@datapunt/matomo-tracker-js'
+
+let matomo:MatomoTracker|undefined
+
+const getMatomo = (config:UserOptions):MatomoTracker => {
+  if (!matomo) {
+    console.info('Starting Matomo', config)
+    matomo = new MatomoTracker(config)
+  }
+  return matomo
+}
+
+export default getMatomo
diff --git a/application/src/lib/matomo.ts b/application/src/lib/matomo.ts
deleted file mode 100644
index ddc473b..0000000
--- a/application/src/lib/matomo.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import MatomoTracker from '@datapunt/matomo-tracker-js'
-
-export const tracker = new MatomoTracker({
-  urlBase: typeof process.env.NEXT_PUBLIC_MATOMO_URL === 'string' && process.env.NEXT_PUBLIC_MATOMO_URL !== ''
-    ? process.env.NEXT_PUBLIC_MATOMO_URL
-    : 'https://dummy.url',
-  siteId: parseInt(typeof process.env.NEXT_PUBLIC_MATOMO_SITE_ID === 'string' && process.env.NEXT_PUBLIC_MATOMO_SITE_ID !== ''
-    ? process.env.NEXT_PUBLIC_MATOMO_SITE_ID
-    : '1'
-  ),
-  disabled: !process.env.NEXT_PUBLIC_MATOMO_URL || !process.env.NEXT_PUBLIC_MATOMO_SITE_ID
-})
diff --git a/application/src/lib/matomoConfig.ts b/application/src/lib/matomoConfig.ts
new file mode 100644
index 0000000..b9221bd
--- /dev/null
+++ b/application/src/lib/matomoConfig.ts
@@ -0,0 +1,10 @@
+export const matomoConfig = {
+  urlBase: typeof process.env.MATOMO_URL === 'string' && process.env.MATOMO_URL !== ''
+    ? process.env.MATOMO_URL
+    : 'https://domain.tld',
+  siteId: parseInt(typeof process.env.MATOMO_SITE_ID === 'string' && process.env.MATOMO_SITE_ID !== ''
+    ? process.env.MATOMO_SITE_ID
+    : '1'
+  ),
+  disabled: !process.env.MATOMO_URL || !process.env.MATOMO_SITE_ID
+}
diff --git a/application/src/pages/api/feed.ts b/application/src/pages/api/feed.ts
index 90aa6ac..293b7e5 100644
--- a/application/src/pages/api/feed.ts
+++ b/application/src/pages/api/feed.ts
@@ -65,7 +65,8 @@ const handleFeedSearch = async (req:NextApiRequest, res:NextApiResponse<FeedResp
             softwareName: feed.node.softwareName
           },
           type: feed.type,
-          url: feed.url
+          url: feed.url,
+          parentFeed: null // TODO find parent data
         }
       })
     })
diff --git a/application/src/pages/index.tsx b/application/src/pages/index.tsx
index 0b2d356..34cd4eb 100644
--- a/application/src/pages/index.tsx
+++ b/application/src/pages/index.tsx
@@ -2,14 +2,16 @@ import Head from 'next/head'
 import React, { useEffect, useState } from 'react'
 import axios from 'axios'
 import { feedResponseSchema } from '../types/FeedResponse'
-import { tracker } from '../lib/matomo'
 import Loader from '../components/Loader'
 import Results from '../components/Results'
 import Layout, { siteTitle } from '../components/Layout'
+import { matomoConfig } from '../lib/matomoConfig'
+import getMatomo from '../lib/getMatomo'
+import { GetServerSideProps, InferGetServerSidePropsType } from 'next'
 
 let source = axios.CancelToken.source()
 
-const Home:React.FC = () => {
+const Home:React.FC<InferGetServerSidePropsType<typeof getServerSideProps>> = ({ matomoConfig }) => {
   const [query, setQuery] = useState('')
   const [submitted, setSubmitted] = useState(null)
   const [loading, setLoading] = useState(false)
@@ -54,7 +56,7 @@ const Home:React.FC = () => {
     console.info('Loading new query search', { query, page })
     setLoading(true)
     setTimeout(search)
-    tracker.trackEvent({
+    getMatomo(matomoConfig).trackEvent({
       category: 'feeds',
       action: 'new-search'
     })
@@ -67,7 +69,7 @@ const Home:React.FC = () => {
     }
     console.info('Loading next page', { query, page })
     setTimeout(search)
-    tracker.trackEvent({
+    getMatomo(matomoConfig).trackEvent({
       category: 'feeds',
       action: 'next-page',
       customDimensions: [
@@ -102,7 +104,7 @@ const Home:React.FC = () => {
   useEffect(loadNextPageResults, [page])
 
   return (
-        <Layout>
+        <Layout matomoConfig={matomoConfig}>
             <Head>
                 <title>{siteTitle}</title>
             </Head>
@@ -154,4 +156,13 @@ const Home:React.FC = () => {
   )
 }
 
+export const getServerSideProps:GetServerSideProps = async (context) => {
+  console.info('Loading matomo config', matomoConfig)
+  return {
+    props: {
+      matomoConfig
+    }
+  }
+}
+
 export default Home
diff --git a/application/src/types/FeedResponse.ts b/application/src/types/FeedResponse.ts
index 33ccdd9..344ed5e 100644
--- a/application/src/types/FeedResponse.ts
+++ b/application/src/types/FeedResponse.ts
@@ -5,6 +5,14 @@ export const feedResponseFieldSchema = z.object({
   value: z.string()
 })
 
+export const feedResponseParentSchema = z.object({
+  name: z.string(),
+  domain: z.string(),
+  displayName: z.string().nullable(),
+  avatar: z.string().nullable(),
+  url: z.string()
+})
+
 export const feedResponseItemSchema = z.object({
   avatar: z.string().url().nullable(),
   bot: z.boolean().nullable(),
@@ -22,7 +30,8 @@ export const feedResponseItemSchema = z.object({
     softwareName: z.string()
   }),
   type: z.enum(['account', 'channel']),
-  url: z.string().url()
+  url: z.string().url(),
+  parentFeed: z.nullable(feedResponseParentSchema)
 })
 
 export const feedResponseSchema = z.object({
@@ -33,3 +42,4 @@ export const feedResponseSchema = z.object({
 export type FeedResponse = z.infer<typeof feedResponseSchema>
 export type FeedResponseItem = z.infer<typeof feedResponseItemSchema>
 export type FeedResponseField = z.infer<typeof feedResponseFieldSchema>
+export type FeedResponseParent = z.infer<typeof feedResponseParentSchema>