Merge pull request #127 from aaronleopold/126-refactor-ui-into-reusab…

…le-components

126 refactor UI into reusable components

.husky/pre-commit

@@ -2,11 +2,5 @@
 . "$(dirname "$0")/_/husky.sh"
 
 npx lint-staged
-#! damn moon kinda annoying me lately. So I added an .editorconfig
-#! file so it would stop replacing tabs with spaces, but it still formats
-#! config files (e.g. tsconfig) wrong...
-#* https://moonrepo.dev/docs/faq#how-to-stop-moon-formatting-json-and-yaml-files
-moon run :lint && pnpm prettify
-
-# moon run :typecheck
-# cargo clippy --all-targets --workspace -- -D warnings
+# https://moonrepo.dev/docs/faq#how-to-stop-moon-formatting-json-and-yaml-files
+# moon run :lint && pnpm prettify

apps/mobile/app/_layout.tsx

@@ -1,6 +1,6 @@
 import { queryClient, QueryClientContext, QueryClientProvider, useUserStore } from '@stump/client'
 import { Slot, useRootNavigationState, useRouter } from 'expo-router'
-import React, { Suspense, useEffect } from 'react'
+import { Suspense, useEffect } from 'react'
 import { Text } from 'react-native'
 
 export default function Layout() {

apps/mobile/app/connect/index.tsx

@@ -1,8 +1,10 @@
 import { initializeApi, ping } from '@stump/api'
-import { Stack, useRouter } from 'expo-router'
+import { useRouter } from 'expo-router'
 import { useEffect, useState } from 'react'
-import { Text, TextInput, TouchableOpacity, View } from 'react-native'
+import { View } from 'react-native'
 
+import { PrimaryButton } from '../../components/primitives/Buttons'
+import TextField from '../../components/primitives/TextField'
 import { ErrorSnack } from '../../components/SnackMessage'
 
 export default function Connect() {
@@ -36,17 +38,13 @@ export default function Connect() {
 
 	return (
 		<View className="flex flex-1 items-center justify-center px-5">
-			<Stack.Screen options={{ title: 'Connect to Stump' }} />
-			<TextInput
-				className="w-full border border-black px-5 py-3"
+			<TextField
+				label="Connection URL"
 				placeholder="http(s)://"
-				placeholderTextColor={'#999'}
+				onChange={setConnectionUrl}
 				value={connectionUrl}
-				onChangeText={setConnectionUrl}
 			/>
-			<TouchableOpacity className="mx-auto mt-10 rounded-lg bg-gray-900 p-3 px-6" onPress={connect}>
-				<Text className="text-white">Connect</Text>
-			</TouchableOpacity>
+			<PrimaryButton label={'Connect'} onTap={connect} />
 
 			{error && <ErrorSnack message={error} />}
 		</View>

apps/mobile/app/home/HomeTab.tsx

@@ -1,15 +1,16 @@
 import { useLibraryStats } from '@stump/client'
-import { SafeAreaView, Text } from 'react-native'
+import { SafeAreaView } from 'react-native'
 
-import LibraryStatsCard from '../../components/LibraryStatsCard'
+import LibraryStatsCard from '../../components/library/LibraryStatsCard'
+import { TitleText } from '../../components/primitives/Text'
 
 export default function HomeTab() {
 	const { libraryStats } = useLibraryStats()
 
 	return (
 		<SafeAreaView className="mx-5 mt-10 flex-1">
 			<SafeAreaView className="flex flex-row justify-between">
-				<Text className="text-2xl font-semibold">Stats</Text>
+				<TitleText text={'Stats'} />
 			</SafeAreaView>
 			{libraryStats && <LibraryStatsCard stats={libraryStats} />}
 		</SafeAreaView>

apps/mobile/app/home/_layout.tsx

@@ -8,15 +8,15 @@ export default function HomeLayout() {
 		<Tabs>
 			<Tabs.Screen
 				options={{
-					headerRight: (props) => <_HeaderRight props={props} />,
+					headerRight: () => <_HeaderRight />,
 					tabBarIcon: ({ color }) => <House color={color} />,
 					title: 'Home',
 				}}
 				name="HomeTab"
 			/>
 			<Tabs.Screen
 				options={{
-					headerRight: (props) => <_HeaderRight props={props} />,
+					headerRight: () => <_HeaderRight />,
 					tabBarIcon: ({ color }) => <Books color={color} />,
 					title: 'Libraries',
 				}}

apps/mobile/app/index.tsx

@@ -0,0 +1,30 @@
+import { queryClient, useUserStore } from '@stump/client'
+import { useRootNavigationState, useRouter } from 'expo-router'
+import { useEffect } from 'react'
+
+/// This is the root component of the app.
+/// It is responsible for redirecting the user to the correct page.
+/// It is also responsible for invalidating the cache when the user logs in or out.
+export default function App() {
+	const navigationState = useRootNavigationState()
+	const router = useRouter()
+
+	const { user } = useUserStore((store) => ({
+		user: store.user,
+	}))
+
+	useEffect(() => {
+		// Temporary fix for the router not being ready.
+		if (!navigationState?.key) return
+
+		if (user) {
+			queryClient.invalidateQueries(['getLibraries'])
+			router.push('/home')
+			return
+		}
+
+		router.push('/connect')
+	}, [navigationState?.key, user])
+
+	return null
+}

apps/mobile/app/login/index.tsx

@@ -1,8 +1,10 @@
 import { useLoginOrRegister, useUserStore } from '@stump/client'
 import { Stack } from 'expo-router'
 import React, { useEffect, useState } from 'react'
-import { Text, TextInput, TouchableOpacity, View } from 'react-native'
+import { Text, View } from 'react-native'
 
+import { PrimaryButton } from '../../components/primitives/Buttons'
+import TextField from '../../components/primitives/TextField'
 import { ErrorSnack } from '../../components/SnackMessage'
 
 export default function Login() {
@@ -45,27 +47,15 @@ export default function Login() {
 	}
 
 	return (
-		<View className="flex-1 justify-center bg-gray-950 px-10">
+		<View className="flex-1 justify-center px-10">
 			<Stack.Screen options={{ title: 'Login to Stump' }} />
-			<Text className="mb-2 font-medium">Username</Text>
-			<TextInput
-				className="w-full rounded-md border border-black px-5 py-3"
-				placeholder="username"
-				placeholderTextColor={'#999'}
-				onChangeText={setUsername}
+			<TextField label="Username" onChange={setUsername} placeholder={'username'} />
+			<View className={'mt-5'} />
+			<TextField label="Password" onChange={setPassword} placeholder={'password'} secureTextEntry />
+			<PrimaryButton
+				label={isClaimed ? 'Login' : 'Register'}
+				onTap={!isRegistering && !isLoggingIn && handleSubmit}
 			/>
-			<Text className="mb-2 mt-5 font-medium">Password</Text>
-			<TextInput
-				className="w-full rounded-md border border-black px-5 py-3"
-				secureTextEntry
-				onChangeText={setPassword}
-			/>
-			<TouchableOpacity
-				className="mx-auto mt-10 rounded-lg bg-gray-900 p-3 px-6"
-				onPress={!isRegistering && !isLoggingIn && handleSubmit}
-			>
-				<Text className="text-white">Login</Text>
-			</TouchableOpacity>
 
 			{error && <ErrorSnack message={error} />}
 		</View>

apps/mobile/app/series/[id].tsx

@@ -1,17 +1,19 @@
 import { API } from '@stump/api'
-import { useLibrarySeries } from '@stump/client'
+import { useLibrarySeriesQuery } from '@stump/client'
 import { Series } from '@stump/types'
 import { Link, useSearchParams } from 'expo-router'
 import { Image, SafeAreaView, Text, View } from 'react-native'
 
+import { TitleText } from '../../components/primitives/Text'
+
 export default function Library() {
 	const { id } = useSearchParams()
 
-	const { series } = useLibrarySeries(id as string)
+	const { series } = useLibrarySeriesQuery(id as string, {})
 
 	return (
 		<SafeAreaView className="mx-5 mt-10 flex-1">
-			<Text className="text-2xl font-semibold">Series</Text>
+			<TitleText text={'Series'} />
 			<View className="mt-5 flex flex-row flex-wrap">
 				{series && series.map((series) => <SeriesCard key={series.id} series={series} />)}
 			</View>

apps/mobile/components/LibraryStatsCard.tsx → apps/mobile/components/library/LibraryStatsCard.tsx

@@ -2,7 +2,7 @@ import { LibrariesStats } from '@stump/types'
 import { useMemo } from 'react'
 import { Text, View } from 'react-native'
 
-import { formatBytesSeparate } from '../utils/format'
+import { formatBytesSeparate } from '../../utils/format'
 
 export default function LibraryStatsCard({ stats }: { stats: LibrariesStats }) {
 	const libraryUsage = useMemo(() => {

apps/mobile/components/primitives/Buttons.tsx

@@ -0,0 +1,17 @@
+import { Text, TouchableOpacity } from 'nativewind/dist/preflight'
+
+type ButtonProps = {
+	label: string
+	onTap: () => void
+}
+
+export const PrimaryButton = (props: ButtonProps) => {
+	return (
+		<TouchableOpacity
+			className="mx-auto mt-10 rounded-lg bg-gray-900 p-3 px-6"
+			onPress={props.onTap}
+		>
+			<Text className="text-white">{props.label}</Text>
+		</TouchableOpacity>
+	)
+}

apps/mobile/components/primitives/Text.tsx

@@ -0,0 +1,5 @@
+import { Text } from 'react-native'
+
+export const TitleText = ({ text }: { text: string }) => (
+	<Text className="text-2xl font-semibold">{text}</Text>
+)

apps/mobile/components/primitives/TextField.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Text, TextInput, View } from 'react-native'
+
+type TextFieldProps = {
+	className?: string
+	label?: string
+	placeholder?: string
+	value?: string
+	onChange: (value: string) => void
+	secureTextEntry?: boolean
+}
+
+const TextField = ({
+	className,
+	label,
+	value,
+	placeholder,
+	onChange,
+	secureTextEntry,
+}: TextFieldProps) => {
+	return (
+		<View className={className}>
+			{label && <Text className="mb-2 font-medium">{label}</Text>}
+			<TextInput
+				className="w-full rounded-md border border-black px-5 py-3"
+				placeholder={placeholder}
+				value={value}
+				placeholderTextColor={'#999'}
+				onChangeText={onChange}
+				secureTextEntry={secureTextEntry}
+			/>
+		</View>
+	)
+}
+
+export default TextField

apps/mobile/tailwind.config.js

@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	content: ['./app/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'],
+	plugins: [],
 	theme: {
 		extend: {},
 	},
-	plugins: [],
 }

package.json

@@ -52,7 +52,7 @@
 		"*.{js,jsx,ts,tsx,md,json}": [
 			"prettier --config prettier.config.js --check"
 		],
-		".rs": [
+		"*.rs": [
 			"cargo fmt --check --manifest-path=core/Cargo.toml --",
 			"cargo fmt --check --manifest-path=apps/server/Cargo.toml --",
 			"cargo fmt --check --manifest-path=apps/desktop/src-tauri/Cargo.toml --"