From c8dbf715fd28cd26fad5ccbe6df0a89f42521542 Mon Sep 17 00:00:00 2001 From: Utku <74243531+utkubakir@users.noreply.github.com> Date: Wed, 22 Nov 2023 03:49:52 +0300 Subject: [PATCH] Mobile changes (#1784) * privacy link * remove spacedrop screens, add browse * icon * changes and network screen * bump react native --- apps/mobile/package.json | 2 +- apps/mobile/src/App.tsx | 3 - apps/mobile/src/components/icons/Icon.tsx | 23 +++ apps/mobile/src/navigation/TabNavigator.tsx | 24 +-- .../tabs/{SpacesStack.tsx => BrowseStack.tsx} | 20 +-- .../{SpacedropStack.tsx => NetworkStack.tsx} | 24 ++- apps/mobile/src/screens/Browse.tsx | 6 + apps/mobile/src/screens/Network.tsx | 17 ++ apps/mobile/src/screens/Spacedrop.tsx | 146 ------------------ apps/mobile/src/screens/Spaces.tsx | 11 -- .../src/screens/onboarding/NewLibrary.tsx | 6 +- .../mobile/src/screens/onboarding/Privacy.tsx | 14 +- pnpm-lock.yaml | Bin 804478 -> 804520 bytes 13 files changed, 95 insertions(+), 201 deletions(-) create mode 100644 apps/mobile/src/components/icons/Icon.tsx rename apps/mobile/src/navigation/tabs/{SpacesStack.tsx => BrowseStack.tsx} (62%) rename apps/mobile/src/navigation/tabs/{SpacedropStack.tsx => NetworkStack.tsx} (57%) create mode 100644 apps/mobile/src/screens/Browse.tsx create mode 100644 apps/mobile/src/screens/Network.tsx delete mode 100644 apps/mobile/src/screens/Spacedrop.tsx delete mode 100644 apps/mobile/src/screens/Spaces.tsx diff --git a/apps/mobile/package.json b/apps/mobile/package.json index c74d7e017..1be7cb9ea 100644 --- a/apps/mobile/package.json +++ b/apps/mobile/package.json @@ -44,7 +44,7 @@ "phosphor-react-native": "^1.1.2", "react": "^18.2.0", "react-hook-form": "^7.47.0", - "react-native": "0.72.5", + "react-native": "0.72.6", "react-native-document-picker": "^9.0.1", "react-native-fs": "^2.20.0", "react-native-gesture-handler": "~2.12.1", diff --git a/apps/mobile/src/App.tsx b/apps/mobile/src/App.tsx index 238175770..d422b25f6 100644 --- a/apps/mobile/src/App.tsx +++ b/apps/mobile/src/App.tsx @@ -54,9 +54,6 @@ function AppNavigation() { initPlausible({ platformType: 'mobile', buildInfo: buildInfo?.data }); - // TODO: Make sure library has actually been loaded by this point - precache with useCachedLibraries? - // if (library === undefined) throw new Error("Tried to render AppNavigation before libraries fetched!") - const navRef = useNavigationContainerRef(); const routeNameRef = useRef(); diff --git a/apps/mobile/src/components/icons/Icon.tsx b/apps/mobile/src/components/icons/Icon.tsx new file mode 100644 index 000000000..4248a34c7 --- /dev/null +++ b/apps/mobile/src/components/icons/Icon.tsx @@ -0,0 +1,23 @@ +import { getIcon, iconNames } from '@sd/assets/util'; +import { Image, ImageProps } from 'react-native'; +import { isDarkTheme } from '@sd/client'; + +export type IconName = keyof typeof iconNames; + +interface IconProps extends Omit { + name: IconName; + size?: number; + theme?: 'dark' | 'light'; +} + +export const Icon = ({ name, size, theme, ...props }: IconProps) => { + const isDark = isDarkTheme(); + + return ( + + ); +}; diff --git a/apps/mobile/src/navigation/TabNavigator.tsx b/apps/mobile/src/navigation/TabNavigator.tsx index 6a7553276..b5a3abf5a 100644 --- a/apps/mobile/src/navigation/TabNavigator.tsx +++ b/apps/mobile/src/navigation/TabNavigator.tsx @@ -1,12 +1,12 @@ import { BottomTabScreenProps, createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { CompositeScreenProps, NavigatorScreenParams } from '@react-navigation/native'; -import { Broadcast, CirclesFour, Planet } from 'phosphor-react-native'; +import { CirclesFour, FolderOpen, Planet } from 'phosphor-react-native'; import { tw } from '~/lib/tailwind'; import type { HomeDrawerScreenProps } from './DrawerNavigator'; +import BrowseStack, { BrowseStackParamList } from './tabs/BrowseStack'; +import NetworkStack, { NetworkStackParamList } from './tabs/NetworkStack'; import OverviewStack, { OverviewStackParamList } from './tabs/OverviewStack'; -import SpacedropStack, { SpacedropStackParamList } from './tabs/SpacedropStack'; -import SpacesStack, { SpacesStackParamList } from './tabs/SpacesStack'; const Tab = createBottomTabNavigator(); @@ -41,8 +41,8 @@ export default function TabNavigator() { }} /> ( ), - tabBarLabel: 'Spaces', + tabBarLabel: 'Network', tabBarLabelStyle: tw`text-[10px] font-semibold` }} /> ( - ), - tabBarLabel: 'Spacedrop', + tabBarLabel: 'Browse', tabBarLabelStyle: tw`text-[10px] font-semibold` }} /> @@ -76,8 +76,8 @@ export default function TabNavigator() { export type TabParamList = { OverviewStack: NavigatorScreenParams; - SpacedropStack: NavigatorScreenParams; - SpacesStack: NavigatorScreenParams; + NetworkStack: NavigatorScreenParams; + BrowseStack: NavigatorScreenParams; }; export type TabScreenProps = CompositeScreenProps< diff --git a/apps/mobile/src/navigation/tabs/SpacesStack.tsx b/apps/mobile/src/navigation/tabs/BrowseStack.tsx similarity index 62% rename from apps/mobile/src/navigation/tabs/SpacesStack.tsx rename to apps/mobile/src/navigation/tabs/BrowseStack.tsx index c5f2a9ef7..1072eb174 100644 --- a/apps/mobile/src/navigation/tabs/SpacesStack.tsx +++ b/apps/mobile/src/navigation/tabs/BrowseStack.tsx @@ -2,17 +2,17 @@ import { CompositeScreenProps } from '@react-navigation/native'; import { createStackNavigator, StackScreenProps } from '@react-navigation/stack'; import Header from '~/components/header/Header'; import { tw } from '~/lib/tailwind'; +import BrowseScreen from '~/screens/Browse'; -import SpacesScreen from '../../screens/Spaces'; import { SharedScreens, SharedScreensParamList } from '../SharedScreens'; import { TabScreenProps } from '../TabNavigator'; -const Stack = createStackNavigator(); +const Stack = createStackNavigator(); -export default function SpacesStack() { +export default function BrowseStack() { return ( - + {SharedScreens(Stack as any)} ); } -export type SpacesStackParamList = { - Spaces: undefined; +export type BrowseStackParamList = { + Browse: undefined; } & SharedScreensParamList; -export type SpacesStackScreenProps = +export type BrowseStackScreenProps = CompositeScreenProps< - StackScreenProps, - TabScreenProps<'SpacesStack'> + StackScreenProps, + TabScreenProps<'BrowseStack'> >; diff --git a/apps/mobile/src/navigation/tabs/SpacedropStack.tsx b/apps/mobile/src/navigation/tabs/NetworkStack.tsx similarity index 57% rename from apps/mobile/src/navigation/tabs/SpacedropStack.tsx rename to apps/mobile/src/navigation/tabs/NetworkStack.tsx index 7ace1cbbc..a8d2d89c8 100644 --- a/apps/mobile/src/navigation/tabs/SpacedropStack.tsx +++ b/apps/mobile/src/navigation/tabs/NetworkStack.tsx @@ -2,17 +2,17 @@ import { CompositeScreenProps } from '@react-navigation/native'; import { createStackNavigator, StackScreenProps } from '@react-navigation/stack'; import Header from '~/components/header/Header'; import { tw } from '~/lib/tailwind'; -import SpacedropScreen from '~/screens/Spacedrop'; +import NetworkScreen from '../../screens/Network'; import { SharedScreens, SharedScreensParamList } from '../SharedScreens'; import { TabScreenProps } from '../TabNavigator'; -const Stack = createStackNavigator(); +const Stack = createStackNavigator(); -export default function SpacedropStack() { +export default function NetworkStack() { return ( - + {SharedScreens(Stack as any)} ); } -export type SpacedropStackParamList = { - Spacedrop: undefined; +export type NetworkStackParamList = { + Network: undefined; } & SharedScreensParamList; -export type SpacedropStackScreenProps = +export type NetworkStackScreenProps = CompositeScreenProps< - StackScreenProps, - TabScreenProps<'SpacedropStack'> + StackScreenProps, + TabScreenProps<'NetworkStack'> >; diff --git a/apps/mobile/src/screens/Browse.tsx b/apps/mobile/src/screens/Browse.tsx new file mode 100644 index 000000000..9dba9ef4b --- /dev/null +++ b/apps/mobile/src/screens/Browse.tsx @@ -0,0 +1,6 @@ +import { View } from 'react-native'; +import { BrowseStackScreenProps } from '~/navigation/tabs/BrowseStack'; + +export default function BrowseScreen({ navigation, route }: BrowseStackScreenProps<'Browse'>) { + return ; +} diff --git a/apps/mobile/src/screens/Network.tsx b/apps/mobile/src/screens/Network.tsx new file mode 100644 index 000000000..9fcf963dc --- /dev/null +++ b/apps/mobile/src/screens/Network.tsx @@ -0,0 +1,17 @@ +import { Text, View } from 'react-native'; +import { Icon } from '~/components/icons/Icon'; +import { tw } from '~/lib/tailwind'; +import { NetworkStackScreenProps } from '~/navigation/tabs/NetworkStack'; + +export default function NetworkScreen({ navigation }: NetworkStackScreenProps<'Network'>) { + return ( + + + Your Local Network + + Other Spacedrive nodes on your LAN will appear here, along with your default OS + network mounts. + + + ); +} diff --git a/apps/mobile/src/screens/Spacedrop.tsx b/apps/mobile/src/screens/Spacedrop.tsx deleted file mode 100644 index fc9781104..000000000 --- a/apps/mobile/src/screens/Spacedrop.tsx +++ /dev/null @@ -1,146 +0,0 @@ -import { GoogleDrive, iCloud, Mega } from '@sd/assets/images'; -import { DeviceMobile, Icon, Laptop, User } from 'phosphor-react-native'; -import { Alert, Image, ImageSourcePropType, Pressable, ScrollView, Text, View } from 'react-native'; -import { Polygon, Svg } from 'react-native-svg'; -import { InfoPill } from '~/components/primitive/InfoPill'; -import { tw, twStyle } from '~/lib/tailwind'; -import { SpacedropStackScreenProps } from '~/navigation/tabs/SpacedropStack'; - -const testData = [ - { - name: "Jamie's MacBook Pro", - receivingNodeOsType: 'macOS', - connectionType: 'lan', - icon: Laptop - }, - { - name: "Jamie's MacBook Pro", - receivingNodeOsType: 'iOS', - connectionType: 'lan', - icon: DeviceMobile - }, - { - name: 'Brendan Alan', - image: 'https://github.com/brendonovich.png', - connectionType: 'p2p' - }, - { - name: 'Oscar Beaumont', - image: 'https://github.com/oscartbeaumont.png', - connectionType: 'usb' - }, - { - name: 'maxichrome', - image: 'https://github.com/maxichrome.png', - connectionType: 'p2p' - }, - { - name: 'Utku', - image: 'https://github.com/utkubakir.png', - connectionType: 'p2p' - }, - { name: "Jamie's Google Drive", brandIcon: 'google-drive', connectionType: 'cloud' }, - { name: 'iCloud', brandIcon: 'icloud', connectionType: 'cloud' }, - { name: 'Mega', brandIcon: 'mega', connectionType: 'cloud' } -] as DropItemProps[]; - -const Hexagon = () => { - const width = 180; - const height = width * 1.1547; - - return ( - - - - ); -}; - -type OperatingSystem = 'browser' | 'linux' | 'macOS' | 'windows' | 'iOS' | 'android'; - -type DropItemProps = { - name: string; - connectionType: 'lan' | 'bluetooth' | 'usb' | 'p2p' | 'cloud'; - receivingNodeOsType: OperatingSystem; -} & ({ image: string } | { icon: Icon } | { brandIcon: string }); - -function DropItem(props: DropItemProps) { - let icon; - if ('image' in props) { - icon = ; - } else if ('brandIcon' in props) { - let brandIconSrc: ImageSourcePropType | undefined; - switch (props.brandIcon) { - case 'google-drive': - brandIconSrc = GoogleDrive; - break; - case 'icloud': - brandIconSrc = iCloud; - break; - case 'mega': - brandIconSrc = Mega; - break; - } - if (!brandIconSrc) throw new Error('Invalid brand icon url: ' + props.brandIcon); - icon = ( - - {/* // Needs width and height */} - - - ); - } else { - // Use the custom icon or default to User icon. - const Icon = props.icon || User; - icon = ; - } - return ( - - - - Alert.alert('TODO')} - > - - {icon} - - {props.name && ( - - {props.name} - - )} - - {props.receivingNodeOsType && } - {props.connectionType && ( - - )} - - - - - ); -} - -export default function SpacedropScreen({ navigation }: SpacedropStackScreenProps<'Spacedrop'>) { - return ( - - - {testData.map((item, i) => ( - - ))} - - - ); -} diff --git a/apps/mobile/src/screens/Spaces.tsx b/apps/mobile/src/screens/Spaces.tsx deleted file mode 100644 index c5c7efb70..000000000 --- a/apps/mobile/src/screens/Spaces.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Text, View } from 'react-native'; -import { tw } from '~/lib/tailwind'; -import { SpacesStackScreenProps } from '~/navigation/tabs/SpacesStack'; - -export default function SpacesScreen({ navigation }: SpacesStackScreenProps<'Spaces'>) { - return ( - - Spaces - - ); -} diff --git a/apps/mobile/src/screens/onboarding/NewLibrary.tsx b/apps/mobile/src/screens/onboarding/NewLibrary.tsx index 6321744a3..36ea4b165 100644 --- a/apps/mobile/src/screens/onboarding/NewLibrary.tsx +++ b/apps/mobile/src/screens/onboarding/NewLibrary.tsx @@ -1,7 +1,7 @@ -import { Database } from '@sd/assets/icons'; import { Controller } from 'react-hook-form'; -import { Alert, Image, Text, View } from 'react-native'; +import { Alert, Text, View } from 'react-native'; import { Input } from '~/components/form/Input'; +import { Icon } from '~/components/icons/Icon'; import { Button } from '~/components/primitive/Button'; import { tw } from '~/lib/tailwind'; import { OnboardingStackScreenProps } from '~/navigation/OnboardingNavigator'; @@ -20,7 +20,7 @@ const NewLibraryScreen = ({ navigation }: OnboardingStackScreenProps<'NewLibrary return ( - + Create a Library diff --git a/apps/mobile/src/screens/onboarding/Privacy.tsx b/apps/mobile/src/screens/onboarding/Privacy.tsx index 2c5955f92..944e30e2d 100644 --- a/apps/mobile/src/screens/onboarding/Privacy.tsx +++ b/apps/mobile/src/screens/onboarding/Privacy.tsx @@ -1,6 +1,7 @@ +import { ArrowRight } from 'phosphor-react-native'; import React from 'react'; import { Controller } from 'react-hook-form'; -import { Pressable, Text, View, ViewStyle } from 'react-native'; +import { Linking, Pressable, Text, View, ViewStyle } from 'react-native'; import { Button } from '~/components/primitive/Button'; import { tw, twStyle } from '~/lib/tailwind'; import { OnboardingStackScreenProps } from '~/navigation/OnboardingNavigator'; @@ -83,6 +84,17 @@ const PrivacyScreen = () => { + { + Linking.openURL('https://www.spacedrive.com/docs/product/resources/privacy'); + }} + style={tw`mt-6 flex flex-row items-center justify-center`} + > + + + Learn more about the data we collect + + ); }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b59c2caa7d657adb50eb8d15f97ffa0f40226f88..4728d2ac6e4adfc431be1bb7c48217fd811c2396 100644 GIT binary patch delta 1799 zcmb7EeNa?Y6rcC*TX)~xx9sBLf{f^r!15uoi~9i@A~3)*Abu?ZiOQ-Vmgufusbhp+ zIjJ=|uRKizQU7S_OxR0riIbW+{gIWFl$GcbsSRoAPA*c{BH%d(Q9v z&hMUcAMAA;dco24BPX^mwMh54Vh!UKdrWb#+rpW|bE9IU4fs@C*e8}x{EBs_!P!&D zBIYL5QSbif@nTnsUOb(2{2{9&`B&AdR#$q_Ve3__v63~lkflp{kT|Z&C|Z3Q@f!aG z_4HRQ7r&Ta2&om=Aa!QwkP>APPfxx}SI4q0i63qm!+Ns8U(d%K7(i3SpY1-n6Ld}# z8y#hg8}2S(lf_;~N!TgnXTQfN%OrSq5Jiib&LYJOhMl6;sFQ*A3T>X)lc27ryD&ci}YLZkgQ#*WH81u(xi$DT4h72 zOS1YtiVmCGhZ@LG1Cv69fuIFBNlh&~D1*ydpD9Pud)X1gAPeT-n?u+^F+_8*Pi zmAs85$=gt#gXYZH!`NWAgl?-jrC>jSOyv5zXmxA^^!W=Yqy!KOdP44tg2O4W@JsZ) znr4G%E}@P{Nwa&=+cM8^Q<&kcJ~Wn^{Z+B>Z6C^2vS?im)E9JSKvM|C(GarpQ8V9&P4*>A+6jd{{i?np@L53vZ;3eco2LZLQRx-&kencH20(FGVxlV_JqMy)~@evC5c<%NH1v}jTL(dG#y$~IV)KAFdA}kGbh*;Covu2 zF4#wO%Z7|ATw8?F?^n2QRP0O=ca5tEgt0=sIx{&kOJiiA0|{QZGl4Viil3{Y|0w!v zN&H;h#WadTwQ~{c7TqfVz2$s?C4`Mpn3x&0^kGBtV{ z-0$WSl!}!5Gm^Yhys$39u*Ht+!m;w$Oocmn*Z`Bgn1_OFe3qusekW;DuuBEZgg2eI zDw03Rg_ry_pWJd|d9K4luFu6UacXBMCwPYUpl&+8{OHzbxi~F!aZ)tS!L9ECPl2b()#D!wl9%`efoQ!mp~_BVx#U1*Q1>jk9aBm(TPxFI`izY2LgXUq#Nw3}4x-DM8Qb zf|cID=HliePg%1&&|I@>g?p8wVEy{WQvduWd!>KPk~NNH{*7zbJ?+_4?eXOnmRGx$ z1?Df!hBq2D2@vRJbYw;uZe)3P8hyFs54N7y#gKF5xKi$j{pIvoC|!>e)Uq;n9om4& zp$+=>q+!ukw&_nQqS2ntBu~DkPic_*%tbz9gq<2_!-A0nv_b}guML8kbYkJ^v_An* CRb%h~ delta 1987 zcmaJ>eN0nV6i<8aqmSEaDIXS8)J;@AV*ASaf)hn*0Y%FSMA+oRq7ifhvEm0#rxVR$ zGSR5l?L?hZ{?csAtm*JB#%ye6QOul}$=p<+m>CUoi)LBkKbqb5%4@p?{o^I~+;h(F zobx-schBs1JnwV_9%4G^HV1XWLP00PhDj(bSWkvhbuzVNrqZhEzwpz!=~n8_sN<)O ziir>yKxW#T(H(1^nelhjw9;!ci=w8P=FjTa$w5nIt$wrw{dU=SdZ5_H&EWxLrKalg zU~SHuh$nSfC(vHo6ZIs~$0bwgt~EaDmrbDyj&YS^3jSWGYFaekn~h12M1UdOKl?0R<@#02I;r)czS8B z^)Q(l+`4R+h3E4v?Xfg5OOtLUUjZCSMNZbTTtA{z<#|rnSF108OU=3zm8t8F1XwYG zCUS3tF4i}Q@|F1EY?J|4>h-fmfgodr{*jss{%kxO0=X!Gt@7yuuO_rKZroVtwB_2Q zEJCJDvr~JQb+3E3p1F6U`3^YTk7vQ@Ao}aS*%s)zj|>p_0VOegH}YGxLZ^R3p%;Z> zIKPA>uz#*0pAZJ#{xiB4iOz!KH_@k~K&-VNo#mrwLY0)M22i;g%?WTp&s{Vg&W<3i z@CXAUydOfZ@Qbbx@~|tvqJxT1RVw%2K_WL^gg1}t>m`J06ss!BenG{rv|1kyqXkOu zUDnAkgmE%7+(+Za?woIGhQeh6cn6RP&fh~x8p^oeQG+hRj=D4ptQ>^ZtPjOwsTY3I6kc9SD&By^gSQ6E2G%ozQyGi0?N~3xTuZFzb9|NWTcghjzPtFS*3;|({96>;&Xx>e zk3S~e1_?D{5_{kk%zF9|Pk=AHLLNN69+$Y+Qz`H-j(-N`sT6NyX_%GoiATejTv@A> z%KK8-)}3NSpV~z-8+;?ayEz;!v)&8w$&u*!V80lj&Ru+w)0zKbylIn$dQKvB(N1SW zPa;VHyNej0IhR~je*jkZ8j+(hcIbDKDlOk9lT}e)Og@{MN7QFQ6+yx49G8`-*x5kW|zf&~AjRhnv{99TI$>lNPGDkZ*-RUCH#_Z6ykhF0Z ze;Vho?QU``?Bi5wS4x%6)m81){-$-+n;N~9%ROz* zcURV|m)k2^%Ni?l7V~)LqLpQ9*R5&X;FoIrRh~_oTb7i-x#74ea4?`Vz?93P1sV#( zRPcw4$t+MxviN(!ZZ9S8j0#0&+cxv2Bh1+M-q}Lfoh`-_8DZW|9yeZydfACjj58ZG f4Q8^ZI@1RNFk(t)od#15f*l5vncXC&oB96&oiU-;