Skip to content

Commit

Permalink
Merge pull request #392 from bounswe/mobile/screen-changes
Browse files Browse the repository at this point in the history 
Mobile/screen changes
  • Loading branch information
@ozankaymak
ozankaymak authored Dec 15, 2024
2 parents 71ca797 + cb87620 commit a21bf24
Show file tree
Hide file tree
Showing 12 changed files with 320 additions and 274 deletions.
361 changes: 232 additions & 129 deletions project/Mobile/AnalysisScreen.js
View file

Large diffs are not rendered by default.

78 changes: 25 additions & 53 deletions project/Mobile/ArchiveScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,66 +278,38 @@ const ArchiveScreen = ({ route, navigation }) => {

const renderGameContent = () => {
if (mode === 'master' && selectedGamePGN) {
return (
<View style={styles.masterGameContent}>
<GameSummary
pgn={selectedGamePGN}
onAnalyze={handleAnalyze}
/>
</View>
);
return (
<View style={styles.masterGameContent}>
<GameSummary
pgn={selectedGamePGN}
onAnalyze={handleAnalyze}
/>
</View>
);
}

return (
<View style={styles.gamesListContainer}>
{games.map((item, index) => (
<TouchableOpacity
key={`${item.event}-${item.white}-${item.black}-${index}`}
onPress={() => handleGamePress(item)}
disabled={isLoading}
>
<View style={styles.gameCard}>
<View style={styles.gameHeader}>
<Text style={styles.gameEvent} numberOfLines={1}>{item.event}</Text>
<Text style={styles.gameDate}>
{`${item.year}${item.month ? '.' + item.month : ''}${item.day ? '.' + item.day : ''}`}
</Text>
</View>
<View style={styles.playerInfo}>
<Text style={[styles.playerName, item.result === '1-0' && styles.whiteWin]}>
{item.white}
</Text>
<Text style={styles.vs}>vs</Text>
<Text style={[styles.playerName, item.result === '0-1' && styles.blackWin]}>
{item.black}
</Text>
</View>
<View style={styles.gameFooter}>
<Text style={styles.gameSite} numberOfLines={1}>{item.site}</Text>
<Text style={[
styles.gameResult,
item.result === '1-0' && styles.whiteWin,
item.result === '0-1' && styles.blackWin,
item.result === '1/2-1/2' && styles.draw
]}>
{item.result}
</Text>
</View>
</View>
</TouchableOpacity>
))}
{hasSearched && games.length === 0 && (
<View style={styles.emptyContainer}>
<Text style={styles.emptyText}>No games found</Text>
</View>
)}
</View>
<View style={styles.gamesListContainer}>
{games.map((game, index) => (
<GameCard
key={`${game.event}-${game.white}-${game.black}-${index}`}
game={game}
onPress={handleGamePress}
disabled={isLoading}
/>
))}
{hasSearched && games.length === 0 && (
<View style={styles.emptyContainer}>
<Text style={styles.emptyText}>No games found</Text>
</View>
)}
</View>
);
};
};

return (
<SafeAreaView style={styles.container}>
<ScrollView
<ScrollView
style={styles.scrollContainer}
contentContainerStyle={styles.scrollContent}
showsVerticalScrollIndicator={false}
Expand Down
99 changes: 45 additions & 54 deletions project/Mobile/ProfileScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,13 @@ import { useAuth } from "./contexts/AuthContext";
import { api } from "./services/AuthService";
import PostCard from "./components/PostCard";
import { likeService } from "./services/LikeService";
import { ScrollView } from "react-native-gesture-handler";
import {
BookmarkedPosts,
BookmarkedGames,
BookmarkedMoves,
} from "./components/BookmarkRenderers";
import { bookmarkService } from "./services/BookmarkService";

const TABS = ["Posts", "Likes", "Bookmarks"];

Expand Down Expand Up @@ -93,8 +100,10 @@ const ProfileScreen = ({ navigation }) => {
useEffect(() => {
fetchUserData();
likeService.addLikeChangeListener(fetchUserData);
bookmarkService.addBookmarkChangeListener(fetchUserData);
return () => {
likeService.removeLikeChangeListener(fetchUserData);
bookmarkService.removeBookmarkChangeListener(fetchUserData);
};
}, []);

Expand All @@ -120,7 +129,7 @@ const ProfileScreen = ({ navigation }) => {
setFollowing(response.data.following || []);
setFollowers(response.data.followers || []);
setUserPosts(response.data.posts || []);
setLikedPosts(response.data.post_likes || []); // Store liked posts
setLikedPosts(response.data.post_likes || []);
setBookmarks({
posts: response.data.post_bookmarks || [],
games: response.data.game_bookmarks || [],
Expand Down Expand Up @@ -155,47 +164,13 @@ const ProfileScreen = ({ navigation }) => {
const toggleBookmarkType = (typeId) => {
setSelectedBookmarkTypes((prev) => {
if (prev.includes(typeId)) {
// Don't allow deselecting if it's the last selected type
if (prev.length === 1) return prev;
return prev.filter((id) => id !== typeId);
}
return [...prev, typeId];
});
};

const renderBookmarkItem = (item, type) => {
switch (type) {
case "posts":
const postData = bookmarkedPosts[item.post__id];
return postData ? (
<PostCard post={postData} />
) : (
<View style={styles.loadingBookmarkContainer}>
<ActivityIndicator size="small" color="#007AFF" />
</View>
);
case "games":
return (
<View style={styles.bookmarkItem}>
<Text style={styles.bookmarkTitle}>
{item.game__white} vs {item.game__black}
</Text>
<Text style={styles.bookmarkSubtitle}>{item.game__year}</Text>
</View>
);
case "game_moves":
return (
<View style={styles.bookmarkItem}>
<Text style={styles.bookmarkTitle}>Game ID: {item.game__id}</Text>
<Text style={styles.bookmarkSubtitle}>{item.fen}</Text>
</View>
);
default:
return null;
}
};

// Header Component
const Header = () => (
<View style={styles.header}>
<TouchableOpacity
Expand All @@ -209,7 +184,6 @@ const ProfileScreen = ({ navigation }) => {
</View>
);

// Profile Info Component
const ProfileInfo = () => (
<View style={styles.profileInfo}>
<View style={styles.userInfoContainer}>
Expand Down Expand Up @@ -238,7 +212,6 @@ const ProfileScreen = ({ navigation }) => {
</View>
);

// Tab Strip Component
const TabStrip = () => (
<View style={styles.tabStrip}>
{TABS.map((tab) => (
Expand All @@ -257,7 +230,6 @@ const ProfileScreen = ({ navigation }) => {
</View>
);

// Following Modal Component
const FollowingModal = () => (
<Modal
visible={showFollowingModal}
Expand Down Expand Up @@ -338,7 +310,6 @@ const ProfileScreen = ({ navigation }) => {
</Modal>
);

// Tab Content Component
const TabContent = () => {
if (isLoading) {
return (
Expand Down Expand Up @@ -371,7 +342,6 @@ const ProfileScreen = ({ navigation }) => {
post={{
id: item.post__id,
title: item.post__title,
// Add other post properties as needed
...item,
}}
/>
Expand All @@ -389,17 +359,38 @@ const ProfileScreen = ({ navigation }) => {
selectedTypes={selectedBookmarkTypes}
onToggleType={toggleBookmarkType}
/>
<FlatList
data={selectedBookmarkTypes.flatMap((type) =>
bookmarks[type].map((item) => ({ ...item, type }))
<ScrollView style={styles.bookmarksList}>
{!bookmarks.posts.length &&
!bookmarks.games.length &&
!bookmarks.game_moves.length ? (
<Text style={styles.emptyText}>No bookmarks yet</Text>
) : (
<>
{selectedBookmarkTypes.includes("posts") && (
<BookmarkedPosts
bookmarks={bookmarks.posts}
bookmarkedPosts={bookmarkedPosts}
isLoading={isLoadingBookmarkedPosts}
navigation={navigation}
/>
)}
{selectedBookmarkTypes.includes("games") && (
<BookmarkedGames
bookmarks={bookmarks.games}
isLoading={isLoading}
navigation={navigation}
/>
)}
{selectedBookmarkTypes.includes("game_moves") && (
<BookmarkedMoves
bookmarks={bookmarks.game_moves}
isLoading={isLoading}
navigation={navigation}
/>
)}
</>
)}
keyExtractor={(item, index) => `${item.type}-${index}`}
renderItem={({ item }) => renderBookmarkItem(item, item.type)}
contentContainerStyle={styles.bookmarksList}
ListEmptyComponent={
<Text style={styles.emptyText}>No bookmarks found</Text>
}
/>
</ScrollView>
</View>
);
default:
Expand Down Expand Up @@ -649,15 +640,15 @@ const styles = StyleSheet.create({
justifyContent: "center",
},
loadingBookmarkContainer: {
backgroundColor: 'white',
backgroundColor: "white",
padding: 16,
marginVertical: 8,
borderRadius: 8,
alignItems: 'center',
justifyContent: 'center',
alignItems: "center",
justifyContent: "center",
height: 100,
elevation: 2,
shadowColor: '#000',
shadowColor: "#000",
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.1,
shadowRadius: 4,
Expand Down
15 changes: 8 additions & 7 deletions project/Mobile/ThreadScreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { useAuth } from "@/contexts/AuthContext";
import { api } from "@/services/AuthService";
import { likeService } from "@/services/LikeService";
import PostCommentManagement from "@/components/PostCommentManagement";
import { bookmarkService } from "./services/BookmarkService";

const normalizeFen = (fen) => {
if (!fen) return null;
Expand Down Expand Up @@ -76,7 +77,6 @@ const ThreadScreen = ({ route, navigation }) => {
try {
const response = await api.get("/accounts/me/");
if (response.data?.post_bookmarks) {
// Check if current post is in the bookmarks array
const isCurrentPostBookmarked = response.data.post_bookmarks.some(
(bookmark) => bookmark.post__id === post.id
);
Expand All @@ -92,6 +92,7 @@ const ThreadScreen = ({ route, navigation }) => {
setIsBookmarkLoading(true);
const response = await api.post(`/posts/bookmark/${post.id}/`);
await checkBookmarkStatus();
bookmarkService.notifyBookmarkChange();
} catch (error) {
console.error("Bookmark operation failed:", error.message);
Alert.alert("Error", "Unable to process your bookmark request.");
Expand Down Expand Up @@ -343,11 +344,11 @@ const ThreadScreen = ({ route, navigation }) => {
{isBookmarkLoading ? (
<ActivityIndicator color="#666" size="small" />
) : (
<Ionicons
<Ionicons
name={isBookmarked ? "bookmark" : "bookmark-outline"}
size={24}
color={isBookmarked ? "#007AFF" : "#666"}
/>
/>
)}
</TouchableOpacity>
</View>
Expand Down Expand Up @@ -674,8 +675,8 @@ const styles = StyleSheet.create({
minHeight: 36,
},
likeButtonContainer: {
alignSelf: "flex-start", // Aligns the container to the left
marginTop: 8, // Adds some space above the like button
alignSelf: "flex-start",
marginTop: 8,
},
actionButtonsContainer: {
flexDirection: "row",
Expand All @@ -690,8 +691,8 @@ const styles = StyleSheet.create({
borderWidth: 1,
borderColor: "#E0E0E0",
margin: 4,
height: 40, // Match the height of LikeButton
width: 40, // Make it square
height: 40,
width: 40,
justifyContent: "center",
alignItems: "center",
},
Expand Down
2 changes: 0 additions & 2 deletions project/Mobile/__tests__/screens/CreatePostScreen.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@ describe('CreatePostScreen', () => {
<CreatePostScreen navigation={mockNavigation} />
);

// Open tag modal
fireEvent.press(getByText('Add Tags'));

const tagInput = getByPlaceholderText('Enter tag');
Expand All @@ -56,7 +55,6 @@ describe('CreatePostScreen', () => {

expect(getByText('#chess')).toBeTruthy();

// Remove tag
fireEvent.press(getByText('×'));
expect(() => getByText('#chess')).toThrow();
});
Expand Down
1 change: 0 additions & 1 deletion project/Mobile/app/_layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import 'react-native-reanimated';

import { useColorScheme } from '@/hooks/useColorScheme';

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
Expand Down
2 changes: 0 additions & 2 deletions project/Mobile/components/ExternalLink.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,7 @@ export function ExternalLink({ href, ...rest }: Props) {
href={href}
onPress={async (event) => {
if (Platform.OS !== 'web') {
// Prevent the default behavior of linking to the default browser on native.
event.preventDefault();
// Open the link in an in-app browser.
await openBrowserAsync(href);
}
}}
Expand Down
2 changes: 1 addition & 1 deletion project/Mobile/components/HelloWave.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export function HelloWave() {

rotationAnimation.value = withRepeat(
withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })),
4 // Run the animation 4 times
4
);

const animatedStyle = useAnimatedStyle(() => ({
Expand Down
2 changes: 0 additions & 2 deletions project/Mobile/components/navigation/TabBarIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
// You can explore the built-in icon families and icons on the web at https://icons.expo.fyi/

import Ionicons from '@expo/vector-icons/Ionicons';
import { type IconProps } from '@expo/vector-icons/build/createIconSet';
import { type ComponentProps } from 'react';
Expand Down
Loading

0 comments on commit a21bf24

Please sign in to comment.