Merge pull request #1148 from responsively-org/info-popups

Unified info popups component

desktop-app/src/renderer/AppContent.tsx

@@ -10,8 +10,7 @@ import { APP_VIEWS, selectAppView } from './store/features/ui';
 import type { AppView } from './store/features/ui';
 import DeviceManager from './components/DeviceManager';
 import KeyboardShortcutsManager from './components/KeyboardShortcutsManager';
-import ReleaseNotes from './components/ReleaseNotes';
-import { Sponsorship } from './components/Sponsorship';
+import { InfoPopups } from './components/InfoPopups';
 
 if ((navigator as any).userAgentData.platform === 'Windows') {
   import('./titlebar-styles.css');
@@ -49,8 +48,7 @@ const AppContent = () => {
       <ThemeProvider>
         <KeyboardShortcutsManager />
         <ViewComponent />
-        <ReleaseNotes />
-        <Sponsorship />
+        <InfoPopups />
       </ThemeProvider>
     </Provider>
   );

desktop-app/src/renderer/components/InfoPopups/index.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import { ReleaseNotes, isReleaseNotesUnseen } from '../ReleaseNotes';
+import { Sponsorship } from '../Sponsorship';
+
+export const InfoPopups = () => {
+  const [showReleaseNotes, setShowReleaseNotes] = useState<boolean>(false);
+  const [showSponsorship, setShowSponsorship] = useState<boolean>(false);
+
+  useEffect(() => {
+    (async () => {
+      if (await isReleaseNotesUnseen()) {
+        setShowReleaseNotes(true);
+        return;
+      }
+      setShowSponsorship(true);
+    })();
+  }, []);
+
+  if (showReleaseNotes) {
+    return <ReleaseNotes />;
+  }
+
+  if (showSponsorship) {
+    return <Sponsorship />;
+  }
+
+  return null;
+};

desktop-app/src/renderer/components/ReleaseNotes/index.tsx

@@ -6,22 +6,38 @@ import ReactMarkdown from 'react-markdown';
 import Button from '../Button';
 import Modal from '../Modal';
 
-const ReleaseNotes = () => {
+export const isReleaseNotesUnseen = async () => {
+  const appMeta = await window.electron.ipcRenderer.invoke<
+    object,
+    AppMetaResponse
+  >(IPC_MAIN_CHANNELS.APP_META, {});
+  const seenVersions = window.electron.store.get('seenReleaseNotes');
+  if (seenVersions && seenVersions.includes(appMeta.appVersion)) {
+    return false;
+  }
+  if (!seenVersions || seenVersions.length === 0) {
+    // First time user, so we don't show release notes
+    window.electron.store.set('seenReleaseNotes', [appMeta.appVersion]);
+    return false;
+  }
+  return true;
+};
+
+export const ReleaseNotes = () => {
   const [version, setVersion] = useState<string>('');
   const [content, setContent] = useState<string | undefined>();
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   useEffect(() => {
     (async () => {
+      if (!isReleaseNotesUnseen()) {
+        return;
+      }
       await new Promise((resolve) => setTimeout(resolve, 1000));
       const appMeta = await window.electron.ipcRenderer.invoke<
         object,
         AppMetaResponse
       >(IPC_MAIN_CHANNELS.APP_META, {});
-      const seenVersions = window.electron.store.get('seenReleaseNotes');
-      if (seenVersions && seenVersions.includes(appMeta.appVersion)) {
-        return;
-      }
       setVersion(appMeta.appVersion);
       const release = await fetch(
         `https://api.github.com/repos/responsively-org/responsively-app/releases/tags/v${appMeta.appVersion}`
@@ -142,5 +158,3 @@ const ReleaseNotes = () => {
     </Modal>
   );
 };
-
-export default ReleaseNotes;