From 6c9962f85a35c769a39a90e50e61b04b1f97cf3b Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Tue, 13 Jun 2023 23:07:40 +0200
Subject: [PATCH] chore: include privacy policy in app

---
 metro.config.js                               | 24 +++++++++++++++----
 scripts/transformer.js                        | 24 +++++++++++++++++++
 src/localisation/lang/en/locale.json          |  3 ++-
 src/localisation/types.ts                     |  3 ++-
 .../Settings/components/PrivacyPolicy.tsx     | 17 +++++++++++++
 src/screens/Settings/index.tsx                |  4 ++++
 src/typings/md.d.ts                           |  4 ++++
 7 files changed, 73 insertions(+), 6 deletions(-)
 create mode 100644 scripts/transformer.js
 create mode 100644 src/screens/Settings/components/PrivacyPolicy.tsx
 create mode 100644 src/typings/md.d.ts

diff --git a/metro.config.js b/metro.config.js
index 18f3c9f..81fff27 100644
--- a/metro.config.js
+++ b/metro.config.js
@@ -13,11 +13,27 @@ module.exports = (async () => {
     } = await getDefaultConfig();
     return {
         transformer: {
-            babelTransformerPath: require.resolve('react-native-svg-transformer')
+            babelTransformerPath: require.resolve('./scripts/transformer.js'),
         },
         resolver: {
-            assetExts: assetExts.filter(ext => ext !== 'svg'),
-            sourceExts: [...sourceExts, 'svg']
-        }
+            assetExts: [
+                ...assetExts.filter((ext) => ext !== 'svg'),
+            ],
+            sourceExts: [
+                ...sourceExts,
+                'svg',
+                'md'
+            ]
+        },
+        plugins: [
+            ['content-transformer', {
+                transformers: [
+                    {
+                        file: /\.md$/,
+                        format: 'string'
+                    }
+                ],
+            }],
+        ]
     };
 })();
diff --git a/scripts/transformer.js b/scripts/transformer.js
new file mode 100644
index 0000000..7a27cd6
--- /dev/null
+++ b/scripts/transformer.js
@@ -0,0 +1,24 @@
+const upstreamTransformer = require('metro-react-native-babel-transformer');
+const svgTransformer = require('react-native-svg-transformer');
+
+/**
+ * Since we are using multiple types of transformers for Metro, we need to chain
+ * them into a single transform unit.
+ */
+module.exports.transform = function({ src, filename, options }) {
+    // GUARD: Pass SVGs onto react-native-svg-transformer
+    if (filename.endsWith('.svg')) {
+        return svgTransformer.transform({ src, filename, options });
+    // GUARD: Catch markdown files
+    } else if (filename.endsWith('.md')) {
+        const parsedString = src.replaceAll(/(?<!\n)\r?\n(?!\r?\n)/g, '');
+        return upstreamTransformer.transform({
+            src: `const content = ${JSON.stringify(parsedString)}; export default content;`,
+            filename,
+            options,
+        });
+    } else {
+        // Pass any remaining files onto the regular Metro transformer
+        return upstreamTransformer.transform({ src, filename, options });
+    }
+};
\ No newline at end of file
diff --git a/src/localisation/lang/en/locale.json b/src/localisation/lang/en/locale.json
index 5d4200f..bbf005b 100644
--- a/src/localisation/lang/en/locale.json
+++ b/src/localisation/lang/en/locale.json
@@ -69,5 +69,6 @@
     "color-scheme-system": "System",
     "color-scheme-light": "Light Mode",
     "color-scheme-dark": "Dark Mode",
-    "artists": "Artists"
+    "artists": "Artists",
+    "privacy-policy": "Privacy Policy"
 }
diff --git a/src/localisation/types.ts b/src/localisation/types.ts
index ab39d95..34e431d 100644
--- a/src/localisation/types.ts
+++ b/src/localisation/types.ts
@@ -67,4 +67,5 @@ export type LocaleKeys = 'play-next'
 | 'color-scheme-system'
 | 'color-scheme-light'
 | 'color-scheme-dark'
-| 'artists'
\ No newline at end of file
+| 'artists'
+| 'privacy-policy'
diff --git a/src/screens/Settings/components/PrivacyPolicy.tsx b/src/screens/Settings/components/PrivacyPolicy.tsx
new file mode 100644
index 0000000..53f2696
--- /dev/null
+++ b/src/screens/Settings/components/PrivacyPolicy.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from 'styled-components/native';
+import { Paragraph } from 'components/Typography';
+import { SafeScrollView } from 'components/SafeNavigatorView';
+import policy from '../../../../docs/privacy-policy.md';
+
+const Container = styled(SafeScrollView)`
+    padding: 24px;
+`;
+
+export default function PrivacyPolicy() {
+    return (
+        <Container>
+            <Paragraph>{policy}</Paragraph>
+        </Container>
+    );
+}
\ No newline at end of file
diff --git a/src/screens/Settings/index.tsx b/src/screens/Settings/index.tsx
index 812c444..31e2c61 100644
--- a/src/screens/Settings/index.tsx
+++ b/src/screens/Settings/index.tsx
@@ -15,6 +15,7 @@ import Library from './stacks/Library';
 import ColorScheme from './stacks/ColorScheme';
 import PlaybackReporting from './stacks/PlaybackReporting';
 import { SafeScrollView } from 'components/SafeNavigatorView';
+import PrivacyPolicy from './components/PrivacyPolicy';
 
 export function SettingsList() {
     const navigation = useNavigation<SettingsNavigationProp>();
@@ -23,6 +24,7 @@ export function SettingsList() {
     const handleSentryClick = useCallback(() => { navigation.navigate('Sentry'); }, [navigation]);
     const handlePlaybackReportingClick = useCallback(() => { navigation.navigate('Playback Reporting'); }, [navigation]);
     const handleColorSchemeClick = useCallback(() => { navigation.navigate('Color Scheme'); }, [navigation]);
+    const handlePrivacyPolicyClick = useCallback(() => { navigation.navigate('PrivacyPolicy'); }, [navigation]);
 
     return (
         <SafeScrollView>
@@ -31,6 +33,7 @@ export function SettingsList() {
             <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
             <ListButton onPress={handlePlaybackReportingClick}>{t('playback-reporting')}</ListButton>
             <ListButton onPress={handleColorSchemeClick}>{t('color-scheme')}</ListButton>
+            <ListButton onPress={handlePrivacyPolicyClick}>{t('privacy-policy')}</ListButton>
         </SafeScrollView>
     );
 }
@@ -53,6 +56,7 @@ export default function Settings() {
             <Stack.Screen name="Sentry" component={Sentry} options={{ headerTitle: t('error-reporting') }} />
             <Stack.Screen name="Playback Reporting" component={PlaybackReporting} options={{ headerTitle: t('playback-reporting')}} />
             <Stack.Screen name="Color Scheme" component={ColorScheme} options={{ headerTitle: t('color-scheme')}} />
+            <Stack.Screen name="PrivacyPolicy" component={PrivacyPolicy} options={{ headerTitle: t('privacy-policy') }} />
         </Stack.Navigator>
     );
 }
\ No newline at end of file
diff --git a/src/typings/md.d.ts b/src/typings/md.d.ts
new file mode 100644
index 0000000..98d8612
--- /dev/null
+++ b/src/typings/md.d.ts
@@ -0,0 +1,4 @@
+declare module '*.md' {
+    const content: string;
+    export default content;
+}
\ No newline at end of file