feat: polish for testing

Testausserveri · Jul 16, 2024 · ce3f3c9 · ce3f3c9
1 parent 9fd2e03
commit ce3f3c9
Show file tree

Hide file tree

Showing 12 changed files with 200 additions and 25 deletions.
diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx
@@ -21,14 +21,6 @@ export default function TabLayout() {
                     ),
                 }}
             />
-            <Tabs.Screen
-                name='profile'
-                options={{
-                    tabBarIcon: ({ color, focused }) => (
-                        <TabBarIcon name={focused ? 'person' : 'person-outline'} color={color} />
-                    ),
-                }}
-            />
             <Tabs.Screen
                 name='about'
                 options={{
@@ -48,6 +40,14 @@ export default function TabLayout() {
                     ),
                 }}
             />
+            <Tabs.Screen
+                name='profile'
+                options={{
+                    tabBarIcon: ({ color, focused }) => (
+                        <TabBarIcon name={focused ? 'person' : 'person-outline'} color={color} />
+                    ),
+                }}
+            />
         </Tabs>
     );
 }
diff --git a/app/(tabs)/profile.tsx b/app/(tabs)/profile.tsx
@@ -1,27 +1,53 @@
+import AppBar from '@/elements/AppBar';
 import LanguageSelector from '@/elements/LanguageSelector';
-import { ProfileView } from '@/elements/user/ProfileView';
+import { Link } from 'expo-router';
 import { useTranslation } from 'react-i18next';
-import { Divider, Surface, Text, useTheme } from 'react-native-paper';
+import { View } from 'react-native';
+import { Surface, Text, useTheme } from 'react-native-paper';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export default function HomeScreen() {
     const { t } = useTranslation();
     const theme = useTheme();
 
+    const insets = useSafeAreaInsets();
+
     return (
-        <Surface
+        <View
             style={{
                 flex: 1,
                 alignItems: 'center',
-                justifyContent: 'center',
                 gap: 8,
-                padding: 16,
                 backgroundColor: theme.colors.background,
+                paddingTop: insets.top,
             }}
         >
-            <Text>{t('home')}</Text>
-            <Divider />
-            <LanguageSelector />
-            <ProfileView />
-        </Surface>
+            <AppBar title={t('profile')} />
+            <View
+                style={{ flex: 1, width: '100%', justifyContent: 'center', alignItems: 'center' }}
+            >
+                <LanguageSelector />
+                <Surface
+                    elevation={0}
+                    style={{ padding: 16, width: '100%', justifyContent: 'center', gap: 16 }}
+                >
+                    <Text style={{ textAlign: 'center' }} variant='bodyLarge'>
+                        {t('working-on-this')}
+                    </Text>
+                    <Link
+                        style={{
+                            color: theme.colors.primary,
+                            textDecorationLine: 'underline',
+                            textAlign: 'center',
+                        }}
+                        href='/credits'
+                    >
+                        {t('meanwhile')}
+                    </Link>
+                </Surface>
+            </View>
+
+            {/** <ProfileView /> */}
+        </View>
     );
 }
diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -1,12 +1,14 @@
+import { TabBarIcon } from '@/components';
 import { GlobalStateProvider } from '@/hooks/providers/GlobalStateProvider';
 import Locales from '@/locales';
 import { Themes } from '@/styles';
 import { useFonts } from 'expo-font';
-import { Stack } from 'expo-router';
+import { Stack, router } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
 import i18n from 'i18next';
 import { useEffect } from 'react';
-import { initReactI18next } from 'react-i18next';
+import { initReactI18next, useTranslation } from 'react-i18next';
+import { Platform } from 'react-native';
 import { PaperProvider } from 'react-native-paper';
 import 'react-native-reanimated';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
@@ -32,6 +34,8 @@ export default function RootLayout() {
         Roboto: require('../assets/fonts/Roboto-Regular.ttf'),
     });
 
+    const { t } = useTranslation();
+
     useEffect(() => {
         if (loaded) {
             SplashScreen.hideAsync();
@@ -49,6 +53,27 @@ export default function RootLayout() {
                     <Stack>
                         <Stack.Screen name='(tabs)' options={{ headerShown: false }} />
                         <Stack.Screen name='+not-found' />
+
+                        <Stack.Screen
+                            name='credits'
+                            options={{
+                                headerTitle: t('credits'),
+                                headerStyle: {
+                                    backgroundColor: Themes['dark']['default'].colors.background,
+                                },
+                                headerTintColor: Themes['dark']['default'].colors.primary,
+                                headerLeft: (props) => (
+                                    <TabBarIcon
+                                        style={{
+                                            color: Themes['dark']['default'].colors.primary,
+                                            marginRight: 10,
+                                        }}
+                                        name={Platform.OS === 'ios' ? 'chevron-back' : 'arrow-back'}
+                                        onPress={() => router.canGoBack() && router.back()}
+                                    />
+                                ),
+                            }}
+                        />
                     </Stack>
                 </PaperProvider>
             </SafeAreaProvider>

diff --git a/app/credits.tsx b/app/credits.tsx
@@ -0,0 +1,91 @@
+import { useTranslation } from 'react-i18next';
+import { ImageBackground, View } from 'react-native';
+import { ScrollView } from 'react-native';
+import { Text, useTheme } from 'react-native-paper';
+
+export default function Credits() {
+    const theme = useTheme();
+    const { t } = useTranslation();
+    return (
+        <ScrollView
+            style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: theme.colors.background,
+            }}
+            contentContainerStyle={{
+                gap: 16,
+                paddingBottom: 16,
+            }}
+        >
+            <View>
+                <ImageBackground
+                    source={require('../assets/images/TSRY_Hero.png')}
+                    style={{ width: '100%', height: 100 }}
+                />
+                <ImageBackground
+                    source={require('../assets/images/ASSEMBLY_Logo_White_TightCrop.png')}
+                    style={{ width: '100%', height: 100 }}
+                    resizeMode='contain'
+                />
+                <View
+                    style={{
+                        width: '100%',
+                        paddingVertical: 16,
+                        paddingHorizontal: 24,
+                        gap: 16,
+                        backgroundColor: theme.colors.primaryContainer,
+                    }}
+                >
+                    <Text variant='bodyLarge'>{t('testausserveri-credits')}</Text>
+                    <Text
+                        variant='bodyLarge'
+                        style={{
+                            fontWeight: 'bold',
+                        }}
+                    >
+                        {t('project-management')}
+                    </Text>
+                </View>
+            </View>
+            <View style={{ gap: 16, paddingHorizontal: 16 }}>
+                <Text variant='bodyLarge'>Samu Kupiainen</Text>
+            </View>
+            <Text
+                variant='bodyLarge'
+                style={{
+                    fontWeight: 'bold',
+                    width: '100%',
+                    paddingVertical: 16,
+                    paddingHorizontal: 24,
+                    backgroundColor: theme.colors.primaryContainer,
+                }}
+            >
+                {t('devteam')}
+            </Text>
+            <View style={{ gap: 16, paddingHorizontal: 16 }}>
+                <Text variant='bodyLarge'>Luukas Pörtfors</Text>
+                <Text variant='bodyLarge'>Otto Laakkonen</Text>
+                <Text variant='bodyLarge'>Eero Salla</Text>
+                <Text variant='bodyLarge'>Onni Linnala</Text>
+                <Text variant='bodyLarge'>Anto Keinänen</Text>
+                <Text variant='bodyLarge'>Samu Kupiainen</Text>
+            </View>
+            <Text
+                variant='bodyLarge'
+                style={{
+                    fontWeight: 'bold',
+                    width: '100%',
+                    paddingVertical: 16,
+                    paddingHorizontal: 24,
+                    backgroundColor: theme.colors.primaryContainer,
+                }}
+            >
+                {t('some-great-administrative-work')}
+            </Text>
+            <View style={{ gap: 16, paddingHorizontal: 16 }}>
+                <Text variant='bodyLarge'>Mikael Hannolainen</Text>
+            </View>
+        </ScrollView>
+    );
+}
diff --git a/assets/images/ASSEMBLY_Logo_White_TightCrop.png b/assets/images/ASSEMBLY_Logo_White_TightCrop.png
diff --git a/assets/images/TSRY_Hero.png b/assets/images/TSRY_Hero.png
diff --git a/assets/images/haze.png b/assets/images/haze.png
diff --git a/elements/map/EventMap.tsx b/elements/map/EventMap.tsx
@@ -7,7 +7,7 @@ function EventMap() {
             maxZoom={2.5}
             minZoom={0.5}
             zoomStep={0.5}
-            initialZoom={1}
+            initialZoom={0.5}
             bindToBorders={true}
             style={{
                 width: 'fit-content',

diff --git a/elements/user/ProfileView.tsx b/elements/user/ProfileView.tsx
@@ -3,6 +3,7 @@ import { loginRequest, signupRequest } from '@/api/userService';
 import { useGlobalState } from '@/hooks/providers/GlobalStateProvider';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { View } from 'react-native';
 import { Button, Portal, Snackbar, Surface, Text, TextInput, useTheme } from 'react-native-paper';
 
 export function ProfileView() {
@@ -28,7 +29,7 @@ export function ProfileView() {
     return (
         <Surface
             elevation={0}
-            style={{ alignItems: 'center', gap: 10, marginTop: 20, width: '90%' }}
+            style={{ alignItems: 'center', gap: 10, marginTop: 20, width: '100%' }}
         >
             {login ? (
                 <>
@@ -51,7 +52,15 @@ export function ProfileView() {
                     </Button>
                 </>
             ) : (
-                <>
+                <View
+                    style={{
+                        width: '80%',
+                        gap: 16,
+                        display: 'flex',
+                        alignItems: 'center',
+                    }}
+                >
+                    <Text variant='titleMedium'>{t('sign-in')}</Text>
                     <TextInput
                         mode='outlined'
                         label={t('email')}
@@ -179,7 +188,7 @@ export function ProfileView() {
                             <Text>{t(errorText)}</Text>
                         </Snackbar>
                     </Portal>
-                </>
+                </View>
             )}
         </Surface>
     );

diff --git a/hooks/providers/GlobalStateProvider.tsx b/hooks/providers/GlobalStateProvider.tsx
@@ -1,5 +1,5 @@
 import { ProfileData } from '@/api/userService';
-import { PropsWithChildren, createContext, useContext, useState } from 'react';
+import { PropsWithChildren, createContext, useContext, useEffect, useState } from 'react';
 
 export type Login = {
     token: string;
@@ -23,6 +23,8 @@ export function useGlobalState() {
 export function GlobalStateProvider({ children }: PropsWithChildren) {
     const [state, setState] = useState({});
 
+    useEffect(() => {}, []);
+
     const context = {
         state,
         signin(login: Login) {

diff --git a/locales/en.ts b/locales/en.ts
@@ -24,5 +24,16 @@ export default {
         'empty-fields': 'Please fill in all fields',
         'email-exists': 'Email already exists',
         'invalid-credentials': 'Invalid credentials',
+        profile: 'Profile',
+        'working-on-this':
+            'Hi! We are still working on the app. There are bunch of cool features coming to the app that are currently available on the web site. There are a lot of even cooler people that are putting in voluntary hours on your user experience. Hope you understand that creating awesome things take time and still find the app useful. Have a great event!',
+        meanwhile:
+            'Meanwhile, why not check out the team that almost magically have put this app together!',
+        'testausserveri-credits':
+            'Volunteers of "Testausserveri Ry" have put in the work to make this happen. Thank you!',
+        'project-management': 'Project Management',
+        devteam: 'Development Team',
+        'some-great-administrative-work': 'Some great administrative work',
+        credits: 'Credits',
     },
 };
diff --git a/locales/fi.ts b/locales/fi.ts
@@ -24,5 +24,16 @@ export default {
         'empty-fields': 'Täytä kaikki kentät',
         'email-exists': 'Sähköposti on jo käytössä',
         'invalid-credentials': 'Virheelliset tunnistetiedot',
+        profile: 'Profiili',
+        'working-on-this':
+            'Hei! Työstämme sovellusta edelleen. Sovellukseen on tulossa paljon uusia hienoja ominaisuuksia, jotka ovat tällä hetkellä saatavilla verkkosivuilla. Vielä hienompaa, kuin tulevat ominaisuudet, ovat vapaaehtoiset velhot, jotka käyttävät paljon tunteja käyttäjäkokemuksesi eteen. Toivottavasti ymmärrät, että upeiden asioiden luominen vie aikaa ja läydät sovelluksesta silti hyötyä. Mahtavaa tapahtumaa!',
+        meanwhile:
+            'Sillä välin, mikset kävisi vilkisemasssa tiimiä, joka kuin taikasauvalla, on tämän sovelluksen koonnut!',
+        'testausserveri-credits':
+            'Testausserveri Ry:n vapaaehtoiset ovat mahdollistaneet sovelluksen syntymisen. Kiitos!',
+        'project-management': 'Projektin hallinta',
+        devteam: 'Kehitystiimi',
+        'some-great-administrative-work': 'Hienoa hallinnollista työtä',
+        credits: 'Kiitokset',
     },
 };