Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: adjusted for web #25

Merged
merged 1 commit into from
Jan 11, 2025
Merged

feat: adjusted for web #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 20 additions & 3 deletions frontend/app/(auth)/sign-in.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ const SignIn = () => {
password: ''
})

const isWeb = Platform.OS === 'web'

const [isSubmitting, setisSubmitting] = useState(false)

const [message, setMessage] = useState('')
Expand All @@ -26,7 +28,10 @@ const SignIn = () => {
useEffect(() => {

if (isLoggedIn) {
router.replace('/home')
if (isWeb)
window.location.href = '/home'
else
router.replace('/home');
}

if (username) {
Expand Down Expand Up @@ -69,11 +74,17 @@ const SignIn = () => {
.catch(err => {
console.log(err)
setIsLoading(false)
Alert.alert('Internal Server Error. Try again later')
setForm({
username: '',
password: ''
})

const message = 'Internal Server Error. Try again later'
if (isWeb) {
window.alert(message)
} else {
Alert.alert(message)
}
})
}

Expand All @@ -83,7 +94,7 @@ const SignIn = () => {
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
>
<ScrollView>
<View className='w-full justify-center min-h-[85vh] px-8 my-6'>
<View className='w-full justify-center min-h-[85vh] px-8 my-6 max-w-[800px] self-center'>
<Text className='text-2xl text-red mt-10 font-psemibold'>Log in to MedShop</Text>
<Text className='text-lg text-red text-center font-bold -mb-5 mt-2'>{message}</Text>
<FormField
Expand Down Expand Up @@ -112,6 +123,12 @@ const SignIn = () => {
Sign Up
</Link>
</View>
<CustomButton
title='Go back to Home'
handlePress={() => router.push('/home')}
containerStyles='mt-7 w-48 self-center'
isLoading={isSubmitting}
/>
</View>
</ScrollView>
{isLoading && (
Expand Down
30 changes: 26 additions & 4 deletions frontend/app/(auth)/sign-up.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ const SignUp = () => {
password: ''
})

const isWeb = Platform.OS === 'web'

const [isSubmitting, setisSubmitting] = useState(false)

const [message, setMessage] = useState('')
Expand All @@ -25,7 +27,10 @@ const SignUp = () => {

useEffect(() => {
if (isLoggedIn) {
router.replace('/home')
if (isWeb)
window.location.href = '/home'
else
router.replace('/home');
}
}, [])

Expand All @@ -44,7 +49,12 @@ const SignUp = () => {
setIsLoading(false)

if (data.message == 'Registration successful') {
alert('Account created successfully! You can now sign in')
const message = 'Account created successfully! You can now sign in'
if (isWeb){
window.alert(message)
} else {
alert(message)
}
router.replace(`/sign-in?username=${form.username}`)
} else {
setMessage(`${data.message}! ${data.details}`)
Expand All @@ -57,12 +67,18 @@ const SignUp = () => {
.catch(err => {
console.log(err)
setIsLoading(false)
Alert.alert('Internal Server Error. Try again later')
setForm({
username: '',
email: '',
password: ''
})

const message = 'Internal Server Error. Try again later'
if (isWeb) {
window.alert(message)
} else {
Alert.alert(message)
}
})
}

Expand All @@ -72,7 +88,7 @@ const SignUp = () => {
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
>
<ScrollView>
<View className='w-full justify-center min-h-[85vh] px-8 my-6'>
<View className='w-full justify-center min-h-[85vh] px-8 my-6 max-w-[800px] self-center'>
<Text className='text-2xl text-red mt-10 font-psemibold'>Register to MedShop</Text>
<Text className='text-lg text-red text-center font-bold -mb-5 mt-2'>{message}</Text>
<FormField
Expand Down Expand Up @@ -108,6 +124,12 @@ const SignUp = () => {
Sign In
</Link>
</View>
<CustomButton
title='Go back to Home'
handlePress={() => router.push('/home')}
containerStyles='mt-7 w-48 self-center'
isLoading={isSubmitting}
/>
</View>
</ScrollView>
{isLoading && (
Expand Down
30 changes: 19 additions & 11 deletions frontend/app/(tabs)/(products)/home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { View, Text, ScrollView, Alert, ActivityIndicator } from 'react-native'
import { View, Text, ScrollView, Alert, ActivityIndicator, Platform } from 'react-native'
import React, { useEffect, useState } from 'react'
import { SafeAreaView } from 'react-native-safe-area-context'
import { images } from '../../../constants'
import Item from '../../../components/Item'
import { router } from 'expo-router'
import { useGlobalContext } from '../../../context/GlobalProvider'
import { API_URL } from '../../_layout'

const Home = () => {
const isWeb = Platform.OS === 'web'

const [ products, setProducts ] = useState([])

const [isLoading, setIsLoading] = useState(false)
Expand All @@ -16,7 +16,7 @@ const Home = () => {

setIsLoading(true)

fetch(`${API_URL}/products`, {
fetch(`${API_URL}/products/`, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
Expand All @@ -27,7 +27,13 @@ const Home = () => {
})
.catch(err => {
console.log(err)
Alert.alert('Internal Server Error. Try again later')

const message = 'Internal Server Error. Try again later'
if (isWeb) {
window.alert(message)
} else {
Alert.alert(message)
}
})

setIsLoading(false)
Expand All @@ -47,12 +53,14 @@ const Home = () => {
return (
<SafeAreaView className='bg-slate-100 h-full'>
<ScrollView>
<Text className={`pt-4 px-8 text-3xl text-red font-bold self-start ${products.length == 0 && 'self-center'}`}>
{products.length > 0 ? 'All products:' : 'No products available'}
</Text>
<View className='w-full items-start justify-center h-full flex-row flex-wrap gap-6 pt-4'>
{productItems}
</View>
<View className={`${isWeb && 'max-w-[1000px] self-center'}`}>
<Text className={`pt-4 px-8 text-3xl text-red font-bold self-start ${products.length == 0 && 'self-center'}`}>
{products.length > 0 ? 'All products:' : 'No products available'}
</Text>
<View className='w-full items-start justify-center h-full flex-row flex-wrap gap-6 pt-4'>
{productItems}
</View>
</View>
</ScrollView>
{isLoading && (
<View className="absolute inset-0 bg-slate-700/50 flex justify-center items-center">
Expand Down
105 changes: 68 additions & 37 deletions frontend/app/(tabs)/(products)/product-details.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { View, Text, ScrollView, Image, Alert, ActivityIndicator } from 'react-native'
import { View, Text, ScrollView, Image, Alert, ActivityIndicator, Platform } from 'react-native'
import React, { useEffect, useState } from 'react'
import { SafeAreaView } from 'react-native-safe-area-context'
import CustomButton from '../../../components/CustomButton'
Expand Down Expand Up @@ -29,6 +29,8 @@ const ProductDetails = () => {

const [decreaseDisabled, setDecreaseDisabled] = useState(true)

const isWeb = Platform.OS === 'web'

useEffect(() => {
setIsLoading(true)

Expand All @@ -50,7 +52,12 @@ const ProductDetails = () => {
})
.catch(err => {
console.log(err)
Alert.alert('Internal Server Error. Try again later')

const message = 'Internal Server Error. Try again later'
if (isWeb)
window.alert(message)
else
Alert.alert(message)
})

setIsLoading(false)
Expand All @@ -62,7 +69,7 @@ const ProductDetails = () => {
if (/^\d{1,3}$/.test(text) && parseInt(text) >= 1 && parseInt(text) <= 999) {
setValue(text);
}
console.log(value);

setIncreaseDisabled(text == '999');
setDecreaseDisabled(text == '1');
}
Expand All @@ -81,29 +88,38 @@ const ProductDetails = () => {

setValue(newValue.toString());

console.log(newValue == '1');
setIncreaseDisabled(newValue == '999');
setDecreaseDisabled(newValue == '1');
}

const addToCart = () => {

if (!isLoggedIn) {
Alert.alert(
"Sign in required",
"You need to be signed in to add to cart. Do you want to sign in now?",
[
{
text: "No",
onPress: () => {}
},
{
text: "Yes",
onPress: () => router.push('/sign-in')
},
],
{ cancelable: true }
);

const message = "You need to be signed in to add to cart. Do you want to sign in now?"

if (isWeb) {
const confirm = window.confirm(message)

if (confirm) router.push('/sign-in');
} else {
Alert.alert(
"Sign in required",
message,
[
{
text: "No",
onPress: () => {}
},
{
text: "Yes",
onPress: () => router.push('/sign-in')
},
],
{ cancelable: true }
);
}


return;
}
Expand All @@ -127,40 +143,55 @@ const ProductDetails = () => {
triggerRefreshViews();
setIsLoading(false)

Alert.alert(
"Product added to cart",
"Product added to cart. Do you want to continue to checkout?",
[
{
text: "No",
onPress: () => {}
},
{
text: "Yes",
onPress: () => router.push('/cart')
},
],
{ cancelable: true }
);
const message = "Product added to cart. Do you want to continue to checkout?"

if (isWeb) {
const confirm = window.confirm(message)

if (confirm) router.push('/cart');
} else {
Alert.alert(
"Product added to cart",
message,
[
{
text: "No",
onPress: () => {}
},
{
text: "Yes",
onPress: () => router.push('/cart')
},
],
{ cancelable: true }
);
}


})
.catch(err => {
setIsLoading(false)
console.log(err)
Alert.alert('Internal Server Error. Try again later')

const message = 'Internal Server Error. Try again later'
if (isWeb){
window.alert(message)
} else {
Alert.alert(message)
}
})
}

return (
<SafeAreaView className='bg-slate-100 h-full'>
<ScrollView>
<View className='w-full items-start justify-center h-full gap-4 px-8'>
<View className='w-full items-start justify-center h-full gap-4 px-8 max-w-[1000px] self-center'>
<View className='w-full self-center items-center justify-center bg-[#ffffff] rounded-xl shadow-sm'>
{productInfo.imageUrl ?
<Image
source={{ uri: productInfo.imageUrl }}
resizeMode='contain'
className='w-[250px] h-[250px] self-center'
className='w-[250px] h-[250px] sm:w-[300px] sm:h-[300px] md:w-[350px] md:h-[350px] self-center'
/>
:
<ActivityIndicator size='large' className='w-[250px] h-[250px] self-center' color='#0000ff' />
Expand Down
Loading
Loading