Refactor changelog view

- Add component to display "No changes for this platform"
- Reuse ChangeLogList component
- Reuse global redux selector hooks
- Move logic into hooks

9 files changed, 69 insertions, 31 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx
index 31a65eb396..ff591c2fc1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx
@@ -1,27 +1,22 @@
-import styled from 'styled-components';
-
 import { messages } from '../../../../shared/gettext';
-import { BodySmall, Container, Flex, TitleBig, TitleLarge } from '../../../lib/components';
+import { Container, Flex, TitleBig, TitleLarge } from '../../../lib/components';
 import { useHistory } from '../../../lib/history';
-import { useSelector } from '../../../redux/store';
+import { useVersionCurrent } from '../../../redux/hooks';
 import { AppNavigationHeader } from '../../';
+import { ChangelogList } from '../../changelog-list';
 import { BackAction } from '../../KeyboardNavigation';
 import { Layout, SettingsContainer } from '../../Layout';
 import { NavigationContainer } from '../../NavigationContainer';
 import { NavigationScrollbars } from '../../NavigationScrollbars';
-
-const StyledList = styled(Flex)({
-  listStyleType: 'disc',
-  paddingLeft: 0,
-  li: {
-    marginLeft: '1.5em',
-  },
-});
+import { NoChangelogUpdates } from './components';
+import { useChangelog, useShowChangelogList, useShowNoChangelogUpdates } from './hooks';
 
 export const ChangelogView = () => {
   const { pop } = useHistory();
-  const changelog = useSelector((state) => state.userInterface.changelog);
-  const version = useSelector((state) => state.version.current);
+  const { current } = useVersionCurrent();
+  const changelog = useChangelog();
+  const showChangelogList = useShowChangelogList();
+  const showNoChangelogUpdates = useShowNoChangelogUpdates();
 
   return (
     <BackAction action={pop}>
@@ -49,25 +44,11 @@ export const ChangelogView = () => {
                 </Container>
                 <Flex $flexDirection="column" $gap="small">
                   <Container size="4">
-                    <TitleLarge as="h2">{version}</TitleLarge>
+                    <TitleLarge as="h2">{current}</TitleLarge>
                   </Container>
                   <Container size="3" $flexDirection="column">
-                    {changelog.length ? (
-                      <StyledList as="ul" $flexDirection="column" $gap="medium">
-                        {changelog.map((item, i) => (
-                          <BodySmall as="li" key={i} color="whiteAlpha60">
-                            {item}
-                          </BodySmall>
-                        ))}
-                      </StyledList>
-                    ) : (
-                      <BodySmall color="whiteAlpha60">
-                        {messages.pgettext(
-                          'changelog-view',
-                          'No updates or changes were made in this release for this platform.',
-                        )}
-                      </BodySmall>
-                    )}
+                    {showChangelogList && <ChangelogList changelog={changelog} />}
+                    {showNoChangelogUpdates && <NoChangelogUpdates />}
                   </Container>
                 </Flex>
               </Flex>
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/components/index.ts
new file mode 100644
index 0000000000..e838cd8521
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/components/index.ts
@@ -0,0 +1 @@
+export * from './no-changelog-updates';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/components/no-changelog-updates/NoChangelogUpdates.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/components/no-changelog-updates/NoChangelogUpdates.tsx
new file mode 100644
index 0000000000..d67269e8d2
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/components/no-changelog-updates/NoChangelogUpdates.tsx
@@ -0,0 +1,17 @@
+import { messages } from '../../../../../../shared/gettext';
+import { BodySmall } from '../../../../../lib/components';
+import { Colors } from '../../../../../lib/foundations';
+
+export function NoChangelogUpdates() {
+  return (
+    <BodySmall color={Colors.white60}>
+      {
+        // TRANSLATORS: Text displayed when there are no updates for this platform in the app version
+        messages.pgettext(
+          'changelog-view',
+          'No updates or changes were made in this release for this platform.',
+        )
+      }
+    </BodySmall>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/components/no-changelog-updates/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/components/no-changelog-updates/index.ts
new file mode 100644
index 0000000000..095239a335
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/components/no-changelog-updates/index.ts
@@ -0,0 +1 @@
+export * from './NoChangelogUpdates';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/hooks/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/hooks/index.ts
new file mode 100644
index 0000000000..5f350effb0
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/hooks/index.ts
@@ -0,0 +1,4 @@
+export * from './useChangelog';
+export * from './useHasChangelog';
+export * from './useShowChangelogList';
+export * from './useShowNoChangelogUpdates';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/hooks/useChangelog.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/hooks/useChangelog.ts
new file mode 100644
index 0000000000..2b3236d5ee
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/hooks/useChangelog.ts
@@ -0,0 +1,7 @@
+import { useUserInterfaceChangelog } from '../../../../redux/hooks';
+
+export const useChangelog = () => {
+  const { changelog } = useUserInterfaceChangelog();
+
+  return changelog;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/hooks/useHasChangelog.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/hooks/useHasChangelog.ts
new file mode 100644
index 0000000000..b1e232122a
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/hooks/useHasChangelog.ts
@@ -0,0 +1,9 @@
+import { useChangelog } from './useChangelog';
+
+export const useHasChangelog = () => {
+  const changelog = useChangelog();
+
+  const hasChangeLog = changelog.length > 0;
+
+  return hasChangeLog;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/hooks/useShowChangelogList.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/hooks/useShowChangelogList.ts
new file mode 100644
index 0000000000..c4a11ac7cb
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/hooks/useShowChangelogList.ts
@@ -0,0 +1,9 @@
+import { useHasChangelog } from './useHasChangelog';
+
+export const useShowChangelogList = () => {
+  const hasChangeLog = useHasChangelog();
+
+  const showChangelog = hasChangeLog;
+
+  return showChangelog;
+};
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/hooks/useShowNoChangelogUpdates.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/hooks/useShowNoChangelogUpdates.ts
new file mode 100644
index 0000000000..cc30f5c5ac
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/hooks/useShowNoChangelogUpdates.ts
@@ -0,0 +1,9 @@
+import { useHasChangelog } from './useHasChangelog';
+
+export const useShowNoChangelogUpdates = () => {
+  const hasChangelog = useHasChangelog();
+
+  const showNoChangelogUpdates = !hasChangelog;
+
+  return showNoChangelogUpdates;
+};