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

Session Page #39

Merged
merged 3 commits into from
Jul 4, 2023
Merged

Session Page #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
897782e
Session Page
kharioki Jul 3, 2023
fee937a
update icon color on dark mode
kharioki Jul 3, 2023
610fdad
added paddings, text contrasts and image fixes
kharioki Jul 4, 2023
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
243 changes: 216 additions & 27 deletions app/(app)/session/[session].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,183 @@
import { AntDesign } from '@expo/vector-icons';
import { AntDesign, FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons';
import { useTheme } from '@react-navigation/native';
import { Image } from 'expo-image';
import { Stack, useRouter, useSearchParams } from 'expo-router';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import React, { useState } from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
import Row from '../../../components/common/Row';
import Space from '../../../components/common/Space';
import StyledText from '../../../components/common/StyledText';
import MainContainer from '../../../components/container/MainContainer';

// TODO: Session page
/**
* - should show details of the event session: speaker name, title of session, description, level, speaker's twitter handle, and a floating action button to share the session info
*/
// TODO: Use real data from mock/sessions.ts
import { Sessions } from '../../../mock/sessions';
import { getSessionTimesAndLocation, getTwitterHandle, truncate } from '../../../util/helpers';

const Session = () => {
const { colors } = useTheme();
const { colors, dark } = useTheme();
const { slug } = useSearchParams();
const router = useRouter();

// filter session by slug
const session = Sessions.data.filter((_session) => _session.slug === slug)[0];

const [showMoreBio, setShowMoreBio] = useState(false);

return (
<MainContainer preset="scroll">
<Stack.Screen
options={{
title: `Session ${slug}`,
headerTitleAlign: 'center',
headerTintColor: colors.text,
headerStyle: {
backgroundColor: colors.background,
},
headerLeft: () => <AntDesign name="arrowleft" size={24} color={colors.text} onPress={() => router.back()} />,
}}
/>

<View style={styles.main}>
<StyledText>session slug: {slug}</StyledText>
</View>
</MainContainer>
<View style={styles.main}>
<MainContainer preset="scroll">
<Stack.Screen
options={{
title: `Session Details`,
headerTitleAlign: 'center',
headerTintColor: colors.text,
headerStyle: {
backgroundColor: dark ? colors.bg : colors.background,
},
headerTitleStyle: {
fontSize: 18,
fontWeight: '300',
},
headerLeft: () => (
<AntDesign name="arrowleft" size={24} color={colors.text} onPress={() => router.back()} />
),
}}
/>

<View style={styles.main}>
<View style={[styles.centered, { borderColor: dark ? colors.background : colors.border }]}>
<Row>
<View>
<View style={styles.row}>
<FontAwesome5 name="android" size={18} color={colors.tertiary} />
<Space size={5} horizontal />
<StyledText size="sm" font="regular" style={{ color: colors.tertiary }}>
{session?.speakers && session?.speakers.length > 1 ? 'Speakers' : 'Speaker'}
</StyledText>
</View>
<StyledText size="lg" font="bold" style={{ color: dark ? colors.text : colors.primary }}>
{session?.speakers.map((speaker) => speaker.name).join(', ')}
</StyledText>
</View>
{/** Bookmark session button. TODO: Add bookmark functionality */}
<View>
<Space size={14} />
<FontAwesome5 name="star" size={24} color={colors.primary} />
</View>
</Row>

<Space size={20} />

<StyledText size="lg" font="bold">
{session?.title}
</StyledText>

<Space size={16} />

{session?.speakers && session?.speakers.length > 1 ? (
session?.speakers.map((speaker, index) => (
<View key={index.toString()}>
<StyledText font="regular" style={{ color: colors.primary }}>
{speaker.name} - {''}
<StyledText font="regular" style={{ color: dark ? colors.text : colors.textLight }}>
{!showMoreBio ? truncate(140, speaker.biography) : speaker.biography}
{speaker.biography && speaker.biography.length > 140 && (
<StyledText
size="sm"
font="semiBold"
style={{ color: colors.primary }}
onPress={() => setShowMoreBio(!showMoreBio)}
>
{showMoreBio ? ' ...Show less' : ' Show more'}
</StyledText>
)}
</StyledText>
</StyledText>
<Space size={10} />
</View>
))
) : (
<StyledText font="regular" style={{ color: dark ? colors.text : colors.textLight }}>
{!showMoreBio ? truncate(140, session?.speakers[0]?.biography) : session?.speakers[0]?.biography}
{session?.speakers[0]?.biography && session?.speakers[0]?.biography.length > 140 && (
<StyledText
size="sm"
font="semiBold"
style={{ color: colors.primary }}
onPress={() => setShowMoreBio(!showMoreBio)}
>
{showMoreBio ? ' ...Show less' : ' Show more'}
</StyledText>
)}
</StyledText>
)}

<Space size={16} />

<Image
source={{ uri: session?.session_image || '' }}
style={styles.image}
contentFit="cover"
contentPosition="left"
/>
</View>

<View style={[styles.centered, { borderColor: dark ? colors.background : colors.border }]}>
<StyledText font="light">{getSessionTimesAndLocation(session?.slug || '')}</StyledText>

<Space size={16} />

<View style={[styles.chip, { backgroundColor: dark ? colors.background : colors.text }]}>
<StyledText size="sm" style={[styles.chipText, { color: dark ? colors.text : colors.background }]}>
#{session?.session_level}
</StyledText>
</View>
</View>

<View style={styles.withPadding}>
{/** TODO: Add twitter redirect functionality */}
{session?.speakers && session?.speakers.length > 1 ? (
<View>
<StyledText font="medium">Twitter Handles</StyledText>

<Space size={16} />

<Row>
{session?.speakers.map((speaker, index) => (
<Pressable
key={index.toString()}
style={[styles.button, { borderColor: colors.primary, backgroundColor: colors.background }]}
>
<FontAwesome5 name="twitter" size={20} color={colors.primary} />
<Space size={4} horizontal />
<StyledText font="medium" style={{ color: colors.primary }}>
{speaker.twitter ? getTwitterHandle(speaker.twitter) : 'N/A'}
</StyledText>
</Pressable>
))}
</Row>
</View>
) : (
<Row>
<StyledText font="medium">Twitter Handle</StyledText>

<Pressable style={[styles.button, { borderColor: colors.primary, backgroundColor: colors.background }]}>
<FontAwesome5 name="twitter" size={20} color={colors.primary} />
<Space size={4} horizontal />
<StyledText font="medium" style={{ color: colors.primary }}>
{session?.speakers[0]?.twitter ? getTwitterHandle(session?.speakers[0]?.twitter) : 'N/A'}
</StyledText>
</Pressable>
</Row>
)}
</View>
<Space size={30} />
</View>
</MainContainer>

{/** Floating action button. TODO: Add share functionality */}
<Pressable style={[styles.fab, { backgroundColor: colors.tertiary }]}>
<MaterialCommunityIcons name="share" size={30} color="white" />
</Pressable>
kharioki marked this conversation as resolved.
Show resolved Hide resolved
</View>
);
};

Expand All @@ -43,6 +186,52 @@ export default Session;
const styles = StyleSheet.create({
main: {
flex: 1,
width: '100%',
marginBottom: 60,
},
centered: {
paddingHorizontal: 16,
paddingVertical: 20,
borderBottomWidth: 0.5,
},
row: {
flexDirection: 'row',
alignItems: 'center',
},
image: {
height: 190,
width: '100%',
borderRadius: 10,
},
chip: {
paddingHorizontal: 10,
paddingVertical: 5,
borderRadius: 5,
alignSelf: 'flex-start',
},
chipText: {
textTransform: 'uppercase',
},
withPadding: {
padding: 20,
},
button: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-evenly',
paddingHorizontal: 12,
paddingVertical: 8,
borderRadius: 8,
borderWidth: 1,
},
fab: {
position: 'absolute',
bottom: 20,
right: 20,
width: 60,
height: 60,
borderRadius: 30,
justifyContent: 'center',
alignItems: 'center',
},
});
36 changes: 9 additions & 27 deletions components/lists/SessionsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import { useRouter } from 'expo-router';
import React from 'react';
import type { ListRenderItemInfo } from 'react-native';
import { Dimensions, FlatList, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
import type { Session, SessionForSchedule } from '../../global';
import { Schedule } from '../../mock/schedule';
import type { Session } from '../../global';
import { Sessions } from '../../mock/sessions';
import { getSessionTimeAndLocation, truncate } from '../../util/helpers';
import ViewAllButton from '../buttons/ViewAllButton';
import Row from '../common/Row';
import Space from '../common/Space';
Expand All @@ -20,29 +20,6 @@ const SessionsList = () => {
const sessions = Sessions.data.slice(0, 5); // filter sessions to 5
const sessionCount = (Sessions.data.length - 5).toString();

// truncate title to 2 lines, and add ellipsis at the end
const truncateTitle = (title: string) => {
const titleLength = title.length;
const maxTitleLength = 50;
if (titleLength > maxTitleLength) {
return `${title.substring(0, maxTitleLength)}...`;
}
return title;
};

// a function that gets the start time and room.title of a session from the schedule.data array
const getSessionTimeAndLocation = (slug: string) => {
for (const key in Schedule.data) {
const sessionData = Schedule.data[key];
const session = sessionData?.find((item: SessionForSchedule) => item.slug === slug);
if (session) {
const startTime = session.start_time.split(':').slice(0, 2).join(':');
return `@ ${startTime} | Room ${session?.rooms[0]?.title}`;
}
}
return '';
};

return (
<View style={styles.list}>
<Row>
Expand All @@ -62,12 +39,17 @@ const SessionsList = () => {
onPress={() => router.replace({ pathname: `/session/${item.slug}`, params: { slug: item.slug } })}
>
<View style={[styles.card, { backgroundColor: colors.card }]}>
<Image source={{ uri: item.session_image || '' }} style={styles.image} contentFit="cover" />
<Image
source={{ uri: item.session_image || '' }}
style={styles.image}
contentFit="cover"
contentPosition="left"
/>
<Space size={8} />
<View style={styles.bottom}>
<View style={styles.description}>
<StyledText font="bold" numberOfLines={2} style={styles.title}>
{truncateTitle(item.title)}
{truncate(50, item.title)}
</StyledText>
</View>

Expand Down
1 change: 0 additions & 1 deletion components/player/VideoPlayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable react/no-unstable-nested-components */
import { Ionicons } from '@expo/vector-icons';
import { useTheme } from '@react-navigation/native';
import type { VideoProps } from 'expo-av';
Expand Down
Loading