Skip to content

Commit

Permalink
Merge branch 'main' into 521-mock-data
Browse files Browse the repository at this point in the history
  • Loading branch information
@garrettladley
garrettladley authored Apr 14, 2024
2 parents 273cc95 + 450323d commit 065ffbf
Show file tree
Hide file tree
Showing 25 changed files with 576 additions and 279 deletions.
20 changes: 16 additions & 4 deletions frontend/sac-mobile/app/(app)/(tabs)/search.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,23 @@
import React from 'react';
import { Text, View } from 'react-native';
import { SafeAreaView, ScrollView, Text, View } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';

import { Button } from '@/components/button';

const Search = () => {
return (
<View>
<Text>Search</Text>
</View>
<SafeAreaView>
<ScrollView className="px-[8%] pb-[9%] w-full">
<Text className="text-5xl font-bold text-black">Search</Text>
<View className="flex flex-row gap-4">
<TextInput
placeholder="Search"
className="w-48 p-2 mt-2 border border-black rounded-lg"
/>
<Button>Search</Button>
</View>
</ScrollView>
</SafeAreaView>
);
};

Expand Down
138 changes: 70 additions & 68 deletions frontend/sac-mobile/app/(app)/_layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,81 @@ import { MenuView } from '@react-native-menu/menu';

import { LeftArrow } from '@/components/left-arrow';

const EventDotsVertical = () => {
return (
<MenuView
onPressAction={({ nativeEvent }) => {
console.warn(JSON.stringify(nativeEvent));
}}
actions={[
{
id: 'share',
title: 'Share Event',
image: Platform.select({
ios: 'square.and.arrow.up',
android: 'share-variant'
})
},
{
id: 'report',
title: 'Report Event',
image: Platform.select({
ios: 'person.crop.circle.badge.exclamationmark.fill',
android: 'person-circle-outline'
})
}
]}
>
<MaterialCommunityIcons
name="dots-vertical"
size={24}
color="white"
/>
</MenuView>
);
};

const ClubDotsVertical = () => {
return (
<MenuView
onPressAction={({ nativeEvent }) => {
console.warn(JSON.stringify(nativeEvent));
}}
actions={[
{
id: 'share',
title: 'Share Club',
image: Platform.select({
ios: 'square.and.arrow.up',
android: 'share-variant'
})
},
{
id: 'report',
title: 'Report Club',
image: Platform.select({
ios: 'person.crop.circle.badge.exclamationmark.fill',
android: 'person-circle-outline'
})
}
]}
>
<MaterialCommunityIcons
name="dots-vertical"
size={24}
color="white"
/>
</MenuView>
);
};

const Layout = () => {
return (
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen
name="event/[id]"
options={{
animationTypeForReplace: 'push',
animation: 'slide_from_right',
headerShown: true,
headerTitleStyle: {
color: 'white'
Expand All @@ -25,39 +91,7 @@ const Layout = () => {
<View className="h-full bg-gray-600" />
),
headerLeft: () => <LeftArrow />,

Check warning on line 93 in frontend/sac-mobile/app/(app)/_layout.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “Layout” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true

Check warning on line 93 in frontend/sac-mobile/app/(app)/_layout.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “Layout” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true
headerRight: () => {
return (
<MenuView
onPressAction={({ nativeEvent }) => {
console.warn(JSON.stringify(nativeEvent));
}}
actions={[
{
id: 'share',
title: 'Share Event',
image: Platform.select({
ios: 'square.and.arrow.up',
android: 'share-variant'
})
},
{
id: 'report',
title: 'Report Event',
image: Platform.select({
ios: 'person.crop.circle.badge.exclamationmark.fill',
android: 'person-circle-outline'
})
}
]}
>
<MaterialCommunityIcons
name="dots-vertical"
size={24}
color="white"
/>
</MenuView>
);
}
headerRight: () => <EventDotsVertical />

Check warning on line 94 in frontend/sac-mobile/app/(app)/_layout.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “Layout” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true

Check warning on line 94 in frontend/sac-mobile/app/(app)/_layout.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “Layout” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true
}}
/>
<Stack.Screen
Expand All @@ -73,39 +107,7 @@ const Layout = () => {
<View className="h-full bg-gray-600" />
),
headerLeft: () => <LeftArrow />,

Check warning on line 109 in frontend/sac-mobile/app/(app)/_layout.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “Layout” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true

Check warning on line 109 in frontend/sac-mobile/app/(app)/_layout.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “Layout” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true
headerRight: () => {
return (
<MenuView
onPressAction={({ nativeEvent }) => {
console.warn(JSON.stringify(nativeEvent));
}}
actions={[
{
id: 'share',
title: 'Share Club',
image: Platform.select({
ios: 'square.and.arrow.up',
android: 'share-variant'
})
},
{
id: 'report',
title: 'Report Club',
image: Platform.select({
ios: 'person.crop.circle.badge.exclamationmark.fill',
android: 'person-circle-outline'
})
}
]}
>
<MaterialCommunityIcons
name="dots-vertical"
size={24}
color="white"
/>
</MenuView>
);
}
headerRight: () => <ClubDotsVertical />

Check warning on line 110 in frontend/sac-mobile/app/(app)/_layout.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “Layout” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true

Check warning on line 110 in frontend/sac-mobile/app/(app)/_layout.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “Layout” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true
}}
/>
</Stack>
Expand Down
35 changes: 26 additions & 9 deletions frontend/sac-mobile/app/(app)/club/[id].tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,36 @@
import React from 'react';
import { SafeAreaView, Text } from 'react-native';
import { Text, View } from 'react-native';

import { Link, Stack, useLocalSearchParams } from 'expo-router';
import { Stack, useLocalSearchParams } from 'expo-router';

import { useClub } from '@/hooks/use-club';

const ClubPage = () => {
const { id } = useLocalSearchParams<{ id: string }>();

const { data: club, isLoading, error } = useClub(id);

if (isLoading) {
return <Text>Loading...</Text>;
}

if (error) {
return <Text>Error: {error.message}</Text>;
}

if (!club) {
return <Text>Club not found</Text>;
}

return (
<SafeAreaView>
<Stack.Screen options={{ title: `${id}` }} />
<Text>ClubPage</Text>
<Link href={{ pathname: `/club/faq/${id}` }}>
<Text>FAQ</Text>
</Link>
</SafeAreaView>
<>
<Stack.Screen options={{ title: `${club.name}` }} />
<View className="flex items-center justify-center flex-1">
<Text>{club.name}</Text>
<Text>{club.recruitment_cycle}</Text>
<Text>{club.application_link}</Text>
</View>
</>
);
};

Expand Down
18 changes: 10 additions & 8 deletions frontend/sac-mobile/app/(app)/event/[id].tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,32 @@
import React from 'react';
import React, { useRef } from 'react';
import { ScrollView, Text, View } from 'react-native';

import { Stack, useLocalSearchParams } from 'expo-router';

import BottomSheet from '@gorhom/bottom-sheet';

import { AllHosts } from '@/app/(app)/event/_components/all-hosts';
import { TagList } from '@/components/all-tags';
import { Button } from '@/components/button';
import { Description } from '@/components/description';
import { useAuthStore } from '@/hooks/use-auth';
import { Title } from '@/components/title';
import { useEvent } from '@/hooks/use-event';

import { Title } from '../_components/title';
import { EventHeader } from './_components/event-header';
import { EventLocation } from './_components/event-location';
import { EventTime } from './_components/event-time';
import { HostNames } from './_components/host-names';
import { LocationView } from './_components/location-view';
import RSVPBottomSheet from './_components/rsvp-bottom-sheet';

// TODO: handle link OR location
const EventPage = () => {
const { id } = useLocalSearchParams<{ id: string }>();
const { user } = useAuthStore();

const { data: event, isLoading, error } = useEvent(id);

const ref = useRef<BottomSheet>(null);

if (error) {
console.error(error);
return <Text>Error fetching event</Text>;
Expand All @@ -41,14 +44,12 @@ const EventPage = () => {

return (
<>
<Stack.Screen
options={{ title: `${event.name} - ${user?.first_name}` }}
/>
<Stack.Screen options={{ title: `${event.name}` }} />
<ScrollView showsVerticalScrollIndicator={false}>
<View className="flex-col justify-between flex-1 w-full">
<View className="w-full bg-gray-600 h-[100]" />
<View className="w-full px-6 pb-5">
<EventHeader />
<EventHeader ref={ref} />
<View className="flex gap-y-2">
<Title title={event.name} />
<HostNames eventID={event.id} />
Expand Down Expand Up @@ -84,6 +85,7 @@ const EventPage = () => {
</View>
</View>
</ScrollView>
<RSVPBottomSheet ref={ref} />
</>
);
};
Expand Down
24 changes: 22 additions & 2 deletions frontend/sac-mobile/app/(app)/event/_components/event-header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,21 @@
import { forwardRef } from 'react';
import { Platform, View } from 'react-native';

import BottomSheet from '@gorhom/bottom-sheet';
import { MenuView } from '@react-native-menu/menu';

import { Button } from '@/components/button';

const EventHeader = () => {
type Ref = BottomSheet;

const EventHeader = forwardRef<Ref>((_, ref) => {
if (!ref) {
return null;
}

// @ts-ignore
const handleOpenPress = () => ref.current?.snapToIndex(0);

return (
<View className="flex-row items-center justify-between -translate-y-10">
<View className="w-24 h-24 bg-gray-300 rounded-xl" />
Expand Down Expand Up @@ -51,9 +62,18 @@ const EventHeader = () => {
RSVP
</Button>
</MenuView>

<Button
size={'default'}
variant={'default'}
className="w-18"
onPress={handleOpenPress}
>
Save
</Button>
</View>
</View>
);
};
});

export { EventHeader };
28 changes: 11 additions & 17 deletions frontend/sac-mobile/app/(app)/event/_components/location-view.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React from 'react';
import { Image, Linking, Text, TouchableOpacity, View } from 'react-native';
import { Linking, Text, TouchableOpacity, View } from 'react-native';
import MapView from 'react-native-maps';
import { createOpenLink } from 'react-native-open-maps';

import { useAssets } from 'expo-asset';

import { Button } from '@/components/button';

type LocationViewProps = {
Expand All @@ -12,16 +11,9 @@ type LocationViewProps = {
};

const LocationView = ({ location, meetingLink }: LocationViewProps) => {
const [assets, error] = useAssets([
require('@/assets/images/placeholder_location.png')
]);
const coordinates = { latitude: 42.3393326, longitude: -71.0869942 };
const openMap = createOpenLink({ ...coordinates });

if (error) {
console.error(error);
}

return (
<>
<View className="inline-flex flex-row items-center justify-between">
Expand Down Expand Up @@ -52,13 +44,15 @@ const LocationView = ({ location, meetingLink }: LocationViewProps) => {
)}

<View className="w-full mt-4 overflow-hidden border-2 rounded-xl border-zinc-300">
{assets ? (
<Image
source={{ uri: assets[0].uri }}
style={{ width: '100%', height: assets[0].height }}
className="rounded-[22px]"
/>
) : null}
<MapView
onPress={openMap}
style={{ width: '100%', height: 200 }}

Check warning on line 49 in frontend/sac-mobile/app/(app)/event/_components/location-view.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Inline style: { width: '100%', height: 200 }

Check warning on line 49 in frontend/sac-mobile/app/(app)/event/_components/location-view.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Inline style: { width: '100%', height: 200 }
initialRegion={{
...coordinates,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
/>
</View>
</>
);
Expand Down
Loading

0 comments on commit 065ffbf

Please sign in to comment.