Skip to content

Commit

Permalink
docker-compose and refactor home screen
Browse files Browse the repository at this point in the history
  • Loading branch information
anmho committed May 21, 2024
1 parent 26c8af6 commit f4c81d0
Show file tree
Hide file tree
Showing 24 changed files with 812 additions and 295 deletions.
3 changes: 3 additions & 0 deletions apps/expo/.env.development
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@

EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_ZXRoaWNhbC1zbmFwcGVyLTk0LmNsZXJrLmFjY291bnRzLmRldiQ
EXPO_PUBLIC_API_URL="localhost:3000"
1 change: 1 addition & 0 deletions apps/expo/app.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const defineConfig = (): ExpoConfig => ({
eas: {
projectId: "e5b5d2cd-098b-4fe4-85ed-ac05e395552d", // dennis' project id for now
},
clerkPublishableKey: process.env.CLERK_PUBLISHABLE_KEY,
},
experiments: {
tsconfigPaths: true,
Expand Down
2 changes: 2 additions & 0 deletions apps/expo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@clerk/clerk-expo": "^1.1.4",
"@expo/metro-config": "^0.17.6",
"@react-native-async-storage/async-storage": "1.21.0",
"@react-native-community/datetimepicker": "7.6.1",
Expand Down Expand Up @@ -52,6 +53,7 @@
"react-native-svg": "^15.1.0",
"superjson": "2.2.1",
"tamagui": "^1.94.4",
"zod": "^3.22.4",
"zustand": "^4.5.2"
},
"devDependencies": {
Expand Down
56 changes: 30 additions & 26 deletions apps/expo/src/app/_layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,15 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import { StatusBar } from "expo-status-bar";
import { ClerkProvider } from "@clerk/clerk-expo";
import InterBold from "@tamagui/font-inter/otf/Inter-Bold.otf";
import Inter from "@tamagui/font-inter/otf/Inter-Medium.otf";
import { ToastProvider, ToastViewport } from "@tamagui/toast";
import { createTamagui, TamaguiProvider, Theme } from "tamagui";

import { HamburgerMenu, Logo } from "~/components";
import { TRPCProvider } from "~/utils";
import { env } from "../utils/env";

// Main layout of the app
// It wraps your pages with the providers they need
Expand All @@ -37,37 +39,39 @@ export default function RootLayout() {
return (
<TRPCProvider>
<TamaguiProvider config={tamaguiConfig}>
<ToastProvider>
<Theme name={colorScheme}>
<Stack
screenOptions={{
headerTitle: () => <Logo />,
headerRight: () => <HamburgerMenu />,
headerStyle: {
backgroundColor: "#1A1B1D",
},
contentStyle: {
backgroundColor:
colorScheme === "dark" ? "#1A1B1D" : "#FFFFFF",
},
}}
>
{/* <Stack.Screen
<ClerkProvider publishableKey={env.CLERK_PUBLISHABLE_KEY}>
<ToastProvider>
<Theme name={colorScheme}>
<Stack
screenOptions={{
headerTitle: () => <Logo />,
headerRight: () => <HamburgerMenu />,
headerStyle: {
backgroundColor: "#1A1B1D",
},
contentStyle: {
backgroundColor:
colorScheme === "dark" ? "#1A1B1D" : "#FFFFFF",
},
}}
>
{/* <Stack.Screen
name="events"
options={{
presentation: "modal",
}}
/> */}
</Stack>
<StatusBar style="light" />
</Theme>
<ToastViewport
flexDirection="column"
bottom={bottom}
left={left}
right={right}
/>
</ToastProvider>
</Stack>
<StatusBar style="light" />
</Theme>
<ToastViewport
flexDirection="column"
bottom={bottom}
left={left}
right={right}
/>
</ToastProvider>
</ClerkProvider>
</TamaguiProvider>
</TRPCProvider>
);
Expand Down
5 changes: 5 additions & 0 deletions apps/expo/src/app/auth/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { Text } from "tamagui";

export default function Auth() {
return <Text>Auth</Text>;
}
80 changes: 80 additions & 0 deletions apps/expo/src/app/home/_components/dish-card.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { Link } from "expo-router";
import { StarFull } from "@tamagui/lucide-icons";
import { Image, ListItem, Text, XStack, YGroup, YStack } from "tamagui";

import type { MenuWithRelations } from "@zotmeal/db";

import { PinButton } from "~/components";

type Station = MenuWithRelations["stations"][0];
type Dish = MenuWithRelations["stations"][0]["dishes"][0];

export const DishCard = ({
dish,
stationId,
}: Readonly<{
dish: Dish;
stationId: Station["id"];
}>) => (
<YGroup.Item>
<Link
asChild
href={{
pathname: "/home/item/[id]",
params: {
id: dish.id,
stationId,
},
}}
>
<ListItem pressTheme>
<XStack justifyContent="space-between" paddingRight="$4">
<Image
resizeMode="contain"
alignSelf="center"
width="18%"
height={65}
marginRight="$3"
source={{
uri: "https://images.rawpixel.com/image_png_1100/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIzLTExL2ZyZWVpbWFnZXNjb21wYW55X3Bob3RvX29mX2Nob2NvbGF0ZV9jaGlwX2Nvb2tpZV90b3Bfdmlld19pc29sYV8xOGVkY2ZiYS00ZTJjLTQ5MWItYjZiOC02ZGZjNmY1M2Y0OWIucG5n.png",
}}
/>
<YStack
gap="$1"
width={"75%"}
justifyContent="space-between"
paddingTop="$4"
paddingBottom="$3"
>
<XStack justifyContent="space-between">
<Text fontWeight={"800"} fontSize={"$5"}>
{dish.name}
</Text>
<Text textAlign="right" fontSize="$5" fontWeight={"800"}>
{dish.nutritionInfo.calories} cal
</Text>
</XStack>
<XStack justifyContent="space-between">
<XStack alignItems="center" gap="$1" width={"70%"}>
<StarFull color="gold" scale={0.8} />
<Text>
<Text fontWeight="800" fontSize="$4">
5.0
</Text>{" "}
<Text color="gray">(10,000 reviews)</Text>
</Text>
</XStack>
<PinButton
dishName={dish.name}
scale={0.8}
minWidth="48%"
borderRadius="$10"
fontWeight="800"
/>
</XStack>
</YStack>
</XStack>
</ListItem>
</Link>
</YGroup.Item>
);
52 changes: 52 additions & 0 deletions apps/expo/src/app/home/_components/event-toast.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { Link } from "expo-router";
import { ArrowRight, CalendarDays } from "@tamagui/lucide-icons";
import { Toast, useToastState } from "@tamagui/toast";
import { Button } from "tamagui";
import { LinearGradient } from "tamagui/linear-gradient";



export function EventToast() {
const currentToast = useToastState();
if (!currentToast || currentToast.isHandledNatively) return null;
return (
<Toast
key={currentToast.id}
duration={currentToast.duration}
enterStyle={{ opacity: 0, scale: 1, y: 50 }}
exitStyle={{ opacity: 0, scale: 1, y: -20 }}
// y={0}
opacity={1}
scale={1}
animation="quicker"
viewportName={currentToast.viewportName}
borderRadius="$4"
flexDirection="row"
width="90%"
height="$6"
alignItems="center"
justifyContent="space-between"
>
<CalendarDays />
<Toast.Title fontWeight="800">{currentToast.title}</Toast.Title>
<LinearGradient
colors={["cornflowerblue", "blueviolet"]}
borderRadius="$20"
>
<Toast.Action altText="See Events" asChild>
<Link href="/events/" asChild replace>
<Button
backgroundColor={0}
pressTheme
size="$4"
circular
color="white"
icon={ArrowRight}
scaleIcon={1.5}
/>
</Link>
</Toast.Action>
</LinearGradient>
</Toast>
);
}
37 changes: 37 additions & 0 deletions apps/expo/src/app/home/_components/period-picker.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { Picker } from "@react-native-picker/picker";

import type { PeriodName } from "@zotmeal/utils";
import { PeriodEnum } from "@zotmeal/utils";

interface PeriodPickerProps {
periodName: PeriodName;
setPeriodName: (periodName: PeriodName) => void;
color: string;
}

export const PeriodPicker = ({
periodName,
setPeriodName,
color,
}: Readonly<PeriodPickerProps>) => (
<Picker
style={{
width: 150,
}}
itemStyle={{
height: 50,
paddingVertical: 50,
fontSize: 18,
color,
}}
selectedValue={periodName}
onValueChange={(itemValue, _) => {
setPeriodName(itemValue);
}}
>
{/* Create a Picker.Item for each period */}
{Object.entries(PeriodEnum).map(([period, id]) => (
<Picker.Item key={id} label={period} value={period} />
))}
</Picker>
);
91 changes: 91 additions & 0 deletions apps/expo/src/app/home/_components/station-tabs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import { H3, ScrollView, Separator, Tabs, Text, YGroup, YStack } from "tamagui";

import type { MenuWithRelations } from "@zotmeal/db";

import { groupBy } from "~/utils";
import { DishCard } from './dish-card';

type Station = MenuWithRelations["stations"][0];
type Dish = MenuWithRelations["stations"][0]["dishes"][0];

export const StationTabs = ({
stations,
}: Readonly<{ stations: Station[] }>) => (
<Tabs
defaultValue={stations?.[0]?.name}
orientation="horizontal"
flexDirection="column"
width={"100%"}
height={"100%"}
>
<Tabs.List>
<ScrollView
horizontal
bounces={false}
showsHorizontalScrollIndicator={false}
>
{stations.map((station) => (
<Tabs.Tab
key={station.name}
flex={1}
value={station.name}
borderRadius="$10"
height={"$3"}
marginHorizontal="$1"
marginBottom="$3"
>
<Text fontSize={"$5"}>{station.name}</Text>
</Tabs.Tab>
))}
</ScrollView>
</Tabs.List>

{stations.map((station) => (
<Tabs.Content key={station.name} value={station.name}>
<ScrollView
padding="$2"
contentContainerStyle={{
alignItems: "center",
}}
contentInset={{
top: 0,
bottom: 200, // Make space at the bottom of the ScrollView
}}
>
{/* group dishes by category */}
{Object.entries(
groupBy(station.dishes, (dish) => dish.category as keyof Dish),
).map(([category, dishes]) => (
<Category
key={category}
stationId={station.id}
category={category}
dishes={dishes}
/>
))}
</ScrollView>
</Tabs.Content>
))}
</Tabs>
);

const Category = ({
stationId,
category,
dishes,
}: Readonly<{
stationId: Station["id"];
category: string;
dishes: Dish[];
}>) => (
<YStack key={category} width={"100%"}>
<H3 fontWeight={"800"} marginTop="$5" paddingLeft="$2">
{category}
</H3>
<YGroup bordered separator={<Separator borderWidth={1} />}>
{dishes.map((dish) => (
<DishCard key={dish.id} dish={dish} stationId={stationId} />
))}
</YGroup>
</YStack>
);
Loading

0 comments on commit f4c81d0

Please sign in to comment.