Skip to content

Commit

Permalink
Merge pull request #423 from bounswe/feature/MB-create-post
Browse files Browse the repository at this point in the history 
Feature/mb create post
  • Loading branch information
@furkansenkal
furkansenkal authored Nov 25, 2024
2 parents 91105f3 + 121ce44 commit c475655
Show file tree
Hide file tree
Showing 8 changed files with 461 additions and 103 deletions.
127 changes: 78 additions & 49 deletions mobile/src/pages/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
import 'react-native-gesture-handler';
import React from 'react';
import React, { useState, useEffect, useContext } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { AuthProvider, useAuth } from './context/AuthContext';
import Login from './Login';
import Register from './Register';
import ForgotPassword from './ForgotPassword';
import Home from './Home';
import Profile from './Profile';
import { ThemeProvider } from '../themes/ThemeProvider';

import Profile from './ProfilePage';
import News from './News';

import Markets from './Markets';
import Community from './Community';
import Post from './Post';
import CreatePost from './CreatePost';
import { AuthProvider, useAuth } from './context/AuthContext';


const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
Expand All @@ -24,14 +28,16 @@ const Drawer = createDrawerNavigator();
const CustomHeader = ({ navigation }) => {
const { user } = useAuth();


const handleProfileNavigation = () => {
if (user) {
navigation.navigate('Profile', { username: user.username });
} else {
navigation.navigate('Login&Register');
}
};
return (

return (
<View style={styles.customHeader}>
<TouchableOpacity onPress={() => navigation.toggleDrawer()} style={styles.headerButton}>
<MaterialIcons name="menu" size={30} color="white" />
Expand All @@ -44,66 +50,89 @@ const CustomHeader = ({ navigation }) => {
);
};

const PostRelated = () => {
return (
<ThemeProvider>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="CommunityPage" component={Community} ></Stack.Screen>
<Stack.Screen name="Post" component={Post} ></Stack.Screen>
<Stack.Screen name="CreatePost" component={CreatePost} ></Stack.Screen>
</Stack.Navigator>
</ThemeProvider>

)
}


// Login & Register Stack Navigator
const LoginStack = () => (
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="ForgotPassword" component={ForgotPassword} />
<Stack.Navigator >
<Stack.Screen name="Login" component={Login} options={{header: ({ navigation }) => <CustomHeader navigation={navigation} />}} />
<Stack.Screen name="Register" component={Register} options={{ headerShown: false }} />
<Stack.Screen name="ForgotPassword" component={ForgotPassword} options={{ headerShown: false }} />
</Stack.Navigator>
);

const PostStack = () => {
return (
<ThemeProvider>
<Stack.Navigator>
<Stack.Screen name="CommunityPage" component={Community} options={{ header: ({ navigation }) => <CustomHeader navigation={navigation} />, }}></Stack.Screen>
<Stack.Screen name="Post" component={Post} options={{ headerShown: true }} ></Stack.Screen>
<Stack.Screen name="CreatePost" component={CreatePost} options={{ headerShown: true, title:"Create a post" }}></Stack.Screen>
</Stack.Navigator>
</ThemeProvider>

)
}
const DrawerNavigator = () => {

const { user } = useAuth();

return (
<Drawer.Navigator
screenOptions={{
headerShown: true,
header: ({ navigation }) => <CustomHeader navigation={navigation} />,
}}
>

<Drawer.Screen name="Home" component={Home} />
{ user ? (
<Drawer.Screen name="Profile" component={Profile} />
) : (
<Drawer.Screen name="Login&Register" component={LoginStack} />
)}
<Drawer.Screen name="News" component={News} />
<Drawer.Screen name="Markets" component={Markets} />
<Drawer.Screen


return (
<Drawer.Navigator

screenOptions={{
header: ({ navigation }) => <CustomHeader navigation={navigation} />
}}

>
<Drawer.Screen
name="Home"
component={Home}

/>
{ user ? (
<Drawer.Screen
name="Profile"
component={Profile}

/>
) : (
<Drawer.Screen
name="Login&Register"
component={LoginStack}
options={{ headerShown: false }}
/>
)}
<Drawer.Screen
name="Markets"
component={Markets}

/>
<Drawer.Screen
name="Community"
component={PostRelated}
component={PostStack}
options={{ headerShown: false }}
/>
</Drawer.Navigator>
);
<Drawer.Screen
name="News"
component={News}
options={{ headerShown: false }}
/>

</Drawer.Navigator>
);

};
const App = () => {
// Access authentication state

const App = () => {
return (
<AuthProvider>
<NavigationContainer>
<DrawerNavigator />
</NavigationContainer>
<ThemeProvider>
<NavigationContainer>
<DrawerNavigator />
</NavigationContainer>
</ThemeProvider>
</AuthProvider>
);

};

const styles = StyleSheet.create({
Expand Down
127 changes: 89 additions & 38 deletions mobile/src/pages/Community.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import React from 'react';
import { View, Text, ScrollView, StyleSheet, TextInput, TouchableOpacity, Image } from 'react-native';
import { View, Text, FlatList, ScrollView, StyleSheet, TextInput, TouchableOpacity, Image } from 'react-native';
import { useState, useEffect } from 'react';
import { useFocusEffect } from '@react-navigation/native';


const Community = ({navigation}) => {
/*
const posts = [
{
id: 1,
Expand All @@ -26,60 +30,107 @@ const Community = ({navigation}) => {
comments: 8
}
];
*/
const [posts, setPosts] = useState([]);
const fetchPosts = async () => {
const baseURL = 'http://159.223.28.163:30002';
const postURL = baseURL + '/posts/';

try {
const response = await fetch(postURL, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': 'WTyfHMRCB4yI4D5IhdreWdnFDe6skYPyBbenY9Z5F5VWc7lyii9zV0qXKjtEDGRN',
},
});

if (response.ok) {
const jsonResponse = await response.json();
//console.log('Response:', jsonResponse);
setPosts(jsonResponse);

} else {
const errorResponse = await response.json();
console.log('Error Response:', errorResponse);

throw new Error('Network response was not ok.');

}
} catch (error) {

console.error('Error:', error);
}



};
useFocusEffect(
React.useCallback(() => {
fetchPosts();
}, [])
);

const handleViewPost = () => {
navigation.navigate('Post');
}

const handleViewPost = (post) => {
navigation.navigate('Post', { postId: post.id });
};

const handleCreatePost = () => {
navigation.navigate('CreatePost');
}

const renderItem = ({ item: post }) => (
<View key={post.id} style={styles.postCard}>
<Text style={styles.postTitle}>{post.title}</Text>
<Text style={styles.postMeta}>
Published on: {post.date} by {post.author}
</Text>
<Text style={styles.postContent}>{post.content}</Text>
<View style={styles.tagsContainer}>
{post.tags.map((tag) => (
<Text key={tag} style={styles.tag}>{tag}</Text>
))}
</View>
{post.graph && (
<Image source={{ uri: post.graph }} style={styles.graph} />
)}
<View style={styles.actions}>
<TouchableOpacity style={styles.actionButton}>
<Text>👍 {post.likes}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.actionButton}>
<Text>💬 {post.comments}</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.viewPostButton}
onPress={() => handleViewPost(post)}
>
<Text style={styles.viewPostButtonText}>View Post</Text>
</TouchableOpacity>
</View>
</View>
);

return (
<ScrollView style={styles.container}>
<View style={styles.container}>
<Text style={styles.header}>Community</Text>
<TouchableOpacity
style={styles.createPostButton}
onPress={() => handleCreatePost()}
onPress={handleCreatePost}
>
<Text style={styles.createPostButtonText}>Create A Post</Text>
</TouchableOpacity>
<TextInput
style={styles.searchBar}
placeholder="Search posts..."
/>
{posts.map((post) => (
<View key={post.id} style={styles.postCard}>
<Text style={styles.postTitle}>{post.title}</Text>
<Text style={styles.postMeta}>
Published on: {post.date} by {post.author}
</Text>
<Text style={styles.postContent}>{post.content}</Text>
<View style={styles.tagsContainer}>
{post.tags.map((tag) => (
<Text key={tag} style={styles.tag}>{tag}</Text>
))}
</View>
{post.graph && (
<Image source={{ uri: post.graph }} style={styles.graph} />
)}
<View style={styles.actions}>
<TouchableOpacity style={styles.actionButton}>
<Text>👍 {post.likes}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.actionButton}>
<Text>💬 {post.comments}</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.viewPostButton}
onPress={() => handleViewPost()}
>
<Text style={styles.viewPostButtonText}>View Post</Text>
</TouchableOpacity>
</View>
</View>
))}
</ScrollView>
<FlatList
data={posts}
renderItem={renderItem}
keyExtractor={(item) => item.id.toString()}
/>
</View>
);
};

Expand Down
Loading

0 comments on commit c475655

Please sign in to comment.