[Glitch] Fix Wrapstodon Storybook & other Wrapstodon issues

Port 8137ce87ce to glitch-soc Signed-off-by: Claire <claire.github-309c@sitedethib.com>
2025-12-12 23:38:20 +00:00 · 2025-12-10 15:07:25 +01:00
parent 38f623eee7
commit b5721dbd4a
7 changed files with 124 additions and 131 deletions
--- a/app/javascript/flavours/glitch/features/annual_report/annual_report.stories.tsx
+++ b/app/javascript/flavours/glitch/features/annual_report/annual_report.stories.tsx
@@ -2,11 +2,17 @@ import type { Meta, StoryObj } from '@storybook/react-vite';

 import {
  accountFactoryState,
-  // statusFactoryState
+  annualReportFactory,
+  statusFactoryState,
 } from '@/testing/factories';

 import { AnnualReport } from '.';

+const SAMPLE_HASHTAG = {
+  name: 'Mastodon',
+  count: 14,
+};
+
 const meta = {
  title: 'Components/AnnualReport',
  component: AnnualReport,
@@ -16,108 +22,14 @@ const meta = {
  parameters: {
    state: {
      accounts: {
-        '1': accountFactoryState(),
+        '1': accountFactoryState({ display_name: 'Freddie Fruitbat' }),
      },
-      // statuses: {
-      //   '1': statusFactoryState(),
-      // },
-      annualReport: {
-        state: 'available',
-        report: {
-          schema_version: 2,
-          share_url: '#',
-          account_id: '1',
-          year: 2025,
-          data: {
-            archetype: 'lurker',
-            time_series: [
-              {
-                month: 1,
-                statuses: 0,
-                followers: 0,
-                following: 0,
-              },
-              {
-                month: 2,
-                statuses: 0,
-                followers: 0,
-                following: 0,
-              },
-              {
-                month: 3,
-                statuses: 0,
-                followers: 0,
-                following: 0,
-              },
-              {
-                month: 4,
-                statuses: 0,
-                followers: 0,
-                following: 0,
-              },
-              {
-                month: 5,
-                statuses: 1,
-                followers: 1,
-                following: 3,
-              },
-              {
-                month: 6,
-                statuses: 7,
-                followers: 1,
-                following: 0,
-              },
-              {
-                month: 7,
-                statuses: 2,
-                followers: 0,
-                following: 0,
-              },
-              {
-                month: 8,
-                statuses: 2,
-                followers: 0,
-                following: 0,
-              },
-              {
-                month: 9,
-                statuses: 11,
-                followers: 0,
-                following: 1,
-              },
-              {
-                month: 10,
-                statuses: 12,
-                followers: 0,
-                following: 1,
-              },
-              {
-                month: 11,
-                statuses: 6,
-                followers: 0,
-                following: 1,
-              },
-              {
-                month: 12,
-                statuses: 4,
-                followers: 0,
-                following: 0,
-              },
-            ],
-            top_hashtags: [
-              {
-                name: 'Mastodon',
-                count: 14,
-              },
-            ],
-            top_statuses: {
-              by_reblogs: '1',
-              by_replies: '1',
-              by_favourites: '1',
-            },
-          },
-        },
+      statuses: {
+        '1': statusFactoryState(),
      },
+      annualReport: annualReportFactory({
+        top_hashtag: SAMPLE_HASHTAG,
+      }),
    },
  },
 } satisfies Meta<typeof AnnualReport>;
@@ -126,6 +38,68 @@ export default meta;

 type Story = StoryObj<typeof meta>;

-export const Default: Story = {
+export const Standalone: Story = {
+  args: {
+    context: 'standalone',
+  },
+  render: (args) => <AnnualReport {...args} />,
+};
+
+export const InModal: Story = {
+  args: {
+    context: 'modal',
+  },
+  render: (args) => <AnnualReport {...args} />,
+};
+
+export const ArchetypeOracle: Story = {
+  ...InModal,
+  parameters: {
+    state: {
+      annualReport: annualReportFactory({
+        archetype: 'oracle',
+        top_hashtag: SAMPLE_HASHTAG,
+      }),
+    },
+  },
+  render: (args) => <AnnualReport {...args} />,
+};
+
+export const NoHashtag: Story = {
+  ...InModal,
+  parameters: {
+    state: {
+      annualReport: annualReportFactory({
+        archetype: 'booster',
+      }),
+    },
+  },
+  render: (args) => <AnnualReport {...args} />,
+};
+
+export const NoNewPosts: Story = {
+  ...InModal,
+  parameters: {
+    state: {
+      annualReport: annualReportFactory({
+        archetype: 'pollster',
+        top_hashtag: SAMPLE_HASHTAG,
+        without_posts: true,
+      }),
+    },
+  },
+  render: (args) => <AnnualReport {...args} />,
+};
+
+export const NoNewPostsNoHashtag: Story = {
+  ...InModal,
+  parameters: {
+    state: {
+      annualReport: annualReportFactory({
+        archetype: 'replier',
+        without_posts: true,
+      }),
+    },
+  },
  render: (args) => <AnnualReport {...args} />,
 };
--- a/app/javascript/flavours/glitch/features/annual_report/archetype.tsx
+++ b/app/javascript/flavours/glitch/features/annual_report/archetype.tsx
@@ -6,7 +6,6 @@ import classNames from 'classnames';

 import { Avatar } from '@/flavours/glitch/components/avatar';
 import { Button } from '@/flavours/glitch/components/button';
-import { me } from '@/flavours/glitch/initial_state';
 import type { Account } from '@/flavours/glitch/models/account';
 import type {
  AnnualReport,
@@ -112,11 +111,11 @@ const illustrations = {
 export const Archetype: React.FC<{
  report: AnnualReport;
  account?: Account;
-  canShare: boolean;
-}> = ({ report, account, canShare }) => {
+  context: 'modal' | 'standalone';
+}> = ({ report, account, context }) => {
  const intl = useIntl();
  const wrapperRef = useRef<HTMLDivElement>(null);
-  const isSelfView = account?.id === me;
+  const isSelfView = context === 'modal';

  const [isRevealed, setIsRevealed] = useState(!isSelfView);
  const reveal = useCallback(() => {
@@ -209,7 +208,7 @@ export const Archetype: React.FC<{
          />
        </Button>
      )}
-      {isRevealed && canShare && <ShareButton report={report} />}
+      {isRevealed && isSelfView && <ShareButton report={report} />}
    </div>
  );
 };
--- a/app/javascript/flavours/glitch/features/annual_report/highlighted_post.tsx
+++ b/app/javascript/flavours/glitch/features/annual_report/highlighted_post.tsx
@@ -19,7 +19,8 @@ const getStatus = makeGetStatus() as unknown as (arg0: any, arg1: any) => any;

 export const HighlightedPost: React.FC<{
  data: TopStatuses;
-}> = ({ data }) => {
+  context: 'modal' | 'standalone';
+}> = ({ data, context }) => {
  const { by_reblogs, by_favourites, by_replies } = data;

  const statusId = by_reblogs || by_favourites || by_replies;
@@ -68,10 +69,10 @@ export const HighlightedPost: React.FC<{
            defaultMessage='Most popular post'
          />
        </h2>
-        <p>{label}</p>
+        {context === 'modal' && <p>{label}</p>}
      </div>

-      <StatusQuoteManager showActions={false} id={`${statusId}`} />
+      <StatusQuoteManager showActions={false} id={statusId} />
    </div>
  );
 };
--- a/app/javascript/flavours/glitch/features/annual_report/index.tsx
+++ b/app/javascript/flavours/glitch/features/annual_report/index.tsx
@@ -66,10 +66,9 @@ export const AnnualReport: FC<{ context?: 'modal' | 'standalone' }> = ({
    0,
  );

-  const newFollowerCount = report.data.time_series.reduce(
-    (sum, item) => sum + item.followers,
-    0,
-  );
+  const newFollowerCount =
+    context === 'modal' &&
+    report.data.time_series.reduce((sum, item) => sum + item.followers, 0);

  const topHashtag = report.data.top_hashtags[0];

@@ -99,7 +98,7 @@ export const AnnualReport: FC<{ context?: 'modal' | 'standalone' }> = ({
      </div>

      <div className={styles.stack}>
-        <HighlightedPost data={report.data.top_statuses} />
+        <HighlightedPost data={report.data.top_statuses} context={context} />
        <div
          className={moduleClassNames(styles.statsGrid, {
            noHashtag: !topHashtag,
@@ -109,13 +108,15 @@ export const AnnualReport: FC<{ context?: 'modal' | 'standalone' }> = ({
        >
          {!!newFollowerCount && <Followers count={newFollowerCount} />}
          {!!newPostCount && <NewPosts count={newPostCount} />}
-          {topHashtag && <MostUsedHashtag hashtag={topHashtag} />}
+          {topHashtag && (
+            <MostUsedHashtag
+              hashtag={topHashtag}
+              name={account?.display_name}
+              context={context}
+            />
+          )}
        </div>
-        <Archetype
-          report={report}
-          account={account}
-          canShare={context === 'modal'}
-        />
+        <Archetype report={report} account={account} context={context} />
      </div>
    </div>
  );
--- a/app/javascript/flavours/glitch/features/annual_report/most_used_hashtag.tsx
+++ b/app/javascript/flavours/glitch/features/annual_report/most_used_hashtag.tsx
@@ -8,7 +8,9 @@ import styles from './index.module.scss';

 export const MostUsedHashtag: React.FC<{
  hashtag: NameAndCount;
-}> = ({ hashtag }) => {
+  name: string | undefined;
+  context: 'modal' | 'standalone';
+}> = ({ hashtag, name, context }) => {
  return (
    <div
      className={classNames(styles.box, styles.mostUsedHashtag, styles.content)}
@@ -23,11 +25,21 @@ export const MostUsedHashtag: React.FC<{
      <div className={styles.statExtraLarge}>#{hashtag.name}</div>

      <p>
-        <FormattedMessage
-          id='annual_report.summary.most_used_hashtag.used_count'
-          defaultMessage='You included this hashtag in {count, plural, one {one post} other {# posts}}.'
-          values={{ count: hashtag.count }}
-        />
+        {context === 'modal' ? (
+          <FormattedMessage
+            id='annual_report.summary.most_used_hashtag.used_count'
+            defaultMessage='You included this hashtag in {count, plural, one {one post} other {# posts}}.'
+            values={{ count: hashtag.count }}
+          />
+        ) : (
+          name && (
+            <FormattedMessage
+              id='annual_report.summary.most_used_hashtag.used_count_public'
+              defaultMessage='{name} included this hashtag in {count, plural, one {one post} other {# posts}}.'
+              values={{ count: hashtag.count, name }}
+            />
+          )
+        )}
      </p>
    </div>
  );
--- a/app/javascript/flavours/glitch/features/annual_report/shared_page.tsx
+++ b/app/javascript/flavours/glitch/features/annual_report/shared_page.tsx
@@ -1,5 +1,7 @@
 import type { FC } from 'react';

+import { FormattedMessage } from 'react-intl';
+
 import { IconLogo } from '@/flavours/glitch/components/logo';

 import { AnnualReport } from './index';
@@ -11,7 +13,11 @@ export const WrapstodonSharedPage: FC = () => {
      <AnnualReport />
      <footer className={classes.footer}>
        <IconLogo className={classes.logo} />
-        Generated with ♥ by the Mastodon team
+        <FormattedMessage
+          id='annual_report.shared_page.footer'
+          defaultMessage='Generated with {heart} by the Mastodon team'
+          values={{ heart: '♥' }}
+        />
      </footer>
    </main>
  );
--- a/app/javascript/flavours/glitch/models/annual_report.ts
+++ b/app/javascript/flavours/glitch/models/annual_report.ts
@@ -16,9 +16,9 @@ export interface TimeSeriesMonth {
 }

 export interface TopStatuses {
-  by_reblogs: number;
-  by_favourites: number;
-  by_replies: number;
+  by_reblogs: string;
+  by_favourites: string;
+  by_replies: string;
 }

 export type Archetype =