[Glitch] Fix Wrapstodon Storybook & other Wrapstodon issues

Port 8137ce87ce to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

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: {
+      statuses: {
-      //   '1': statusFactoryState(),
+        '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',
-            },
-          },
-        },
       },
+      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} />,
 };

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;
+  context: 'modal' | 'standalone';
-}> = ({ report, account, canShare }) => {
+}> = ({ 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>
   );
 };

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>
   );
 };

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(
+  const newFollowerCount =
-    (sum, item) => sum + item.followers,
+    context === 'modal' &&
-    0,
+    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
+        <Archetype report={report} account={account} context={context} />
-          report={report}
-          account={account}
-          canShare={context === 'modal'}
-        />
       </div>
     </div>
   );

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
+        {context === 'modal' ? (
-          id='annual_report.summary.most_used_hashtag.used_count'
+          <FormattedMessage
-          defaultMessage='You included this hashtag in {count, plural, one {one post} other {# posts}}.'
+            id='annual_report.summary.most_used_hashtag.used_count'
-          values={{ count: hashtag.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>
   );

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>
   );

app/javascript/flavours/glitch/models/annual_report.ts

@@ -16,9 +16,9 @@ export interface TimeSeriesMonth {
 }
 
 export interface TopStatuses {
-  by_reblogs: number;
+  by_reblogs: string;
-  by_favourites: number;
+  by_favourites: string;
-  by_replies: number;
+  by_replies: string;
 }
 
 export type Archetype =