Skip to content

Commit

Permalink
feat: adjusted for web
Browse files Browse the repository at this point in the history
  • Loading branch information
@mfmatusz
mfmatusz committed Jan 11, 2025
1 parent 8d64440 commit 5103823
Show file tree
Hide file tree
Showing 18 changed files with 547 additions and 219 deletions.
23 changes: 20 additions & 3 deletions frontend/app/(auth)/sign-in.jsx
View file
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
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
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
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

0 comments on commit 5103823

Please sign in to comment.