From 5ad1a6cb5e5a2d915086ede50ea9338678579488 Mon Sep 17 00:00:00 2001 From: Harshana Chamod Date: Sat, 8 Mar 2025 01:29:33 +0530 Subject: [PATCH 1/8] added scroll fuctionality to community --- frontend/app/screens/tabs/Community.js | 306 ++++++++++++++----------- 1 file changed, 177 insertions(+), 129 deletions(-) diff --git a/frontend/app/screens/tabs/Community.js b/frontend/app/screens/tabs/Community.js index b9214c4..9d55c6c 100644 --- a/frontend/app/screens/tabs/Community.js +++ b/frontend/app/screens/tabs/Community.js @@ -1,140 +1,188 @@ import React from "react"; -import { View, Image, StyleSheet, Text, TextInput } from "react-native"; +import { + View, + Image, + StyleSheet, + Text, + TextInput, + ScrollView, +} from "react-native"; import Card from "../../fragments/card"; // Main community card(ReWire Community) export default function Community() { - - return ( - - - - console.log("Searching for:", text)} - /> - - Main Community - console.log("Card Pressed")} style={styles.communitycard}> - - - ReWire Community - - - - Joined Community - console.log("Card Pressed")} style={styles.communitycard}> - - - Braking Habits - - - - console.log("Card Pressed")} style={styles.communitycard}> - - - Fight For Freedom - - - - Suggestions - - console.log("Card Pressed")} style={styles.communitycard}> - - - Rise from Darkness - - - - console.log("Card Pressed")}style={styles.communitycard}> - - - Better Future Together - - - - console.log("Create Community Pressed")} style={styles.CreateCommCard}> - - - Create Community - - + return ( + + + + + console.log("Searching for:", text)} + /> - ); + Main Community + console.log("Card Pressed")} + style={styles.communitycard} + > + + + ReWire Community + + + Joined Community + console.log("Card Pressed")} + style={styles.communitycard} + > + + + Braking Habits + + + console.log("Card Pressed")} + style={styles.communitycard} + > + + + Fight For Freedom + + + Suggestions + + console.log("Card Pressed")} + style={styles.communitycard} + > + + + Rise from Darkness + + + console.log("Card Pressed")} + style={styles.communitycard} + > + + + Better Future Together + + + console.log("Card Pressed")} + style={styles.communitycard} + > + + + Better Future Together + + + console.log("Create Community Pressed")} + style={styles.CreateCommCard} + > + + + Create Community + + + + + ); } // Card stylesheet const styles = StyleSheet.create({ - searchContainer: { - flexDirection: "row", - alignItems: "center", - backgroundColor: "#D9D9D6", - borderRadius: 30, - padding: 10, - marginBottom: 5, - }, - searchIcon: { - width: 20, - height: 20, - marginRight: 10, - }, - searchInput: { - flex: 1, - fontSize: 16, - }, - - titleContainer: { - flexDirection: "row", - alignItems: "center", - gap: 30, - }, + searchContainer: { + flexDirection: "row", + alignItems: "center", + backgroundColor: "#D9D9D6", + borderRadius: 30, + padding: 10, + marginBottom: 5, + }, + searchIcon: { + width: 20, + height: 20, + marginRight: 10, + }, + searchInput: { + flex: 1, + fontSize: 16, + }, + + titleContainer: { + flexDirection: "row", + alignItems: "center", + gap: 30, + }, - communitycard: { - borderRadius: 30, - }, - image: { - width: 40, - height: 40, - borderRadius: 40, - borderColor: "green", - borderWidth: 2, - }, - text: { - color: "grey", - fontSize: 14, - paddingLeft: 5, - paddingBottom: 10, - textAlign: "left", - }, - CreateCommCard: { - backgroundColor: '#D9D9D6', - padding: 10, - borderRadius: 45, - marginTop: 10, - }, - createCommContainer:{ - flexDirection: "row", - alignItems: "center", - justifyContent: "center", - padding: 10, - }, - CommunityImage: { - width: 50, - height: 50, - marginRight: 10, - }, - commmunityText: { - color: "green", - fontSize: 18, - fontWeight: "bold", - paddingLeft: 5, - }, -}); \ No newline at end of file + communitycard: { + borderRadius: 30, + }, + image: { + width: 40, + height: 40, + borderRadius: 40, + borderColor: "green", + borderWidth: 2, + }, + text: { + color: "grey", + fontSize: 14, + paddingLeft: 5, + paddingBottom: 10, + textAlign: "left", + }, + CreateCommCard: { + backgroundColor: "#D9D9D6", + padding: 10, + borderRadius: 45, + marginTop: 10, + }, + createCommContainer: { + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + padding: 10, + }, + CommunityImage: { + width: 50, + height: 50, + marginRight: 10, + }, + commmunityText: { + color: "green", + fontSize: 18, + fontWeight: "bold", + paddingLeft: 5, + }, +}); From 307fce75cfe5902112795f236f996fc384eaa83f Mon Sep 17 00:00:00 2001 From: Harshana Chamod Date: Sun, 9 Mar 2025 16:17:32 +0530 Subject: [PATCH 2/8] implement functions to handel join community and leave community --- frontend/app/screens/tabs/Community.js | 137 ++++++++++++++----------- 1 file changed, 75 insertions(+), 62 deletions(-) diff --git a/frontend/app/screens/tabs/Community.js b/frontend/app/screens/tabs/Community.js index 9d55c6c..ea90c0d 100644 --- a/frontend/app/screens/tabs/Community.js +++ b/frontend/app/screens/tabs/Community.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { View, Image, @@ -11,6 +11,50 @@ import Card from "../../fragments/card"; // Main community card(ReWire Community) export default function Community() { + + //some dummy data + const [communities, setCommunities] = useState([ + { + name: 'ReWire Community', + image: require("../../assets/rewire-logo.png"), + }, + ]); + + const [joinedCommunities, setJoinedCommunities] = useState([ + { + name: 'Braking Habits', + image: require("../../assets/habits.jpeg"), + members: 100, + }, + { + name: 'Fight For Freedom', + image: require("../../assets/freedom.jpeg"), + members: 67 + }, + ]); + + const [suggestedCommunities, setSuggestedCommunities] = useState([ + { + name: 'Rise from Darkness', + image: require("../../assets/rise.png"), + members: 45, + }, + { + name: 'Better Future Together', + image: require("../../assets/better future.jpeg"), + members: 23, + }, + ]); + const handleJoinCommunity= (community) => { + setJoinedCommunities([...joinedCommunities, community]); + setSuggestedCommunities(suggestedCommunities.filter(c => c.name !== community.name)); + }; + + const handleLeaveCommunity = (community) => { + setJoinedCommunities(joinedCommunities.filter(c => c.name !== community.name)); + setSuggestedCommunities([...suggestedCommunities, community]); + }; + return ( @@ -40,68 +84,37 @@ export default function Community() { Joined Community - console.log("Card Pressed")} - style={styles.communitycard} - > - - - Braking Habits - - - console.log("Card Pressed")} - style={styles.communitycard} - > - - - Fight For Freedom - - + {joinedCommunities.map((community, index) => ( + handleLeaveCommunity(community)} + style={styles.communitycard} + > + + + {community.name} + + + ))} Suggestions - - console.log("Card Pressed")} - style={styles.communitycard} - > - - - Rise from Darkness - - - console.log("Card Pressed")} - style={styles.communitycard} - > - - - Better Future Together - - - console.log("Card Pressed")} - style={styles.communitycard} - > - - - Better Future Together - - + {suggestedCommunities.map((community, index) => ( + handleJoinCommunity(community)} + style={styles.communitycard} + > + + + {community.name} + + + ))} console.log("Create Community Pressed")} style={styles.CreateCommCard} From 0cfe1f3cdf353749cef20db45bc99acfeb9473b0 Mon Sep 17 00:00:00 2001 From: Harshana Chamod Date: Sun, 9 Mar 2025 18:55:08 +0530 Subject: [PATCH 3/8] added id component to cmmunity data. -Replace name-based filtering with ID-based filtering in handleJoinCommunity and handleLeaveCommunity. --- frontend/app/screens/tabs/Community.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/frontend/app/screens/tabs/Community.js b/frontend/app/screens/tabs/Community.js index ea90c0d..fd6fda0 100644 --- a/frontend/app/screens/tabs/Community.js +++ b/frontend/app/screens/tabs/Community.js @@ -13,8 +13,9 @@ import Card from "../../fragments/card"; export default function Community() { //some dummy data - const [communities, setCommunities] = useState([ + const [maincommunity, setMainCommunity] = useState([ { + id: "0000", name: 'ReWire Community', image: require("../../assets/rewire-logo.png"), }, @@ -22,11 +23,13 @@ export default function Community() { const [joinedCommunities, setJoinedCommunities] = useState([ { + id: "0001", name: 'Braking Habits', image: require("../../assets/habits.jpeg"), members: 100, }, { + id: "0002", name: 'Fight For Freedom', image: require("../../assets/freedom.jpeg"), members: 67 @@ -35,11 +38,13 @@ export default function Community() { const [suggestedCommunities, setSuggestedCommunities] = useState([ { + id: "0003", name: 'Rise from Darkness', image: require("../../assets/rise.png"), members: 45, }, { + id: "0004", name: 'Better Future Together', image: require("../../assets/better future.jpeg"), members: 23, @@ -47,11 +52,11 @@ export default function Community() { ]); const handleJoinCommunity= (community) => { setJoinedCommunities([...joinedCommunities, community]); - setSuggestedCommunities(suggestedCommunities.filter(c => c.name !== community.name)); + setSuggestedCommunities(suggestedCommunities.filter(c => c.id !== community.id)); }; const handleLeaveCommunity = (community) => { - setJoinedCommunities(joinedCommunities.filter(c => c.name !== community.name)); + setJoinedCommunities(joinedCommunities.filter(c => c.id !== community.id)); setSuggestedCommunities([...suggestedCommunities, community]); }; From 95e7cd917172fedeee844f8d844265ad19f2fcf4 Mon Sep 17 00:00:00 2001 From: Harshana Chamod Date: Sun, 9 Mar 2025 21:14:42 +0530 Subject: [PATCH 4/8] added a button to show joind and leave status And style changes --- frontend/app/screens/tabs/Community.js | 203 ++++++++++++++++--------- 1 file changed, 132 insertions(+), 71 deletions(-) diff --git a/frontend/app/screens/tabs/Community.js b/frontend/app/screens/tabs/Community.js index fd6fda0..950fa57 100644 --- a/frontend/app/screens/tabs/Community.js +++ b/frontend/app/screens/tabs/Community.js @@ -6,6 +6,7 @@ import { Text, TextInput, ScrollView, + TouchableOpacity, } from "react-native"; import Card from "../../fragments/card"; @@ -60,9 +61,53 @@ export default function Community() { setSuggestedCommunities([...suggestedCommunities, community]); }; + // Recreating card ui to mach the community components. + const communityCard = (item, section) => ( + console.log(item.name + " Card Pressed")} + style={styles.communitycard} + > + + + + + {item.name} + {item.members && {item.members} members} + + + {section !== 'mainCommunity' && ( + { + e.stopPropagation(); + section === 'joinedCommunities' + ? handleLeaveCommunity(item) + : handleJoinCommunity(item); + }}> + + {section === 'joinedCommunities' ? 'Joined' : 'Join'} + + + )} + + + ); return ( - + + + //search bar console.log("Searching for:", text)} /> - Main Community - console.log("Card Pressed")} - style={styles.communitycard} - > - - - ReWire Community - - - Joined Community - {joinedCommunities.map((community, index) => ( - handleLeaveCommunity(community)} - style={styles.communitycard} - > - - - {community.name} - - - ))} - Suggestions - {suggestedCommunities.map((community, index) => ( - handleJoinCommunity(community)} - style={styles.communitycard} - > - - - {community.name} - - - ))} + Main Community + {communityCard(maincommunity[0], 'mainCommunity')} + + Joined Community + {joinedCommunities.map((item) => + communityCard(item, 'joinedCommunities') + )} + + Suggestions + {suggestedCommunities.map((item) => + communityCard(item, 'suggestedCommunities') + )} console.log("Create Community Pressed")} style={styles.CreateCommCard} @@ -137,15 +149,20 @@ export default function Community() { ); } -// Card stylesheet const styles = StyleSheet.create({ - searchContainer: { + container: { + flex: 1, + borderRadius: 20, + backgroundColor: "#ffffff", + }, + searchBar: { flexDirection: "row", alignItems: "center", - backgroundColor: "#D9D9D6", + backgroundColor: "#fff", borderRadius: 30, padding: 10, - marginBottom: 5, + marginBottom: 16, + marginTop: 5, }, searchIcon: { width: 20, @@ -156,51 +173,95 @@ const styles = StyleSheet.create({ flex: 1, fontSize: 16, }, - - titleContainer: { + heading: { + color: "#333", + fontSize: 16, + fontWeight: "500", + paddingLeft: 5, + paddingVertical: 10, + }, + card: { + borderRadius: 15, + marginBottom: 10, + backgroundColor: "#fff", + padding: 12, + shadowColor: "#000", + shadowOffset: { width: 0, height: 1 }, + shadowOpacity: 0.2, + shadowRadius: 2, + elevation: 2, + }, + cardRow: { flexDirection: "row", + justifyContent: "space-between", alignItems: "center", - gap: 30, }, - - communitycard: { - borderRadius: 30, + leftContent: { + flexDirection: "row", + alignItems: "center", + flex: 1, }, - image: { + avatar: { width: 40, height: 40, borderRadius: 40, - borderColor: "green", + borderColor: "#4CAF50", borderWidth: 2, }, - text: { + textBox: { + marginLeft: 15, + }, + members: { color: "grey", - fontSize: 14, - paddingLeft: 5, - paddingBottom: 10, - textAlign: "left", + fontSize: 12, + marginTop: -5, }, - CreateCommCard: { - backgroundColor: "#D9D9D6", - padding: 10, - borderRadius: 45, + button: { + paddingVertical: 6, + paddingHorizontal: 15, + borderRadius: 20, + borderWidth: 1, + }, + + greenButton: { + backgroundColor: "#4CAF50", + borderColor: "#4CAF50", + }, + + greenBorder: { + backgroundColor: "transparent", + borderColor: "#4CAF50", + }, + buttonText: { + fontWeight: "bold", + fontSize: 12, + }, + whiteText: { + color: "#fff", + }, + greenText: { + color: "#4CAF50", + }, + createCard: { + backgroundColor: "#D9D9D6", marginTop: 10, + marginBottom: 20, }, - createCommContainer: { + createContent: { flexDirection: "row", alignItems: "center", justifyContent: "center", padding: 10, }, - CommunityImage: { + createIcon: { width: 50, height: 50, marginRight: 10, }, - commmunityText: { + createText: { color: "green", fontSize: 18, fontWeight: "bold", paddingLeft: 5, }, -}); +}); \ No newline at end of file From d7ae6dcbc31d701256d72fb80fa0bd4ed6c2ee3d Mon Sep 17 00:00:00 2001 From: Harshana Chamod Date: Mon, 10 Mar 2025 11:18:06 +0530 Subject: [PATCH 5/8] done some code changes --- frontend/app/screens/tabs/Community.js | 66 ++++++++++++++++++++------ 1 file changed, 51 insertions(+), 15 deletions(-) diff --git a/frontend/app/screens/tabs/Community.js b/frontend/app/screens/tabs/Community.js index 950fa57..f7ede11 100644 --- a/frontend/app/screens/tabs/Community.js +++ b/frontend/app/screens/tabs/Community.js @@ -9,10 +9,13 @@ import { TouchableOpacity, } from "react-native"; import Card from "../../fragments/card"; +import { useNavigation} from "@react-navigation/native"; // Main community card(ReWire Community) export default function Community() { + const navigation = useNavigation(); + //some dummy data const [maincommunity, setMainCommunity] = useState([ { @@ -50,6 +53,12 @@ export default function Community() { image: require("../../assets/better future.jpeg"), members: 23, }, + { + id: "0005", + name: 'Better Future Together', + image: require("../../assets/better future.jpeg"), + members: 23, + }, ]); const handleJoinCommunity= (community) => { setJoinedCommunities([...joinedCommunities, community]); @@ -105,10 +114,10 @@ export default function Community() { ); return ( - + - //search bar - + {/* Search bar */} + console.log("Searching for:", text)} /> + + {/* Communities */} Main Community {communityCard(maincommunity[0], 'mainCommunity')} @@ -132,18 +143,23 @@ export default function Community() { {suggestedCommunities.map((item) => communityCard(item, 'suggestedCommunities') )} - console.log("Create Community Pressed")} - style={styles.CreateCommCard} + + {/* Create Community card */} + { + console.log("Create Community pressed"); + navigation.navigate("CreateCommunity"); + }} + style={styles.CreateCard} > - + - Create Community + Create Community - + ); @@ -158,11 +174,12 @@ const styles = StyleSheet.create({ searchBar: { flexDirection: "row", alignItems: "center", - backgroundColor: "#fff", - borderRadius: 30, + backgroundColor: "#D9D9D6", + borderRadius: 15, padding: 10, marginBottom: 16, marginTop: 5, + marginVertical: 10, }, searchIcon: { width: 20, @@ -173,7 +190,7 @@ const styles = StyleSheet.create({ flex: 1, fontSize: 16, }, - heading: { + heading: { color: "#333", fontSize: 16, fontWeight: "500", @@ -222,12 +239,10 @@ const styles = StyleSheet.create({ borderRadius: 20, borderWidth: 1, }, - greenButton: { backgroundColor: "#4CAF50", borderColor: "#4CAF50", }, - greenBorder: { backgroundColor: "transparent", borderColor: "#4CAF50", @@ -264,4 +279,25 @@ const styles = StyleSheet.create({ fontWeight: "bold", paddingLeft: 5, }, + scrollContent: { + paddingHorizontal: 16, + }, + communitycard: { + marginBottom: 10, + borderRadius: 15, + padding: 12, + backgroundColor: "#fff", + shadowColor: "#000", + shadowOffset: { width: 0, height: 1 }, + shadowOpacity: 0.2, + shadowRadius: 2, + elevation: 2, + }, + CreateCard: { + backgroundColor: "#f0f0f0", + marginTop: 10, + marginBottom: 20, + borderRadius: 15, + padding: 12, + }, }); \ No newline at end of file From 0bd5e3cd7db6d2b9dd95b7b2be937f0fb2bd6bdd Mon Sep 17 00:00:00 2001 From: Harshana Chamod Date: Sat, 15 Mar 2025 08:53:16 +0530 Subject: [PATCH 6/8] added create community UI --- frontend/app/screens/CommuniteCreate.js | 319 ++++++++++++++++++++++++ frontend/app/screens/tabs/Community.js | 26 +- 2 files changed, 334 insertions(+), 11 deletions(-) create mode 100644 frontend/app/screens/CommuniteCreate.js diff --git a/frontend/app/screens/CommuniteCreate.js b/frontend/app/screens/CommuniteCreate.js new file mode 100644 index 0000000..f1caa04 --- /dev/null +++ b/frontend/app/screens/CommuniteCreate.js @@ -0,0 +1,319 @@ +import react, {useState, useEffect, useRef } from 'react'; +import { View, Text, StyleSheet, ScrollView, Image, TouchableOpacity, TextInput, SafeAreaView, KeyboardAvoidingView, Platform } from 'react-native'; +import { useNavigation } from '@react-navigation/native'; + +const CreateCommunity = () => { + // State management for form inputs + const [communityName, setCommunityName] = useState(''); + const [description, setDescription] = useState(''); + const [selectedIcon, setSelectedIcon] = useState(null); + const [category, setCategory] = useState(''); + + const nameInputRef = useRef(null); + const navigation = useNavigation(); + + useEffect(() => { + setTimeout(() => { + if(nameInputRef.current) { + nameInputRef.current.focus(); + } + },100); + }, []); + // Function to handle icon selection (placeholder for image picking functionality) + const selectIcon = () => { + // This is a placeholder function - in a real app, you would implement + // your specific image picking logic here + + // For demo purposes, we'll set a placeholder image URL + setSelectedIcon('https://via.placeholder.com/100'); + + // In a real implementation, you might want to show an alert that this is a placeholder + alert("Image picker functionality needs to be implemented based on your project setup."); + }; + + // Function to handle form submission and community creation + const handleCreateCommunity = () => { + // Validation checks for required fields + if (!communityName.trim()) { + alert("Please enter a name for your community"); + return; + } + + if (!description.trim()) { + alert("Please enter a description for your community"); + return; + } + + if (!category.trim()) { + alert("Please select a category for your community"); + return; + } + + // Create community object with all form data + const community = { + name: communityName, + description: description, + icon: selectedIcon, + category: category, + createdAt: new Date().toISOString(), + }; + + // Log new community details and navigate back + // In a real app, this would likely save to a database + console.log("Creating community:", community); + alert("Community created successfully!"); + navigation.goBack(); + }; + return ( + + + {/* Header Section with back button and title */} + + navigation.goBack()} style={styles.backButton}> + ← + + Create Community + + + + + {/* Icon Selection Section */} + + + {selectedIcon ? ( + + ) : ( + + Add Icon + + )} + + + + {/* Community Name Input */} + Community Name* + + + {/* Description Input - Multiline text area */} + Description* + + + {/* Category Input */} + Category* + + + {/* Private Community option has been removed */} + + {/* Community Guidelines/Rules Section */} + + Community Guidelines + + • Be respectful and supportive to other members + {"\n"}• No spam or self-promotion + {"\n"}• Keep discussions relevant to the community purpose + + + + + {/* Create Button Section - Footer */} + + + Create Community + + + + + ); +}; + +// Styles definition and component export +const styles = StyleSheet.create({ + // Container and layout styles + container: { + flex: 1, + backgroundColor: "#fff" + }, + keyboardAvoidingView: { + flex: 1 + }, + header: { + height: 60, + borderBottomWidth: 1, + borderBottomColor: "#E0E0E0", + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + paddingHorizontal: 16 + }, + backButton: { + padding: 8, + }, + backButtonText: { + fontSize: 24, + fontWeight: "bold", + }, + headerTitle: { + fontSize: 18, + fontWeight: "bold" + }, + placeholder: { + width: 40, + }, + scrollView: { + flex: 1, + padding: 16 + }, + + // Icon section styles + iconSection: { + alignItems: "center", + marginBottom: 24, + }, + iconPicker: { + width: 100, + height: 100, + borderRadius: 50, + overflow: "hidden", + borderWidth: 2, + borderColor: "#4CAF50", + justifyContent: "center", + alignItems: "center", + }, + iconPreview: { + width: "100%", + height: "100%", + }, + iconPlaceholder: { + backgroundColor: "#F2F2F2", + width: "100%", + height: "100%", + justifyContent: "center", + alignItems: "center", + }, + iconPlaceholderText: { + fontSize: 14, + color: "#4CAF50", + textAlign: "center", + }, + + // Form input styles + inputLabel: { + fontSize: 16, + fontWeight: "600", + marginBottom: 8, + color: "#333", + }, + input: { + borderWidth: 1, + borderColor: "#E0E0E0", + borderRadius: 8, + padding: 12, + fontSize: 16, + marginBottom: 16, + }, + descriptionInput: { + borderWidth: 1, + borderColor: "#E0E0E0", + borderRadius: 8, + padding: 12, + fontSize: 16, + minHeight: 100, + marginBottom: 16, + }, + + // Privacy section styles + privacySection: { + flexDirection: "row", + justifyContent: "space-between", + alignItems: "center", + backgroundColor: "#F8F8F8", + borderRadius: 8, + padding: 16, + marginBottom: 16, + }, + privacyTextContainer: { + flex: 1, + }, + privacyTitle: { + fontSize: 16, + fontWeight: "600", + }, + privacyDescription: { + fontSize: 14, + color: "#666", + marginTop: 4, + }, + + // Rules section styles + rulesSection: { + borderWidth: 1, + borderColor: "#E0E0E0", + borderRadius: 8, + padding: 16, + marginBottom: 32, + }, + rulesTitle: { + fontSize: 16, + fontWeight: "600", + marginBottom: 8, + }, + rulesText: { + fontSize: 14, + lineHeight: 22, + color: "#666", + }, + + // Footer and button styles + footer: { + padding: 16, + borderTopWidth: 1, + borderTopColor: "#E0E0E0", + }, + createButton: { + backgroundColor: "#4CAF50", + borderRadius: 8, + paddingVertical: 14, + alignItems: "center", + }, + createButtonDisabled: { + backgroundColor: "#BDBDBD", + }, + createButtonText: { + color: "white", + fontWeight: "bold", + fontSize: 16, + }, +}); + +export default CreateCommunity; \ No newline at end of file diff --git a/frontend/app/screens/tabs/Community.js b/frontend/app/screens/tabs/Community.js index f7ede11..2040cf8 100644 --- a/frontend/app/screens/tabs/Community.js +++ b/frontend/app/screens/tabs/Community.js @@ -10,20 +10,15 @@ import { } from "react-native"; import Card from "../../fragments/card"; import { useNavigation} from "@react-navigation/native"; +import CommuniteCreate from "../../screens/CommuniteCreate"; + // Main community card(ReWire Community) export default function Community() { + //return ; - const navigation = useNavigation(); - //some dummy data - const [maincommunity, setMainCommunity] = useState([ - { - id: "0000", - name: 'ReWire Community', - image: require("../../assets/rewire-logo.png"), - }, - ]); + const navigation = useNavigation(); const [joinedCommunities, setJoinedCommunities] = useState([ { @@ -60,6 +55,15 @@ export default function Community() { members: 23, }, ]); + const [maincommunity, setMainCommunity] = useState([ + { + id: "0000", + name: 'ReWire Community', + image: require("../../assets/rewire-logo.png"), + members: 200, + }, + ]); + const handleJoinCommunity= (community) => { setJoinedCommunities([...joinedCommunities, community]); setSuggestedCommunities(suggestedCommunities.filter(c => c.id !== community.id)); @@ -169,7 +173,7 @@ const styles = StyleSheet.create({ container: { flex: 1, borderRadius: 20, - backgroundColor: "#ffffff", + }, searchBar: { flexDirection: "row", @@ -294,7 +298,7 @@ const styles = StyleSheet.create({ elevation: 2, }, CreateCard: { - backgroundColor: "#f0f0f0", + backgroundColor: "#D9D9D6", marginTop: 10, marginBottom: 20, borderRadius: 15, From b98b49b089f5824946332159c019fe9a8f002319 Mon Sep 17 00:00:00 2001 From: Harshana-003 Date: Fri, 21 Mar 2025 11:20:57 +0530 Subject: [PATCH 7/8] added a function to handle icon selection. Design changes to create community button. --- frontend/app/screens/CommuniteCreate.js | 37 ++++-- frontend/app/screens/tabs/Community.js | 148 ++++++++++++------------ frontend/package-lock.json | 22 ++++ frontend/package.json | 1 + 4 files changed, 121 insertions(+), 87 deletions(-) diff --git a/frontend/app/screens/CommuniteCreate.js b/frontend/app/screens/CommuniteCreate.js index f1caa04..5d103cf 100644 --- a/frontend/app/screens/CommuniteCreate.js +++ b/frontend/app/screens/CommuniteCreate.js @@ -1,6 +1,7 @@ import react, {useState, useEffect, useRef } from 'react'; import { View, Text, StyleSheet, ScrollView, Image, TouchableOpacity, TextInput, SafeAreaView, KeyboardAvoidingView, Platform } from 'react-native'; import { useNavigation } from '@react-navigation/native'; +import * as ImagePicker from 'expo-image-picker'; const CreateCommunity = () => { // State management for form inputs @@ -19,19 +20,31 @@ const CreateCommunity = () => { } },100); }, []); - // Function to handle icon selection (placeholder for image picking functionality) - const selectIcon = () => { - // This is a placeholder function - in a real app, you would implement - // your specific image picking logic here - - // For demo purposes, we'll set a placeholder image URL - setSelectedIcon('https://via.placeholder.com/100'); - - // In a real implementation, you might want to show an alert that this is a placeholder - alert("Image picker functionality needs to be implemented based on your project setup."); - }; - // Function to handle form submission and community creation + // Function to handle icon selection + const selectIcon = async () => { + // Request permission to access media library + const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync(); + + if (!permissionResult.granted) { + alert("Permission to access media library is required!"); + return; + } + + // Launch the image picker + const pickerResult = await ImagePicker.launchImageLibraryAsync({ + mediaTypes: ImagePicker.MediaTypeOptions.Images, + allowsEditing: true, + aspect: [1, 1], // Square aspect ratio + quality: 1, // High quality + }); + + if (!pickerResult.canceled) { + // Set the selected image URI + setSelectedIcon(pickerResult.assets[0].uri); + } + }; + const handleCreateCommunity = () => { // Validation checks for required fields if (!communityName.trim()) { diff --git a/frontend/app/screens/tabs/Community.js b/frontend/app/screens/tabs/Community.js index 2040cf8..9c9c4ca 100644 --- a/frontend/app/screens/tabs/Community.js +++ b/frontend/app/screens/tabs/Community.js @@ -10,51 +10,50 @@ import { } from "react-native"; import Card from "../../fragments/card"; import { useNavigation} from "@react-navigation/native"; +import AntDesign from '@expo/vector-icons/AntDesign'; import CommuniteCreate from "../../screens/CommuniteCreate"; // Main community card(ReWire Community) export default function Community() { - //return ; + const navigation = useNavigation(); + const [joinedCommunities, setJoinedCommunities] = useState([ + { + id: "0001", + name: 'Braking Habits', + image: require("../../assets/habits.jpeg"), + members: 100, + }, + { + id: "0002", + name: 'Fight For Freedom', + image: require("../../assets/freedom.jpeg"), + members: 67, + }, + ]); + + const [suggestedCommunities, setSuggestedCommunities] = useState([ + { + id: "0003", + name: 'Rise from Darkness', + image: require("../../assets/rise.png"), + members: 45, + }, + { + id: "0004", + name: 'Better Future Together', + image: require("../../assets/better future.jpeg"), + members: 23, + }, + { + id: "0005", + name: 'Better Future Together', + image: require("../../assets/better future.jpeg"), + members: 23, + }, + ]); - const navigation = useNavigation(); - - const [joinedCommunities, setJoinedCommunities] = useState([ - { - id: "0001", - name: 'Braking Habits', - image: require("../../assets/habits.jpeg"), - members: 100, - }, - { - id: "0002", - name: 'Fight For Freedom', - image: require("../../assets/freedom.jpeg"), - members: 67 - }, - ]); - - const [suggestedCommunities, setSuggestedCommunities] = useState([ - { - id: "0003", - name: 'Rise from Darkness', - image: require("../../assets/rise.png"), - members: 45, - }, - { - id: "0004", - name: 'Better Future Together', - image: require("../../assets/better future.jpeg"), - members: 23, - }, - { - id: "0005", - name: 'Better Future Together', - image: require("../../assets/better future.jpeg"), - members: 23, - }, - ]); const [maincommunity, setMainCommunity] = useState([ { id: "0000", @@ -64,7 +63,7 @@ export default function Community() { }, ]); - const handleJoinCommunity= (community) => { + const handleJoinCommunity = (community) => { setJoinedCommunities([...joinedCommunities, community]); setSuggestedCommunities(suggestedCommunities.filter(c => c.id !== community.id)); }; @@ -74,24 +73,24 @@ export default function Community() { setSuggestedCommunities([...suggestedCommunities, community]); }; - // Recreating card ui to mach the community components. const communityCard = (item, section) => ( console.log(item.name + " Card Pressed")} style={styles.communitycard} - > + > - - - {item.name} - {item.members && {item.members} members} + + + {item.name} + {item.members && {item.members} members} + - - {section !== 'mainCommunity' && ( + {section !== 'mainCommunity' && ( { e.stopPropagation(); - section === 'joinedCommunities' + section === 'joinedCommunities' ? handleLeaveCommunity(item) : handleJoinCommunity(item); - }}> - + {section === 'joinedCommunities' ? 'Joined' : 'Join'} - - )} - - - ); + + )} + + + ); + return ( @@ -139,31 +140,28 @@ export default function Community() { {communityCard(maincommunity[0], 'mainCommunity')} Joined Community - {joinedCommunities.map((item) => + {joinedCommunities.map((item) => communityCard(item, 'joinedCommunities') )} Suggestions - {suggestedCommunities.map((item) => + {suggestedCommunities.map((item) => communityCard(item, 'suggestedCommunities') )} - {/* Create Community card */} - { - console.log("Create Community pressed"); - navigation.navigate("CreateCommunity"); - }} + {/* Create Community button as a card */} + { + console.log("Create Community pressed"); + navigation.navigate("CreateCommunity"); + }} style={styles.CreateCard} > - + Create Community - + ); @@ -239,8 +237,8 @@ const styles = StyleSheet.create({ }, button: { paddingVertical: 6, - paddingHorizontal: 15, - borderRadius: 20, + paddingHorizontal: 30, + borderRadius: 15, borderWidth: 1, }, greenButton: { @@ -263,8 +261,8 @@ const styles = StyleSheet.create({ }, createCard: { backgroundColor: "#D9D9D6", - marginTop: 10, - marginBottom: 20, + marginTop: 5, + marginBottom: 10, }, createContent: { flexDirection: "row", diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 21056f1..b93712c 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -17,6 +17,7 @@ "@rneui/base": "^4.0.0-rc.7", "@rneui/themed": "^4.0.0-rc.8", "expo": "~52.0.23", + "expo-image-picker": "^16.0.6", "expo-status-bar": "~2.0.1", "react": "18.3.1", "react-dom": "18.3.1", @@ -5982,6 +5983,27 @@ "react": "*" } }, + "node_modules/expo-image-loader": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/expo-image-loader/-/expo-image-loader-5.0.0.tgz", + "integrity": "sha512-Eg+5FHtyzv3Jjw9dHwu2pWy4xjf8fu3V0Asyy42kO+t/FbvW/vjUixpTjPtgKQLQh+2/9Nk4JjFDV6FwCnF2ZA==", + "license": "MIT", + "peerDependencies": { + "expo": "*" + } + }, + "node_modules/expo-image-picker": { + "version": "16.0.6", + "resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-16.0.6.tgz", + "integrity": "sha512-HN4xZirFjsFDIsWFb12AZh19fRzuvZjj2ll17cGr19VNRP06S/VPQU3Tdccn5vwUzQhOBlLu704CnNm278boiQ==", + "license": "MIT", + "dependencies": { + "expo-image-loader": "~5.0.0" + }, + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-keep-awake": { "version": "14.0.3", "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-14.0.3.tgz", diff --git a/frontend/package.json b/frontend/package.json index 6438063..2c96752 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,6 +18,7 @@ "@rneui/base": "^4.0.0-rc.7", "@rneui/themed": "^4.0.0-rc.8", "expo": "~52.0.23", + "expo-image-picker": "^16.0.6", "expo-status-bar": "~2.0.1", "react": "18.3.1", "react-dom": "18.3.1", From e7486f1200eb9d93956e1e9f64d516dc7c6cc0ad Mon Sep 17 00:00:00 2001 From: Harshana-003 Date: Sat, 22 Mar 2025 21:42:46 +0530 Subject: [PATCH 8/8] change CommunityCreate file name to CreateCommunity.js and add navigsation to create community button --- frontend/App.js | 16 ++++++++++++++-- .../{CommuniteCreate.js => CreateCommunity.js} | 2 +- frontend/app/screens/tabs/Community.js | 5 ++--- 3 files changed, 17 insertions(+), 6 deletions(-) rename frontend/app/screens/{CommuniteCreate.js => CreateCommunity.js} (99%) diff --git a/frontend/App.js b/frontend/App.js index 4e1bd0c..dce42bb 100644 --- a/frontend/App.js +++ b/frontend/App.js @@ -16,11 +16,23 @@ import Login from './app/screens/Login'; import ForgotPassword from './app/screens/ForgotPassword'; import SignupStepOne from './app/screens/signupStepOne'; import SignupStepTwo from './app/screens/signupStepTwo'; - +import CreateCommunity from './app/screens/CreateCommunity'; const Stack = createNativeStackNavigator(); const BottomTab = createBottomTabNavigator(); +const CommunityStack = createNativeStackNavigator(); +const CommunityStackGroup = () => { + return ( + + + + + ); +} const BottomTabGroup = () => { return ( { - + ); } diff --git a/frontend/app/screens/CommuniteCreate.js b/frontend/app/screens/CreateCommunity.js similarity index 99% rename from frontend/app/screens/CommuniteCreate.js rename to frontend/app/screens/CreateCommunity.js index 5d103cf..e1e0180 100644 --- a/frontend/app/screens/CommuniteCreate.js +++ b/frontend/app/screens/CreateCommunity.js @@ -1,4 +1,4 @@ -import react, {useState, useEffect, useRef } from 'react'; +import React, { useState, useEffect, useRef } from 'react'; import { View, Text, StyleSheet, ScrollView, Image, TouchableOpacity, TextInput, SafeAreaView, KeyboardAvoidingView, Platform } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import * as ImagePicker from 'expo-image-picker'; diff --git a/frontend/app/screens/tabs/Community.js b/frontend/app/screens/tabs/Community.js index 9c9c4ca..131bfbc 100644 --- a/frontend/app/screens/tabs/Community.js +++ b/frontend/app/screens/tabs/Community.js @@ -11,11 +11,10 @@ import { import Card from "../../fragments/card"; import { useNavigation} from "@react-navigation/native"; import AntDesign from '@expo/vector-icons/AntDesign'; -import CommuniteCreate from "../../screens/CommuniteCreate"; - // Main community card(ReWire Community) export default function Community() { + const navigation = useNavigation(); const [joinedCommunities, setJoinedCommunities] = useState([ @@ -86,7 +85,7 @@ export default function Community() { style={styles.avatar} /> - {item.name} + {item.name} {item.members && {item.members} members}