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

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, Linking, View } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import { useThemeStore } from '../../../stores/use-theme-store';
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';
import { checkVersion } from 'react-native-check-version';
import { ProgressBarComponent } from '../../ui/svg/lazy';

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: appVersion, fwdRef }) => {
  const colors = useThemeStore(state => state.colors);
  const [version, setVersion] = useState(appVersion);
  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 =
    !version || !version.needsUpdate
      ? null
      : `https://github.com/streetwriters/notesnook/releases/download/${
          version.version
        }-android/notesnook-${getSupportedAbi()}.apk`;
  const GITHUB_PAGE_URL =
    !version || !version.needsUpdate
      ? null
      : `https://github.com/streetwriters/notesnook/releases/tag/${version.version}-android`;

  useEffect(() => {
    if (!version) {
      (async () => {
        try {
          console.log('checking for new version');
          let v = await checkVersion();
          setVersion(v);
        } catch (e) {
          setVersion({
            needsUpdate: false
          });
        }
      })();
    }
  }, []);

  return (
    <View
      style={{
        alignSelf: 'center',
        alignItems: 'center',
        width: '100%',
        paddingHorizontal: 12,
        maxHeight: '97%'
      }}
    >
      {!version || !version?.needsUpdate ? (
        <>
          <View
            style={{
              paddingVertical: 60,
              justifyContent: 'center',
              alignItems: 'center'
            }}
          >
            {!version ? (
              <>
                <ProgressBarComponent
                  size={SIZE.xxl}
                  indeterminate={true}
                  color={colors.accent}
                  borderWidth={0}
                  height={5}
                  width={250}
                />
                <Paragraph
                  style={{
                    marginTop: 5
                  }}
                  size={SIZE.md}
                >
                  Checking for new version
                </Paragraph>
              </>
            ) : (
              <Paragraph size={SIZE.md}>No new updates are available</Paragraph>
            )}
          </View>
        </>
      ) : (
        <>
          <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>
  );
};