notesnook/apps/mobile/src/components/sheets/update/index.js

import React from 'react';
import { Linking, View } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import { useThemeStore } from '../../../stores/theme';
import { STORE_LINK } from '../../../utils/constants';
import { SIZE } from '../../../utils/size';
import { Button } from '../../ui/button';
import { SvgView } from '../../ui/svg';
import Seperator from '../../ui/seperator';
import Heading from '../../ui/typography/heading';
import Paragraph from '../../ui/typography/paragraph';
import Config from 'react-native-config';
import deviceInfoModule from 'react-native-device-info';

const UPDATE_SVG = color =>
  `<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="774" height="669.5" viewBox="0 0 774 669.5" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M938.2145,322.3829C936.73266,207.5841,878.16775,115.25,806.13079,115.25c-43.29082,0-81.71777,33.346-105.81477,84.87331l28.33157,71.08654-39.15446-43.81576c-9.876,29.64743-15.48115,63.49569-15.48115,99.44475a324.20917,324.20917,0,0,0,9.98686,80.80891l75.92761-12.24058-67.9507,37.99628c22.13728,60.69069,62.59851,102.1414,109.23586,104.87608l-8.988,244.5184,27.81449.99338-5.94527-245.75716c66.41162-6.32443,119.60967-91.20375,123.8712-197.42794l-45.89372-25.66252Z" transform="translate(-213 -115.25)" fill="#f0f0f0"/><rect x="157.51532" y="354.40187" width="6.60151" height="49.25266" fill="${color}"/><polygon points="187.815 376.276 182.98 380.779 160.823 356.936 138.658 380.779 133.823 376.276 160.823 347.243 187.815 376.276" fill="${color}"/><path d="M371.9876,543.6602a52.8121,52.8121,0,1,1,52.8121-52.81209A52.87183,52.87183,0,0,1,371.9876,543.6602Zm0-99.02268a46.21059,46.21059,0,1,0,46.21058,46.21059A46.26275,46.26275,0,0,0,371.9876,444.63752Z" transform="translate(-213 -115.25)" fill="${color}"/><rect x="212.75248" y="253.9314" width="3.63974" height="27.15545" fill="#e4e4e4"/><polygon points="229.458 265.992 226.793 268.475 214.576 255.328 202.356 268.475 199.69 265.992 214.576 249.984 229.458 265.992" fill="#e4e4e4"/><path d="M426.56422,409.9859a29.118,29.118,0,1,1,29.118-29.118A29.15089,29.15089,0,0,1,426.56422,409.9859Zm0-54.59616A25.47821,25.47821,0,1,0,452.04243,380.868,25.507,25.507,0,0,0,426.56422,355.38974Z" transform="translate(-213 -115.25)" fill="#e4e4e4"/><rect x="99.52274" y="186.73872" width="3.63974" height="27.15545" fill="#e4e4e4"/><polygon points="116.229 198.799 113.563 201.282 101.346 188.136 89.126 201.282 86.46 198.799 101.346 182.792 116.229 198.799" fill="#e4e4e4"/><path d="M313.33448,342.79321a29.118,29.118,0,1,1,29.118-29.118A29.15088,29.15088,0,0,1,313.33448,342.79321Zm0-54.59615a25.47821,25.47821,0,1,0,25.47821,25.4782A25.507,25.507,0,0,0,313.33448,288.19706Z" transform="translate(-213 -115.25)" fill="#e4e4e4"/><path d="M518.7325,635.91942a8.22484,8.22484,0,0,1,.958-12.302,9.56322,9.56322,0,0,1,1.26081-.83521l-6.99347-30.13439,16.26512,5.84042,4.14749,27.72073a8.21849,8.21849,0,0,1-2.21462,10.58849A10.12952,10.12952,0,0,1,518.7325,635.91942Z" transform="translate(-213 -115.25)" fill="#ffb8b8"/><path d="M516.88531,612.40706l-.08727-.29605c-8.79267-29.805-17.88169-60.6154-28.97824-94.16236l-.0728-.21977.2448-.13088c6.18493-3.30762,15.48114-3.08736,21.62358.51183,5.68293,3.33,8.55569,9.77159,7.0024,15.68347l8.09328,38.67327c3.29039,12.64158,6.69574,25.72668,9.95036,38.62892l.09229.36576-.504.0295c-5.92592.34536-12.04821.70254-16.95322.89973Z" transform="translate(-213 -115.25)" fill="#ccc"/><polygon points="229.16 657.57 217.627 657.57 212.138 616.801 229.16 616.801 229.16 657.57" fill="#ffb8b8"/><path d="M445.10175,783.06559H407.9141v-.43107c0-7.31472,6.49345-13.26551,14.47493-13.26551h22.71272Z" transform="translate(-213 -115.25)" fill="#2f2e41"/><polygon points="337.837 648.851 326.848 652.06 308.113 614.743 324.331 610.006 337.837 648.851" fill="#ffb8b8"/><path d="M521.60173,783.39141l-.14262-.41086c-2.42325-6.96953,1.79234-14.4459,9.39693-16.66692l21.64062-6.31955,4.53736,13.05Z" transform="translate(-213 -115.25)" fill="#2f2e41"/><ellipse cx="279.46347" cy="354.21043" rx="23.10522" ry="21.17504" fill="#ffb8b8"/><path d="M502.83713,465.536c.13132-8.54065-3.76885-16.99907-9.79916-21.25171a16.77762,16.77762,0,0,0-19.87954.322c-5.937,4.44645-9.65428,13.02823-9.33974,21.56167C477.12124,466.20257,490.42379,466.23726,502.83713,465.536Z" transform="translate(-213 -115.25)" fill="#2f2e41"/><path d="M448.74454,759.69687l-.46255-.04125c-10.03358-.90255-20.40891-1.83457-30.21419-1.9415l-.5333-.00589.07281-.48411c2.32311-15.42,3.30793-31.45044,4.26037-46.9538.9405-15.308,1.91269-31.13682,4.17769-46.17039.95818-4.0257,1.892-8.00342,2.82264-11.96682,7.70037-32.79837,14.97378-63.77816,29.98728-94.44433l.14194-.28963.34381.03789c14.08679,1.562

export const Update = ({ version, fwdRef }) => {
  const colors = useThemeStore(state => state.colors);
  let notes = version.notes
    ? version.notes.replace('Thank you for using Notesnook!', '').split('- ')
    : ['Bug fixes and performance improvements'];
  notes = notes.map(n => n.replace(/\n/g, ''));
  const isGithubRelease = Config.GITHUB_RELEASE === 'true';

  const getSupportedAbi = () => {
    let abi = deviceInfoModule.supportedAbisSync();
    let armv8a = abi.find(a => a === 'arm64-v8a');
    let armv7 = abi.find(a => a === 'armeabi-v7a');

    return armv8a || armv7 || abi[0];
  };

  const GITHUB_URL = `https://github.com/streetwriters/notesnook/releases/download/${
    version.version
  }-android/notesnook-${getSupportedAbi()}.apk`;
  const GITHUB_PAGE_URL = `https://github.com/streetwriters/notesnook/releases/tag/${version.version}-android`;

  return (
    <View
      style={{
        alignSelf: 'center',
        alignItems: 'center',
        width: '100%',
        paddingHorizontal: 12,
        maxHeight: '97%'
      }}
    >
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'flex-end',
          justifyContent: 'space-between',
          width: '100%',
          backgroundColor: colors.nav,
          borderRadius: 10,
          padding: 12
        }}
      >
        <View>
          <Heading>Update available</Heading>
          <Paragraph>
            v{version.version} has been released {isGithubRelease ? 'on Github' : ''}
          </Paragraph>
        </View>

        <SvgView src={UPDATE_SVG(colors.accent)} width={100} height={100} />
      </View>

      <Seperator />
      <ScrollView
        nestedScrollEnabled={true}
        onMomentumScrollEnd={() => {
          fwdRef?.current?.handleChildScrollEnd();
        }}
        style={{
          width: '100%'
        }}
      >
        <Heading size={SIZE.md}>Release notes:</Heading>
        {notes.map(item => (
          <Paragraph
            key={item}
            color={colors.icon}
            style={{
              marginBottom: 5
            }}
          >
            • {item}
          </Paragraph>
        ))}
      </ScrollView>
      <Seperator />
      <Button
        title={isGithubRelease ? `Download update` : `Update now`}
        onPress={() => {
          Linking.openURL(isGithubRelease ? GITHUB_URL : STORE_LINK).catch(console.log);
        }}
        type="accent"
        style={{
          width: '100%'
        }}
      />

      <Paragraph
        size={12}
        color={colors.icon}
        style={{
          textDecorationLine: 'underline',
          marginTop: 10
        }}
        onPress={() => {
          Linking.openURL(GITHUB_PAGE_URL).catch(console.log);
        }}
      >
        Read full release notes on Github
      </Paragraph>
    </View>
  );
};