Merge pull request #378 from bounswe/3design_mobile

Merge Finalized Version Of Mobile Into main Branch

3Design/mobile/app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "3Design",
     "slug": "3Design",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "orientation": "portrait",
     "icon": "./app/assets/icon.png",
     "userInterfaceStyle": "light",

3Design/mobile/app/components/ObjectViewer.js

@@ -59,14 +59,26 @@ const ObjViewer = ({ objFilePath }) => {
             child.material = new MeshStandardMaterial();
           }
         });
+
         objectRef.current = object;
 
         // Calculate the bounding box and center
         const box = new Box3().setFromObject(object);
-        box.getCenter(centerRef.current);
+        const size = new Vector3();
+        box.getSize(size);  // Get the width, height, and depth
+
+        const maxDimension = Math.max(size.x, size.y, size.z);  // Get the maximum size of the model
+
+        const scaleFactor = 15 / maxDimension;  // Scale down the model to fit within 1 unit
+
+        object.scale.set(scaleFactor, scaleFactor, scaleFactor);
+
+        const scaledBox = new Box3().setFromObject(object);
+        scaledBox.getCenter(centerRef.current);
 
         // Center the object at the origin
         object.position.sub(centerRef.current); // Move the object so its center is at the origin
+
         scene.add(object);
       },
       (xhr) => {

3Design/mobile/app/components/Post.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, StyleSheet, Text} from "react-native";
+import {View, StyleSheet, Text, TouchableOpacity} from "react-native";
 import OBJViewer from '../components/ObjectViewer';
 
 class Post extends Component {
@@ -11,13 +11,32 @@ class Post extends Component {
   }
 
   render() {
-    const { title, content, model, disableScroll } = this.props;
+    const { title, content, model, id, userId, username, navigation, disableScroll , clearFilteredPosts, filterPostsCallback} = this.props;
 
     if(model) {
       return (
         <View style={styles.postContainer}>
+          {username && <Text style={styles.username}>{username}</Text>}
           <View>
-            <Text style={styles.postTitle}>{title}</Text>
+            <TouchableOpacity
+              onPress={() => {
+                console.log("clicked");
+                navigation.navigate('Post', {
+                  postId: id,
+                  title: title,
+                  content: content,
+                  model: model,
+                  username: username,
+                  userId: userId,
+                  filterPostsCallback: filterPostsCallback,
+                });
+                if(clearFilteredPosts) {
+                  clearFilteredPosts();
+                }
+              }
+            }>
+              <Text style={styles.postTitle}>{title}</Text>
+            </TouchableOpacity>
             <Text style={styles.postContent}>{content}</Text>
           </View>
           <View style={styles.modelView}>
@@ -28,8 +47,27 @@ class Post extends Component {
     } else {
       return (
         <View style={styles.postContainer}>
+          {username && <Text style={styles.username}>{username}</Text>}
           <View>
-            <Text style={styles.postTitle}>{title}</Text>
+            <TouchableOpacity
+              onPress={() => {
+                console.log("clicked");
+                navigation.navigate('Post', {
+                  postId: id,
+                  title: title,
+                  content: content,
+                  model: model,
+                  username: username,
+                  userId: userId,
+                  filterPostsCallback: filterPostsCallback,
+                });
+                if(clearFilteredPosts) {
+                  clearFilteredPosts();
+                }
+              }
+              }>
+              <Text style={styles.postTitle}>{title}</Text>
+            </TouchableOpacity>
             <Text style={styles.postContent}>{content}</Text>
           </View>
         </View>
@@ -66,6 +104,13 @@ const styles = StyleSheet.create({
     height: 300,
     backgroundColor: 'white',
   },
+  username: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#555',
+    marginBottom: 5,
+    fontStyle: 'italic',
+  },
 });
 
 export default Post;

3Design/mobile/app/context/CategoryContext.js

@@ -1,13 +1,54 @@
-import React, { createContext, useState } from 'react';
+import React, { createContext, useState, useEffect, useContext } from 'react';
+import axios from 'axios';
+import { AuthContext } from './AuthContext';
 
-export const CategoryContext = createContext();
+export const CategoryContext = createContext({
+  categories: [],
+  loading: true,
+  error: null,
+});
 
-export function CategoryProvider({ children }) {
-  const [category, setCategory] = useState(null);
+export const CategoryProvider = ({ children }) => {
+  const [categories, setCategories] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const { user } = useContext(AuthContext);
+
+  useEffect(() => {
+    if (user?.accessToken) {
+      const fetchCategories = async () => {
+        try {
+          const response = await axios.get(
+            `${process.env.EXPO_PUBLIC_VITE_API_URL}/api/v1/categories`,
+            {
+              headers: {
+                Authorization: `Bearer ${user.accessToken}`,
+                'Content-Type': 'multipart/form-data',
+              },
+            }
+          );
+
+          const transformedCategories = response.data.map((category) => ({
+            label: category.name,
+            value: category.id,
+          }));
+          setCategories(transformedCategories);
+          setLoading(false);
+        } catch (err) {
+          setError('Failed to load categories');
+          setLoading(false);
+        }
+      };
+
+      fetchCategories();
+    }
+  }, [user?.accessToken]);
 
   return (
-    <CategoryContext.Provider value={{ category, setCategory }}>
+    <CategoryContext.Provider value={{ categories, loading, error }}>
       {children}
     </CategoryContext.Provider>
   );
-}
+};
+
+export const useCategories = () => useContext(CategoryContext);

3Design/mobile/app/navigation/StackNavigator.js

@@ -3,6 +3,8 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import LoginScreen from '../screens/LoginScreen';
 import RegisterScreen from '../screens/RegisterScreen';
 import TabNavigator from './TabNavigator';
+import PostScreen from "../screens/PostScreen";
+import LeaderboardScreen from '../screens/LeaderboardScreen';
 
 const Stack = createNativeStackNavigator();
 
@@ -22,7 +24,23 @@ export default function StackNavigator() {
       <Stack.Screen
         name='Home'
         component={TabNavigator}
-        options={{ headerShown: false }}
+        options={{
+          headerShown: false,
+          unmountOnBlur: true,
+        }}
+      />
+      <Stack.Screen
+        name="Post"
+        component={PostScreen}
+        options={{
+          title: 'Post',
+          unmountOnBlur: true,
+        }}
+      />
+      <Stack.Screen
+        name="Leaderboard"
+        component={LeaderboardScreen}
+        options={{ title: 'Leaderboard' }}
       />
     </Stack.Navigator>
   );

3Design/mobile/app/navigation/TabNavigator.js

@@ -106,6 +106,7 @@ export default function TabNavigator({ navigation, route }) {
                 />
               );
             },
+            unmountOnBlur: true,
           }}
         />
       </Tab.Navigator>

3Design/mobile/app/screens/CategoriesScreen.js

@@ -2,17 +2,21 @@ import React from 'react';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import { Colors } from '../constants/Colors';
 import { Categories } from '../constants/Categories';
+import {useNavigation} from "@react-navigation/native";
+import {useCategories} from "../context/CategoryContext";
 
 export default function CategoriesScreen() {
+  const navigation = useNavigation();
+  const { categories, loading, error } = useCategories();
   return (
     <View style={styles.body}>
       <Text style={styles.title}>Select a Category</Text>
       <View style={styles.categoriesContainer}>
-        {Categories.map((category) => (
+        {categories.map((category) => (
           <TouchableOpacity
             key={category.value}
             style={styles.categoryButton}
-            onPress={() => {}}
+            onPress={() => {navigation.navigate('Feed', { category: category})}}
           >
             <Text style={styles.categoryButtonText}>{category.label}</Text>
           </TouchableOpacity>

3Design/mobile/app/screens/CreatePostScreen.js

@@ -16,6 +16,7 @@ import CheckBox from 'expo-checkbox';
 import { Categories } from '../constants/Categories';
 import { Colors } from '../constants/Colors';
 import { AuthContext } from '../context/AuthContext';
+import {useCategories} from "../context/CategoryContext";
 
 const CreatePost = () => {
   const { user } = useContext(AuthContext);
@@ -34,6 +35,8 @@ const CreatePost = () => {
   const [file, setFile] = useState(null);
   const [isVisual, setIsVisual] = useState(false);
 
+  const { categories, loading, error } = useCategories();
+
   const validateInputs = () => {
     if (title.length < 5) {
       Alert.alert(
@@ -151,7 +154,7 @@ const CreatePost = () => {
           <DropDownPicker
             open={open}
             value={category}
-            items={Categories}
+            items={categories}
             setOpen={setOpen}
             setValue={setCategory}
             setItems={() => {}}