Search explore and new group switcher

micahlt · Mar 17, 2024 · d2dd3cf · d2dd3cf
1 parent 1d644a3
commit d2dd3cf
Show file tree

Hide file tree

Showing 17 changed files with 431 additions and 179 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -79,8 +79,8 @@ android {
         applicationId "com.micahlindley.offsides"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 15
-        versionName "0.4.5"
+        versionCode 17
+        versionName "0.4.7"
     }
     signingConfigs {
         debug {

diff --git a/android/app/release/app-release.apk b/android/app/release/app-release.apk
diff --git a/android/app/release/output-metadata.json b/android/app/release/output-metadata.json
@@ -11,8 +11,8 @@
       "type": "SINGLE",
       "filters": [],
       "attributes": [],
-      "versionCode": 15,
-      "versionName": "0.4.5",
+      "versionCode": 17,
+      "versionName": "0.4.7",
       "outputFile": "app-release.apk"
     }
   ],

diff --git a/docs/latest.json b/docs/latest.json
@@ -1,3 +1,3 @@
 {
-  "latestVersion": "0.4.5"
+  "latestVersion": "0.4.7"
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "offsides",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "private": true,
   "scripts": {
     "android": "react-native run-android",
@@ -10,6 +10,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@devvie/bottom-sheet": "^0.3.0",
     "@pchmn/expo-material3-theme": "^1.3.2",
     "@react-native-async-storage/async-storage": "^1.22.3",
     "@react-navigation/native": "^6.1.14",
@@ -31,7 +32,7 @@
     "reanimated-color-picker": "^3.0.3",
     "rn-emoji-keyboard": "^1.6.1",
     "semver": "^7.6.0",
-    "sidechat.js": "^2.2.1",
+    "sidechat.js": "^2.2.3",
     "timesago": "^1.0.1"
   },
   "devDependencies": {

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,7 +1,7 @@
 import 'react-native-gesture-handler';
 import React, { Context } from 'react';
 import { OffsidesAppState } from './types/OffsidesTypes';
-import { StatusBar, useColorScheme } from 'react-native';
+import { InteractionManager, StatusBar, useColorScheme } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import AsyncStorage from '@react-native-async-storage/async-storage';
@@ -35,6 +35,11 @@ export default function App() {
       'groupID',
       'groupName',
       'groupImage',
+      'groupColor',
+      'schoolGroupID',
+      'schoolGroupName',
+      'schoolGroupImage',
+      'schoolGroupColor',
     ]).then(res => {
       let tempState = {};
       // If user token is defined
@@ -51,6 +56,22 @@ export default function App() {
       setAppState(tempState);
     });
   }, []);
+  React.useEffect(() => {
+    InteractionManager.runAfterInteractions(() => {
+      if (!appState.groupName || !appState.groupID) return;
+      AsyncStorage.multiSet([
+        ['groupID', String(appState.groupID)],
+        ['groupName', String(appState.groupName)],
+        ['groupColor', String(appState.groupColor)],
+        ['groupImage', String(appState.groupImage)],
+      ]);
+    });
+  }, [
+    appState.groupName,
+    appState.groupID,
+    appState.groupColor,
+    appState.groupImage,
+  ]);
   return (
     <AppContext.Provider value={{ appState, setAppState }}>
       <NavigationContainer>

diff --git a/src/components/Group.jsx b/src/components/Group.jsx
@@ -1,18 +1,29 @@
 import React from 'react';
 import { View, Image } from 'react-native';
-import { Card, Text, Avatar, Icon, TouchableRipple } from 'react-native-paper';
+import {
+  Card,
+  Text,
+  Avatar,
+  Icon,
+  TouchableRipple,
+  IconButton,
+  useTheme,
+} from 'react-native-paper';
 
 function Group({
   group,
   cardMode = 'contained',
-  onPress,
+  onPress = () => {},
   exploreMode = false,
+  removeMode = false,
+  onRemove = () => {},
 }) {
+  const { colors } = useTheme();
   return (
     <TouchableRipple
       borderless={true}
       onPress={onPress}
-      style={{ borderRadius: 5 }}>
+      style={{ borderRadius: 10 }}>
       <Card mode={cardMode}>
         <Card.Content>
           <View style={{ flexDirection: 'row', alignItems: 'center' }}>
@@ -46,23 +57,42 @@ function Group({
             <Text variant="titleMedium" style={{ flex: 1 }}>
               {group.name}
             </Text>
-            {group.membership_type == 'member' && (
-              <Icon source="check" size={24} />
-            )}
-            <Text style={{ marginRight: 10 }} />
-            {group.group_visibility == 'public_to_all' && (
-              <Icon source="earth" size={24} />
-            )}
-            {group.group_visibility == 'private' && (
-              <Icon source="lock" size={24} />
-            )}
-            {group.group_visibility == 'public_to_schools' && (
-              <Icon source="school" size={24} />
+            {removeMode ? (
+              <IconButton
+                icon="delete"
+                size={24}
+                style={{ height: 30, width: 30 }}
+                onPress={() => onRemove(group.id)}
+                iconColor={colors.error}
+              />
+            ) : (
+              <>
+                {group.membership_type == 'member' && (
+                  <Icon source="check" size={24} />
+                )}
+                <Text style={{ marginRight: 10 }} />
+                {group.group_visibility == 'public_to_all' && (
+                  <Icon source="earth" size={24} />
+                )}
+                {group.group_visibility == 'private' && (
+                  <Icon source="lock" size={24} />
+                )}
+                {group.group_visibility == 'public_to_schools' && (
+                  <Icon source="school" size={24} />
+                )}
+              </>
             )}
           </View>
           {exploreMode && (
             <Text style={{ marginTop: 10, opacity: 0.8 }}>
               {group.description}
+              {group.member_count && (
+                <Text
+                  style={{ marginTop: 10, opacity: 0.8, fontWeight: 'bold' }}>
+                  {group.description && `  |  `}
+                  {group.member_count.toLocaleString()} members
+                </Text>
+              )}
             </Text>
           )}
         </Card.Content>

diff --git a/src/components/GroupAvatar.jsx b/src/components/GroupAvatar.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { Image } from 'react-native';
+import { TouchableRipple, Avatar, useTheme } from 'react-native-paper';
+
+function GroupAvatar({
+  groupName,
+  groupImage,
+  groupColor,
+  onPress = () => {},
+  onLongPress = () => {},
+  borderRadius = 12,
+  style = {},
+}) {
+  const { colors } = useTheme();
+  const ComponentOption = React.useCallback(() => {
+    if (groupName == 'Home') {
+      return (
+        <Avatar.Icon
+          icon="home"
+          size={45}
+          style={{
+            borderRadius: borderRadius,
+            backgroundColor: groupColor || colors.primaryContainer,
+          }}
+        />
+      );
+    } else if (groupImage) {
+      return (
+        <Image
+          style={{
+            height: 45,
+            width: 45,
+            borderRadius: borderRadius,
+          }}
+          source={{ uri: groupImage }}
+        />
+      );
+    } else {
+      return (
+        <Avatar.Text
+          size={45}
+          label={groupName.length < 3 ? groupName : groupName.substring(0, 2)}
+          style={{
+            borderRadius: borderRadius,
+            backgroundColor: groupColor || colors.primaryContainer,
+          }}
+        />
+      );
+    }
+  }, [groupName]);
+  return (
+    <TouchableRipple
+      onPress={onPress}
+      onLongPress={onLongPress}
+      style={{ borderRadius: borderRadius, ...style }}
+      borderless={true}>
+      <ComponentOption />
+    </TouchableRipple>
+  );
+}
+
+export default GroupAvatar;