-
-
Loading...
+
+ const spinner = (
+
+
)
+
if (table) {
return (
- <>
- {showTop && loading
- ? (
-
- | {loaderVisual} |
-
- )
- : ''}
- { hideContent && loading ? '' : children}
- {showBottom && loading
- ? (
-
- | {loaderVisual} |
-
- )
- : ''}
-
+ <>
+ {showTop && loading
+ ? (
+
+
+ |
+ {spinner}
+ |
+
+
+ )
+ : ''}
+ {hideContent && loading ? '' : children}
+ {showBottom && loading
+ ? (
+
+
+ |
+
+
+
+ |
+
+
+ )
+ : ''}
+
)
}
return (
-
- {showTop && loading ? loaderVisual : ''}
-
- {hideContent && loading ? '' : children}
-
- {showBottom && loading ? loaderVisual : ''}
-
+ <>
+ {showTop && loading ? spinner : ''}
+ {hideContent && loading ? '' : children}
+ {showBottom && loading ? spinner : ''}
+
)
}
diff --git a/application/src/components/NavBar.tsx b/application/src/components/NavBar.tsx
new file mode 100644
index 0000000..292e58d
--- /dev/null
+++ b/application/src/components/NavBar.tsx
@@ -0,0 +1,34 @@
+import React, { useState } from 'react'
+import NavItem from './NavItem'
+import { faUser, faServer, faChartPie } from '@fortawesome/free-solid-svg-icons'
+
+const NavBar:React.FC = () => {
+ const [showMenu, setShowMenu] = useState
(false)
+ return (
+
+ )
+}
+
+export default NavBar
diff --git a/application/src/components/NavItem.tsx b/application/src/components/NavItem.tsx
index 6524063..6d65446 100644
--- a/application/src/components/NavItem.tsx
+++ b/application/src/components/NavItem.tsx
@@ -1,14 +1,17 @@
-import React, { FC, ReactElement } from 'react'
+import React, { FC } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
+import { IconProp } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-const NavItem:FC<{path:string, label:string, icon:ReactElement}> = ({ path, label, icon }) => {
+const NavItem:FC<{path:string, label:string, icon:IconProp}> = ({ path, label, icon }) => {
const router = useRouter()
+ const active = router.pathname === path
return (
-
+
-
- {icon}
+
+
{label}
diff --git a/application/src/components/ProgressBar.tsx b/application/src/components/ProgressBar.tsx
index ed22bea..5e23431 100644
--- a/application/src/components/ProgressBar.tsx
+++ b/application/src/components/ProgressBar.tsx
@@ -5,9 +5,9 @@ const ProgressBar: React.FC<{ percents: number, way?: 'left' | 'right' | 'top' |
percents = Math.round(percents)
color = color ?? 'var(--accent-color)'
return (
-
+
)
}
diff --git a/application/src/components/Result.tsx b/application/src/components/Result.tsx
deleted file mode 100644
index 6f0de87..0000000
--- a/application/src/components/Result.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { useEffect } from 'react'
-import striptags from 'striptags'
-import Avatar from './Avatar'
-import SoftwareBadge from './badges/SoftwareBadge'
-import FeedTypeBadge from './badges/FeedTypeBadge'
-import SubscriptionsBadge from './badges/SubscriptionsBadge'
-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'
-import StatusesCountBadge from './badges/StatusesCountBadge'
-
-const Result:React.FC<{ feed:FeedResponseItem }> = ({ feed }) => {
- const fallbackEmojiImage = '/emoji.svg'
-
- const handleEmojiImageError = (event) => {
- event.target.src = fallbackEmojiImage
- }
-
- useEffect(() => {
- document.querySelectorAll('.with-emoji img').forEach(element => {
- if (element.attributes['data-error-handler']) {
- return
- }
- element.addEventListener('error', handleEmojiImageError)
- element.setAttribute('data-error-handler', 'attached')
- })
- })
-
- return (
-
-
-
-
-
-
-
{feed.name}@{feed.node.domain}
-
-
-
-
-
-
-
-
-
-
- {feed.fields.length > 0
- ? (
-
- {
- feed.fields.map((field:FeedResponseField, index:number):React.ReactNode => {
- return (
-
- |
- |
-
- )
- })
- }
-
- )
- : ''}
-
- )
-}
-
-export default Result
diff --git a/application/src/components/SortToggle.tsx b/application/src/components/SortToggle.tsx
index 8ada080..8e6f56f 100644
--- a/application/src/components/SortToggle.tsx
+++ b/application/src/components/SortToggle.tsx
@@ -1,5 +1,7 @@
import React from 'react'
import { Sort } from '../types/Sort'
+import { faSortUp, faSortDown } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const SortToggle: React.FC<{
onToggle:(StatsRequestSortBy)=>void,
@@ -11,23 +13,13 @@ const SortToggle: React.FC<{
{children}
{sort.sortBy === field && sort.sortWay === 'asc'
? (
-
+
)
: ''
}
{sort.sortBy === field && sort.sortWay === 'desc'
? (
-
+
)
: ''
}
diff --git a/application/src/components/Spinner.tsx b/application/src/components/Spinner.tsx
new file mode 100644
index 0000000..44a295f
--- /dev/null
+++ b/application/src/components/Spinner.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Spinner: React.FC = () => {
+ return (
+
+ Loading...
+
+ )
+}
+
+export default Spinner
diff --git a/application/src/components/badges/Badge.tsx b/application/src/components/badges/Badge.tsx
new file mode 100644
index 0000000..081319c
--- /dev/null
+++ b/application/src/components/badges/Badge.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IconProp } from '@fortawesome/fontawesome-svg-core'
+
+const Badge:React.FC<{ faIcon:IconProp, label:string, value:string|number|null, className?:string, showUnknown?:boolean }> = ({ faIcon, label, value, className, showUnknown }) => {
+ if (value === null && showUnknown !== true) {
+ return (<>)
+ }
+ return (
+
+
+ {label}:
+ {value === null ? '?' : value}
+
+ )
+}
+export default Badge
diff --git a/application/src/components/badges/BotBadge.tsx b/application/src/components/badges/BotBadge.tsx
index bc20b53..ac9fa8d 100644
--- a/application/src/components/badges/BotBadge.tsx
+++ b/application/src/components/badges/BotBadge.tsx
@@ -1,17 +1,14 @@
import React from 'react'
+import { faRobot } from '@fortawesome/free-solid-svg-icons'
+import Badge from './Badge'
-const BotBadge:React.FC<{ bot: boolean | null }> = ({ bot }) => {
+const BotBadge:React.FC<{ bot: boolean | null}> = ({ bot }) => {
return (
-
-
-
Bot
-
{bot !== null ? (bot ? 'Yes' : 'No') : '?'}
-
-
-
Created at
-
{createdAt !== null ? (new Date(createdAt)).toLocaleDateString() : '?'}
-
-
-
Feed type
-
Channel
-
-
-
Feed type
-
Account
-
-
-
Last status at
-
{lastStatusAt !== null ? (new Date(lastStatusAt)).toLocaleDateString() : '?'}
-
+ return (
= ({ statusesCount }) => {
return (
-
-
-
Status count
-
{statusesCount !== null ? statusesCount : '?'}
-
+
)
}
diff --git a/application/src/components/badges/SubscriptionsBadge.tsx b/application/src/components/badges/SubscriptionsBadge.tsx
deleted file mode 100644
index e1b101e..0000000
--- a/application/src/components/badges/SubscriptionsBadge.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-
-const SubscriptionsBadge:React.FC<{ followingCount: number | null, followersCount: number | null }> = (
- { followingCount, followersCount }
-) => {
- return (
-
-
-
- Following
- {followingCount !== null ? followingCount : '?'}
-
-
- Followers
- {followersCount !== null ? followersCount : '?'}
-
-
- )
-}
-
-export default SubscriptionsBadge
diff --git a/application/src/pages/feeds.tsx b/application/src/pages/feeds.tsx
index 365bdb9..73f765f 100644
--- a/application/src/pages/feeds.tsx
+++ b/application/src/pages/feeds.tsx
@@ -3,15 +3,17 @@ import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { feedResponseSchema } from '../types/FeedResponse'
import Loader from '../components/Loader'
-import Results from '../components/Results'
+import FeedResults from '../components/FeedResults'
import Layout, { siteTitle } from '../components/Layout'
import { matomoConfig } from '../lib/matomoConfig'
import getMatomo from '../lib/getMatomo'
import { GetServerSideProps, InferGetServerSidePropsType } from 'next'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSearch, faAngleDoubleDown } from '@fortawesome/free-solid-svg-icons'
let source = axios.CancelToken.source()
-const Feeds:React.FC
> = ({ matomoConfig }) => {
+const Feeds: React.FC> = ({ matomoConfig }) => {
const [query, setQuery] = useState('')
const [submitted, setSubmitted] = useState(null)
const [loading, setLoading] = useState(false)
@@ -49,7 +51,7 @@ const Feeds:React.FC> = (
setResults([])
setHasMore(false)
setLoaded(false)
- if (query.length < 3) {
+ if (query.length < 1) {
console.info('Query too short.')
return
}
@@ -108,55 +110,51 @@ const Feeds:React.FC> = (
{siteTitle}
- Search people
+ People
+
{
loaded
- ?
+ ?
: ''
}
{hasMore && !loading
? (
-
+
+
+
)
: ''}
)
}
-export const getServerSideProps:GetServerSideProps = async (context) => {
+export const getServerSideProps: GetServerSideProps = async (context) => {
console.info('Loading matomo config', matomoConfig)
return {
props: {
diff --git a/application/src/pages/nodes.tsx b/application/src/pages/nodes.tsx
index 344e383..cf0d7af 100644
--- a/application/src/pages/nodes.tsx
+++ b/application/src/pages/nodes.tsx
@@ -11,10 +11,12 @@ import SoftwareBadge from '../components/badges/SoftwareBadge'
import SortToggle from '../components/SortToggle'
import { StatsRequestSortBy } from '../types/StatsRequest'
import { Sort } from '../types/Sort'
+import { faSearch, faAngleDoubleDown } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
let source = axios.CancelToken.source()
-const Nodes:React.FC> = ({ matomoConfig }) => {
+const Nodes: React.FC> = ({ matomoConfig }) => {
const [query, setQuery] = useState('')
const [submitted, setSubmitted] = useState(null)
const [loading, setLoading] = useState(false)
@@ -124,133 +126,132 @@ const Nodes:React.FC> = (
useEffect(loadNextPageResults, [page])
return (
-
-
- {siteTitle}
-
- Search servers
-
-
- {
- loaded
- ? (
-
-
-
- |
-
- Domain
-
- |
-
-
- Software
-
- |
- User count |
-
-
- Statuses
-
- |
-
-
- Registrations
-
- |
-
-
- Last refreshed
-
- |
-
-
- |
-
- Total
-
- |
-
-
- Month active
-
- |
-
-
- Half year active
-
- |
-
-
-
- {results.length
- ? results.map((node, index) => {
- return (
-
- | {node.domain} |
-
-
- {node.softwareVersion ?? ''} |
- {node.totalUserCount ?? '?'} |
- {node.monthActiveUserCount ?? '?'} |
- {node.halfYearActiveUserCount ?? '?'} |
- {node.statusesCount ?? '?'} |
- {node.openRegistrations === null ? '?' : (node.openRegistrations ? 'Opened' : 'Closed')} |
- {node.refreshedAt ? (new Date(node.refreshedAt)).toLocaleDateString() : 'Never'} |
-
- )
- })
- : (
-
- | No servers found |
-
- )}
-
-
- )
- : ''
- }
-
- {hasMore && !loading
- ? (
-
- )
- : ''}
-
+
+
+ {siteTitle}
+
+ Search servers
+
+
+ {
+ loaded
+ ? (
+
+
+
+
+ |
+
+ Domain
+
+ |
+
+
+ Software
+
+ |
+ User count |
+
+
+ Statuses
+
+ |
+
+
+ Registrations
+
+ |
+
+
+ Last refreshed
+
+ |
+
+
+ |
+
+ Total
+
+ |
+
+
+ Month active
+
+ |
+
+
+ Half year active
+
+ |
+
+
+
+ {results.length
+ ? results.map((node, index) => {
+ return (
+
+ | {node.domain} |
+
+
+ {node.softwareVersion ?? ''}
+ |
+ {node.totalUserCount ?? '?'} |
+ {node.monthActiveUserCount ?? '?'} |
+ {node.halfYearActiveUserCount ?? '?'} |
+ {node.statusesCount ?? '?'} |
+ {node.openRegistrations === null ? '?' : (node.openRegistrations ? 'Opened' : 'Closed')} |
+ {node.refreshedAt ? (new Date(node.refreshedAt)).toLocaleDateString() : 'Never'} |
+
+ )
+ })
+ : (
+
+ | No servers found |
+
+ )}
+
+
+
+
+
+ )
+ : ''}
+
)
}
-export const getServerSideProps:GetServerSideProps = async (context) => {
+export const getServerSideProps: GetServerSideProps = async (context) => {
console.info('Loading matomo config', matomoConfig)
return {
props: {
diff --git a/application/src/pages/stats.tsx b/application/src/pages/stats.tsx
index 8612cc1..92ac0cd 100644
--- a/application/src/pages/stats.tsx
+++ b/application/src/pages/stats.tsx
@@ -96,88 +96,95 @@ const Stats: React.FC> =
{'Stats | ' + siteTitle}
Index stats
-
-
-
- |
-
- Software name
-
- |
-
-
- Instance count
-
- |
-
-
- Account count
-
- |
-
-
- Channel count
-
- |
-
-
-
- {stats === null
- ? (| Failed to load stats data! |
)
- : (
- <>
-
- {
- stats.softwares.map((software, index) => {
- return software.name !== null
- ? (
-
- |
-
- |
-
- {software.nodeCount}
-
- |
-
- {software.accountCount}
-
- |
-
- {software.channelCount}
-
- |
-
- )
- : (
-
- | Not recognized |
- {software.nodeCount} |
- {software.accountCount}
- |
- {software.channelCount}
- |
-
- )
- })
- }
-
-
-
- | Summary |
- {sum.nodeCount} |
- {sum.accountCount} |
- {sum.channelCount} |
-
-
-
- )
- }
-
-
+
+
+
+
+ |
+
+ Software name
+
+ |
+
+
+ Instance count
+
+ |
+
+
+ Account count
+
+ |
+
+
+ Channel count
+
+ |
+
+
+
+ {stats === null
+ ? (
+ | Failed to load stats data! |
+
)
+ : (
+ <>
+
+ {
+ stats.softwares.map((software, index) => {
+ return software.name !== null
+ ? (
+
+ |
+
+ |
+
+ {software.nodeCount}
+
+ |
+
+ {software.accountCount}
+
+ |
+
+ {software.channelCount}
+
+ |
+
+ )
+ : (
+
+ | Not recognized |
+ {software.nodeCount}
+ |
+
+ {software.accountCount}
+ |
+
+ {software.channelCount}
+ |
+
+ )
+ })
+ }
+
+
+
+ | Summary |
+ {sum.nodeCount} |
+ {sum.accountCount} |
+ {sum.channelCount} |
+
+
+
+ )
+ }
+
+
+