Super MVP-ish annual report page

Author: cheeaun

src/app.jsx

@@ -46,6 +46,7 @@ import Search from './pages/search';
 import StatusRoute from './pages/status-route';
 import Trending from './pages/trending';
 import Welcome from './pages/welcome';
+import AnnualReport from './pages/annual-report';
 import {
   api,
   hasInstance,
@@ -546,6 +547,7 @@ function SecondaryRoutes({ isLoggedIn }) {
           <Route path="/fh" element={<FollowedHashtags />} />
           <Route path="/ft" element={<Filters />} />
           <Route path="/catchup" element={<Catchup />} />
+          <Route path="/annual_report/:year" element={<AnnualReport />} />
         </>
       )}
       <Route path="/:instance?/t/:hashtag" element={<Hashtag />} />

src/components/notification.jsx

@@ -261,6 +261,9 @@ const contentText = {
   ),
   emoji_reaction: emojiText,
   'pleroma:emoji_reaction': emojiText,
+  annual_report: ({ year }) => (
+    <Trans>Your {year} #Wrapstodon is here!</Trans>
+  ),
 };
 
 // account_suspension, domain_block, user_domain_block
@@ -312,6 +315,7 @@ function Notification({
     report,
     event,
     moderation_warning,
+    annualReport,
     // Client-side grouped notification
     _ids,
     _accounts,
@@ -409,6 +413,10 @@ function Notification({
         emoji: notification.emoji,
         emojiURL,
       });
+    } else if (type === 'annual_report') {
+      text = text({
+        ...notification.annualReport,
+      });
     } else {
       text = text({
         account: account ? (
@@ -527,6 +535,11 @@ function Notification({
                 </a>
               </div>
             )}
+            {type === 'annual_report' && (
+              <div>
+                <Link to={`/annual_report/${annualReport?.year}`}><Trans>View #Wrapstodon</Trans></Link>
+              </div>
+            )}
           </>
         )}
         {_accounts?.length > 1 && (

src/locales/en.po

@@ -0,0 +1,77 @@
+#annual-report-page {
+  .report {
+    background-color: var(--bg-color);
+    border: 16px ridge var(--bg-faded-color);
+    box-shadow: 0 0 0 2px var(--bg-color);
+    padding: 16px;
+    margin: 80px auto;
+    max-width: var(--main-width);
+    font-family: var(--monospace-font);
+    font-variant-numeric: slashed-zero;
+    font-feature-settings: 'ss01';
+    font-variant-numeric: tabular-nums;
+    min-height: 80vh;
+
+    h1 {
+      margin: 0;
+      padding: 0;
+    }
+
+    dt {
+      font-weight: bold;
+      font-size: larger;
+    }
+
+    dd {
+      margin: 0 0 2em;
+      padding: 0;
+      overflow: auto;
+    }
+
+    table {
+      width: 100%;
+
+      td, th {
+        vertical-align: top;
+      }
+
+      th {
+        font-weight: normal;
+        text-align: start;
+        color: var(--text-insignificant-color);
+        text-transform: uppercase;
+      }
+
+      tr > * {
+        border-top: 1px dashed var(--outline-color);
+      }
+    }
+
+    .report-topStatuses {
+      dt {
+        font-size: var(--text-size);
+      }
+
+      dd {
+        margin-block-end: 1em;
+
+        > a {
+          display: block;
+          color: inherit;
+          text-decoration: none;
+          border: 2px dashed var(--outline-stronger-color);
+
+          &:is(:hover, :focus) {
+            border-color: var(--text-color);
+          }
+        }
+
+        .status {
+          pointer-events: none;
+          font-size: calc(var(--text-size) * .8);
+        }
+      }
+
+    }
+  }
+}

src/pages/annual-report.css

@@ -0,0 +1,137 @@
+import { t, Trans } from '@lingui/macro';
+
+import './annual-report.css';
+
+import { useEffect, useState } from 'preact/hooks';
+import { useParams } from 'react-router-dom';
+
+import Link from '../components/link';
+import Loader from '../components/loader';
+import NameText from '../components/name-text';
+import Status from '../components/status';
+import { api } from '../utils/api';
+import useTitle from '../utils/useTitle';
+
+export default function AnnualReport() {
+  const params = useParams();
+  const { year } = params;
+  useTitle(year ? `Annual Report: ${year}` : 'Annual Report');
+  const { masto, instance } = api();
+  const [results, setResults] = useState(null);
+  const [uiState, setUIState] = useState('default');
+
+  useEffect(() => {
+    if (year) {
+      (async () => {
+        setUIState('loading');
+        const results = await masto.v1.annualReports.$select(year).fetch();
+        console.log('REPORT', results);
+        setResults(results);
+        setUIState('default');
+      })();
+    }
+  }, [year]);
+
+  const { accounts, annualReports, statuses } = results || {};
+  const report = annualReports?.find((report) => report.year == year)?.data;
+
+  return (
+    <div id="annual-report-page" class="deck-container" tabIndex="-1">
+      <div class="report">
+        <h1>{year} #Wrapstodon</h1>
+        {uiState === 'loading' && (
+          <p>
+            <Loader abrupt /> <Trans>Loading…</Trans>
+          </p>
+        )}
+        {!!report && (
+          <dl>
+            {Object.entries(report).map(([key, value]) => (
+              <>
+                <dt>{key}</dt>
+                <dd class={`report-${key}`}>
+                  {Array.isArray(value) ? (
+                    <table>
+                      <thead>
+                        <tr>
+                          {Object.keys(value[0]).map((key) => (
+                            <th>{key}</th>
+                          ))}
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {value.map((item) => (
+                          <tr>
+                            {Object.entries(item).map(([k, value]) => (
+                              <td>
+                                {value && /(accountId)/i.test(k) &&
+                                /^(mostRebloggedAccounts|commonlyInteractedWithAccounts)$/i.test(
+                                  key,
+                                ) ? (
+                                  <NameText
+                                    account={accounts?.find(
+                                      (a) => a.id === value,
+                                    )}
+                                    showAvatar
+                                  />
+                                ) : (
+                                  value
+                                )}
+                              </td>
+                            ))}
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  ) : typeof value === 'object' ? (
+                    /^(topStatuses)$/i.test(key) ? (
+                      <dl>
+                        {Object.entries(value).map(([k, value]) => (
+                          <>
+                            <dt>{k}</dt>
+                            <dd>
+                              {value &&
+                              <Link to={`/${instance}/s/${value}`}>
+                                <Status
+                                  status={statuses?.find((s) => s.id === value)}
+                                  size="s"
+                                  readOnly
+                                />
+                              </Link>}
+                            </dd>
+                          </>
+                        ))}
+                      </dl>
+                    ) : (
+                      <table>
+                        <tbody>
+                          {Object.entries(value).map(([k, value]) => (
+                            <tr>
+                              <th>{k}</th>
+                              <td>{value}</td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    )
+                  ) : typeof value === 'string' ? (
+                    value
+                  ) : (
+                    // Last resort
+                    JSON.stringify(value, null, 2)
+                  )}
+                </dd>
+              </>
+            ))}
+          </dl>
+        )}
+      </div>
+      <hr />
+      <p style={{ textAlign: 'center' }}>
+        <Link to="/">
+          <Trans>Go home</Trans>
+        </Link>
+      </p>
+    </div>
+  );
+}