Skip to content

Commit

Permalink
Merge library & search bar into a search screen
Browse files Browse the repository at this point in the history
G-Ray committed Aug 10, 2024
1 parent 70d8634 commit 360b250
Showing 9 changed files with 144 additions and 133 deletions.
1 change: 0 additions & 1 deletion apps/app/app/library/index.tsx

This file was deleted.

1 change: 1 addition & 0 deletions apps/app/app/search/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from '../../components/screens/search'
16 changes: 11 additions & 5 deletions apps/app/components/layout/buttons.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
import { Zap, Settings, HelpCircle, Library } from '@tamagui/lucide-icons'
import {
Zap,
Settings,
HelpCircle,
Library,
Search,
} from '@tamagui/lucide-icons'

export const getButtons = ({ i18n }) => {
return {
@@ -10,10 +16,10 @@ export const getButtons = ({ i18n }) => {
segment: '(torrents)',
},
{
icon: Library,
title: i18n.t('menu.library'),
href: '/library',
segment: 'library',
icon: Search,
title: i18n.t('menu.search'),
href: '/search',
segment: 'search',
},
{
icon: Settings,
85 changes: 0 additions & 85 deletions apps/app/components/screens/library/index.tsx

This file was deleted.

89 changes: 89 additions & 0 deletions apps/app/components/screens/search/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import React from 'react'
import {
Button,
Card,
H6,
Image,
Paragraph,
ScrollView,
XStack,
YStack,
useMedia,
} from 'tamagui'
import { DESKTOP_MAX_CONTENT_WIDTH } from '../../../constants/layout'
import { Download } from '@tamagui/lucide-icons'
import { useRouter } from 'expo-router'
import { library } from '../../../lib/library'
import { useI18n } from '../../../hooks/use18n'
import { Platform } from 'react-native'
import isElectron from 'is-electron'
import { TorrentFieldFormatter } from '../torrents/TorrentFieldFormatter'
import { SearchBar } from '../torrents/SearchBar'

export default function Library() {
const media = useMedia()
const i18n = useI18n()
const router = useRouter()

const handleDownloadPress = (content) => {
// NOTE: Workaround to always use a hash on web.
// This avoid leaking magnet/torrent link to the server
// Once expo-router supports hash, this should be revisited
if (Platform.OS === 'web' && !isElectron()) {
window.location.replace(`add#${content.magnet}`)
} else {
router.push(`/add?magnet=${encodeURIComponent(content.magnet)}`)
}
}

return (
<YStack f={1}>
<XStack w={'100%'} mt="$1" mb="$4" px={media.gtXs ? '$8' : '$2'}>
<SearchBar />
</XStack>
<ScrollView>
<YStack gap="$4" mb="$8" px={media.gtXs ? '$8' : '$2'}>
{library.map((t, index) => (
<Card key={index} p="$4" transparent bordered>
<XStack f={1} w="100%">
<XStack gap="$4" f={1}>
<Image
alignSelf="center"
source={{
width: 96,
height: 96,
uri: t.image,
}}
/>
<YStack f={1}>
<H6 numberOfLines={1}>{t.title}</H6>
<TorrentFieldFormatter name="totalSize" value={t.size} />
<Paragraph fontSize={'$2'}>{t.type}</Paragraph>
<Paragraph
numberOfLines={3}
fontSize={'$2'}
color="$gray11"
>
{t.description}
</Paragraph>
</YStack>
</XStack>
</XStack>
<Button
{...(!media.gtXs && { w: '100%' })}
alignSelf="center"
icon={Download}
onPress={() => handleDownloadPress(t)}
>
{i18n.t('library.download')}
</Button>
</Card>
))}
<Paragraph alignSelf="center">
{i18n.t('library.moreToCome')}
</Paragraph>
</YStack>
</ScrollView>
</YStack>
)
}
32 changes: 32 additions & 0 deletions apps/app/components/screens/torrents/AddButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react'
import { Button, XStack, useMedia, useThemeName } from 'tamagui'
import { useI18n } from '../../../hooks/use18n'
import { Link } from 'expo-router'
import { PlusCircle } from '@tamagui/lucide-icons'

export const AddButton = () => {
const i18n = useI18n()
const media = useMedia()
const theme = useThemeName()

return (
<Link href="/add" asChild>
<Button
theme="yellow"
backgroundColor={theme === 'light' ? 'white' : 'black'}
icon={PlusCircle}
borderColor={'$yellow9'}
style={{ textDecoration: 'none' }}
br={50}
{...{
position: 'absolute',
bottom: media.gtXs ? '$8' : '$4',
right: media.gtXs ? '$8' : '$4',
size: '$5',
}}
>
{i18n.t('torrents.add')}
</Button>
</Link>
)
}
35 changes: 0 additions & 35 deletions apps/app/components/screens/torrents/SearchBarWithAddButton.tsx

This file was deleted.

16 changes: 10 additions & 6 deletions apps/app/components/screens/torrents/_layout.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useContext, useState } from 'react'
import { useI18n } from '../../../hooks/use18n'
import { Input, Separator, Stack, XStack, YStack, useMedia } from 'tamagui'
import { SearchBarWithAddButton } from './SearchBarWithAddButton'
import { AddButton } from './AddButton'
import {
SortOptions,
SortingOptionsDialog,
@@ -25,7 +25,7 @@ export default function Torrents() {

return (
<YStack f={1}>
<YStack m="$1">
{/* <YStack m="$1">
{media.gtXs && (
<Stack>
<YStack px={media.gtXs ? '$8' : '$2'}>
@@ -34,7 +34,8 @@ export default function Torrents() {
<Separator my="$4" />
</Stack>
)}
</YStack>
</YStack> */}

<XStack
mx="auto"
w="100%"
@@ -65,11 +66,14 @@ export default function Torrents() {
/>
</YStack>
<Slot />
{!media.gtXs && (
{/* {!media.gtXs && (
<YStack p="$2" w="100%" mt="auto">
<SearchBarWithAddButton />
<AddButton />
</YStack>
)}
)} */}
<YStack p="$2" w="100%" mt="auto">
<AddButton />
</YStack>
</YStack>
)
}
2 changes: 1 addition & 1 deletion apps/app/locales/en.json
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
"menu": {
"about": "About",
"settings": "Settings",
"library": "Library"
"search": "Search"
},
"torrents": {
"add": "Add",

0 comments on commit 360b250

Please sign in to comment.