[Glitch] Wrapstodon modal with new share button

Port 31c392b1bc to glitch-soc

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

app/javascript/flavours/glitch/features/annual_report/archetype.tsx

@@ -1,68 +1,64 @@
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
+import type { Archetype as ArchetypeData } from '@/flavours/glitch/models/annual_report';
 import booster from '@/images/archetypes/booster.png';
 import lurker from '@/images/archetypes/lurker.png';
 import oracle from '@/images/archetypes/oracle.png';
 import pollster from '@/images/archetypes/pollster.png';
 import replier from '@/images/archetypes/replier.png';
-import type { Archetype as ArchetypeData } from 'flavours/glitch/models/annual_report';
+
+export const archetypeNames = defineMessages<ArchetypeData>({
+  booster: {
+    id: 'annual_report.summary.archetype.booster',
+    defaultMessage: 'The cool-hunter',
+  },
+  replier: {
+    id: 'annual_report.summary.archetype.replier',
+    defaultMessage: 'The social butterfly',
+  },
+  pollster: {
+    id: 'annual_report.summary.archetype.pollster',
+    defaultMessage: 'The pollster',
+  },
+  lurker: {
+    id: 'annual_report.summary.archetype.lurker',
+    defaultMessage: 'The lurker',
+  },
+  oracle: {
+    id: 'annual_report.summary.archetype.oracle',
+    defaultMessage: 'The oracle',
+  },
+});
 
 export const Archetype: React.FC<{
   data: ArchetypeData;
 }> = ({ data }) => {
-  let illustration, label;
+  const intl = useIntl();
+  let illustration;
 
   switch (data) {
     case 'booster':
       illustration = booster;
-      label = (
-        <FormattedMessage
-          id='annual_report.summary.archetype.booster'
-          defaultMessage='The cool-hunter'
-        />
-      );
       break;
     case 'replier':
       illustration = replier;
-      label = (
-        <FormattedMessage
-          id='annual_report.summary.archetype.replier'
-          defaultMessage='The social butterfly'
-        />
-      );
       break;
     case 'pollster':
       illustration = pollster;
-      label = (
-        <FormattedMessage
-          id='annual_report.summary.archetype.pollster'
-          defaultMessage='The pollster'
-        />
-      );
       break;
     case 'lurker':
       illustration = lurker;
-      label = (
-        <FormattedMessage
-          id='annual_report.summary.archetype.lurker'
-          defaultMessage='The lurker'
-        />
-      );
       break;
     case 'oracle':
       illustration = oracle;
-      label = (
-        <FormattedMessage
-          id='annual_report.summary.archetype.oracle'
-          defaultMessage='The oracle'
-        />
-      );
       break;
   }
 
   return (
     <div className='annual-report__bento__box annual-report__summary__archetype'>
-      <div className='annual-report__summary__archetype__label'>{label}</div>
+      <div className='annual-report__summary__archetype__label'>
+        {intl.formatMessage(archetypeNames[data])}
+      </div>
       <img src={illustration} alt='' />
     </div>
   );

app/javascript/flavours/glitch/features/annual_report/index.tsx

@@ -1,68 +1,38 @@
-import { useState, useEffect } from 'react';
+import { useCallback } from 'react';
+import type { FC } from 'react';
 
-import { FormattedMessage } from 'react-intl';
+import { defineMessage, FormattedMessage, useIntl } from 'react-intl';
 
-import {
-  importFetchedStatuses,
-  importFetchedAccounts,
-} from 'flavours/glitch/actions/importer';
-import { apiRequestGet, apiRequestPost } from 'flavours/glitch/api';
-import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator';
-import { me } from 'flavours/glitch/initial_state';
-import type { Account } from 'flavours/glitch/models/account';
-import type { AnnualReport as AnnualReportData } from 'flavours/glitch/models/annual_report';
-import type { Status } from 'flavours/glitch/models/status';
-import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
+import { focusCompose, resetCompose } from '@/flavours/glitch/actions/compose';
+import { closeModal } from '@/flavours/glitch/actions/modal';
+import { Button } from '@/flavours/glitch/components/button';
+import { LoadingIndicator } from '@/flavours/glitch/components/loading_indicator';
+import { me } from '@/flavours/glitch/initial_state';
+import type { AnnualReport as AnnualReportData } from '@/flavours/glitch/models/annual_report';
+import { useAppDispatch, useAppSelector } from '@/flavours/glitch/store';
 
-import { Archetype } from './archetype';
+import { Archetype, archetypeNames } from './archetype';
 import { Followers } from './followers';
 import { HighlightedPost } from './highlighted_post';
 import { MostUsedHashtag } from './most_used_hashtag';
 import { NewPosts } from './new_posts';
-import { Percentile } from './percentile';
 
-interface AnnualReportResponse {
-  annual_reports: AnnualReportData[];
-  accounts: Account[];
-  statuses: Status[];
-}
+const shareMessage = defineMessage({
+  id: 'annual_report.summary.share_message',
+  defaultMessage: 'I got the {archetype} archetype!',
+});
 
-export const AnnualReport: React.FC<{
-  year: string;
-}> = ({ year }) => {
-  const [response, setResponse] = useState<AnnualReportResponse | null>(null);
-  const [loading, setLoading] = useState(true);
+// Share = false when using the embedded version of the report.
+export const AnnualReport: FC<{ share?: boolean }> = ({ share = true }) => {
   const currentAccount = useAppSelector((state) =>
     me ? state.accounts.get(me) : undefined,
   );
-  const dispatch = useAppDispatch();
+  const report = useAppSelector((state) => state.annualReport.report);
 
-  useEffect(() => {
-    apiRequestGet<AnnualReportResponse>(`v1/annual_reports/${year}`)
-      .then((data) => {
-        dispatch(importFetchedStatuses(data.statuses));
-        dispatch(importFetchedAccounts(data.accounts));
-
-        setResponse(data);
-        setLoading(false);
-
-        return apiRequestPost(`v1/annual_reports/${year}/read`);
-      })
-      .catch(() => {
-        setLoading(false);
-      });
-  }, [dispatch, year, setResponse, setLoading]);
-
-  if (loading) {
+  if (!report) {
     return <LoadingIndicator />;
   }
 
-  const report = response?.annual_reports[0];
-
-  if (!report || report.schema_version !== 1) {
-    return null;
-  }
-
   return (
     <div className='annual-report'>
       <div className='annual-report__header'>
@@ -89,9 +59,37 @@ export const AnnualReport: React.FC<{
           total={currentAccount?.followers_count}
         />
         <MostUsedHashtag data={report.data.top_hashtags} />
-        <Percentile data={report.data.percentiles} />
         <NewPosts data={report.data.time_series} />
+        {share && <ShareButton report={report} />}
       </div>
     </div>
   );
 };
+
+const ShareButton: FC<{ report: AnnualReportData }> = ({ report }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const handleShareClick = useCallback(() => {
+    // Generate the share message.
+    const archetypeName = intl.formatMessage(
+      archetypeNames[report.data.archetype],
+    );
+    const shareLines = [
+      intl.formatMessage(shareMessage, {
+        archetype: archetypeName,
+      }),
+    ];
+    // Share URL is only available for schema version 2.
+    if (report.schema_version === 2 && report.share_url) {
+      shareLines.push(report.share_url);
+    }
+    shareLines.push(`#Wrapstodon${report.year}`);
+
+    // Reset the composer and focus it with the share message, then close the modal.
+    dispatch(resetCompose());
+    dispatch(focusCompose(shareLines.join('\n\n')));
+    dispatch(closeModal({ modalType: 'ANNUAL_REPORT', ignoreFocus: false }));
+  }, [report, intl, dispatch]);
+
+  return <Button text='Share here' onClick={handleShareClick} />;
+};

app/javascript/flavours/glitch/features/annual_report/timeline.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import type { FC } from 'react';
 
-import { showAlert } from '@/flavours/glitch/actions/alerts';
+import { openModal } from '@/flavours/glitch/actions/modal';
 import {
   generateReport,
   selectWrapstodonYear,
@@ -20,12 +20,7 @@ export const AnnualReportTimeline: FC = () => {
   }, [dispatch]);
 
   const handleOpen = useCallback(() => {
-    dispatch(
-      // TODO: Implement opening the annual report view when components are ready.
-      showAlert({
-        message: 'Not yet implemented.',
-      }),
-    );
+    dispatch(openModal({ modalType: 'ANNUAL_REPORT', modalProps: {} }));
   }, [dispatch]);
 
   if (!year || !state || state === 'ineligible') {

app/javascript/flavours/glitch/features/ui/components/annual_report_modal.tsx

@@ -3,16 +3,15 @@ import { useEffect } from 'react';
 import { AnnualReport } from 'flavours/glitch/features/annual_report';
 
 const AnnualReportModal: React.FC<{
-  year: string;
-  onChangeBackgroundColor: (arg0: string) => void;
-}> = ({ year, onChangeBackgroundColor }) => {
+  onChangeBackgroundColor: (color: string) => void;
+}> = ({ onChangeBackgroundColor }) => {
   useEffect(() => {
     onChangeBackgroundColor('var(--indigo-1)');
   }, [onChangeBackgroundColor]);
 
   return (
     <div className='modal-root__modal annual-report-modal'>
-      <AnnualReport year={year} />
+      <AnnualReport />
     </div>
   );
 };

app/javascript/flavours/glitch/reducers/slices/annual_report.ts

@@ -1,5 +1,9 @@
 import { createSlice } from '@reduxjs/toolkit';
 
+import {
+  importFetchedAccounts,
+  importFetchedStatuses,
+} from '@/flavours/glitch/actions/importer';
 import { insertIntoTimeline } from '@/flavours/glitch/actions/timelines';
 import type { ApiAnnualReportState } from '@/flavours/glitch/api/annual_report';
 import {
@@ -114,5 +118,9 @@ export const getReport = createDataLoadingThunk(
     }
     return apiGetAnnualReport(year);
   },
-  (data) => data.annual_reports[0],
+  (data, { dispatch }) => {
+    dispatch(importFetchedStatuses(data.statuses));
+    dispatch(importFetchedAccounts(data.accounts));
+    return data.annual_reports[0];
+  },
 );