Allow joining/leaving groups

android/app/build.gradle

@@ -79,8 +79,8 @@ android {
  applicationId "com.micahlindley.offsides"
  minSdkVersion rootProject.ext.minSdkVersion
  targetSdkVersion rootProject.ext.targetSdkVersion
- versionCode 21
- versionName "0.5.4"
+ versionCode 22
+ versionName "0.5.5"
  }
  signingConfigs {
  debug {

android/app/release/output-metadata.json

@@ -11,8 +11,8 @@
  "type": "SINGLE",
  "filters": [],
  "attributes": [],
- "versionCode": 21,
- "versionName": "0.5.4",
+ "versionCode": 22,
+ "versionName": "0.5.5",
  "outputFile": "app-release.apk"
  }
  ],

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -2,4 +2,5 @@
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
  <background android:drawable="@color/ic_launcher_background"/>
  <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+ <monochrome android:drawable="@drawable/ic_launcher_foreground"/>
 </adaptive-icon>

docs/latest.json

@@ -1,3 +1,3 @@
 {
- "latestVersion": "0.5.4"
+ "latestVersion": "0.5.5"
 }

package.json

@@ -1,6 +1,6 @@
 {
  "name": "offsides",
- "version": "0.5.4",
+ "version": "0.5.5",
  "private": true,
  "scripts": {
  "android": "react-native run-android",
@@ -33,7 +33,7 @@
  "reanimated-color-picker": "^3.0.3",
  "rn-emoji-keyboard": "^1.6.1",
  "semver": "^7.6.0",
- "sidechat.js": "^2.3.7",
+ "sidechat.js": "^2.3.8",
  "timesago": "^1.0.1"
  },
  "devDependencies": {

src/components/Group.jsx

@@ -8,6 +8,7 @@ import {
  TouchableRipple,
  IconButton,
  useTheme,
+ Button,
 } from 'react-native-paper';
 import GroupAvatar from './GroupAvatar';
 
@@ -40,13 +41,13 @@ function Group({
  {group.name}
  </Text>
  {removeMode ? (
- <IconButton
- icon="delete"
- size={24}
- style={{ height: 30, width: 30 }}
+ <Button
+ icon="account-minus"
  onPress={() => onRemove(group.id)}
  iconColor={colors.error}
- />
+ mode="outlined">
+ Leave
+ </Button>
  ) : (
  <>
  {group.membership_type == 'member' && (

src/components/GroupPicker.jsx

@@ -5,6 +5,7 @@ import {
  ActivityIndicator,
  Button,
  Card,
+ Chip,
  IconButton,
  Text,
  useTheme,
@@ -18,16 +19,22 @@ function GroupPicker({ sheetRef }) {
  const { appState } = React.useContext(AppContext);
  const API = appState.API;
  const [groups, setGroups] = React.useState(false);
+ const [currentGroup, setCurrentGroup] = React.useState(false);
  const [removeMode, setRemoveMode] = React.useState(false);
  React.useEffect(() => {
  if (API) {
  loadGroups();
+ getCurrentGroup();
  }
  }, [API]);
  const loadGroups = async () => {
  const updates = await API.getUpdates(appState.schoolGroupID);
  setGroups(updates.groups);
  };
+ const getCurrentGroup = async () => {
+ const g = await API.getGroupMetadata(appState.groupID);
+ setCurrentGroup(g);
+ };
  const selectGroup = group => {
  sheetRef?.current?.close();
  nav.navigate('Home', {
@@ -43,9 +50,26 @@ function GroupPicker({ sheetRef }) {
  sheetRef?.current?.close();
  setRemoveMode(false);
  };
+
+ const changeCurrentMembership = async () => {
+ const isCurrentlyMember = currentGroup.membership_type == 'member';
+ const a = await API.setGroupMembership(currentGroup.id, !isCurrentlyMember);
+ await a;
+ setCurrentGroup({
+ ...currentGroup,
+ membership_type: isCurrentlyMember ? 'non_member' : 'member',
+ });
+ };
+
+ const leaveGroup = async id => {
+ const leaveReq = await API.setGroupMembership(id);
+ await leaveReq;
+ setGroups(groups.filter(g => g.id != id));
+ };
+
  return (
  <View>
- {groups ? (
+ {groups && currentGroup ? (
  <ScrollView
  contentContainerStyle={{
  padding: 10,
@@ -71,32 +95,64 @@ function GroupPicker({ sheetRef }) {
  Explore
  </Button>
  </View>
- <Card mode="elevated">
+ <Card mode="elevated" style={{ marginBottom: 7 }}>
  <Card.Title
- title="Notice"
+ title={appState.groupName}
+ right={() => (
+ <View style={{ flexDirection: 'row' }}>
+ {appState.groupName != 'Home' &&
+ appState.groupID != appState.schoolGroupID ? (
+ <Chip
+ icon={
+ currentGroup.membership_type == 'member'
+ ? 'account-remove'
+ : 'plus'
+ }
+ style={{ marginRight: 5 }}
+ onPress={changeCurrentMembership}>
+ {currentGroup.membership_type == 'member'
+ ? 'Leave'
+ : 'Join'}
+ </Chip>
+ ) : (
+ appState.groupID == appState.schoolGroupID && (
+ <Chip
+ icon="school"
+ style={{ marginRight: 5 }}
+ mode="outlined">
+ School
+ </Chip>
+ )
+ )}
+ <Chip style={{ marginRight: 15 }} mode="outlined">
+ Current
+ </Chip>
+ </View>
+ )}
  titleVariant="titleMedium"
  titleStyle={{
  color: colors.primary,
  marginBottom: 0,
  }}
- style={{ paddingBottom: 0, marginBottom: -10 }}
+ style={{ paddingBottom: 0, marginBottom: -2 }}
  />
- <Card.Content>
- <Text>
- In future releases of Offsides, this modal will only appear when
- you long press the group's icon.
- </Text>
- </Card.Content>
+ {currentGroup.description && (
+ <Card.Content style={{ marginTop: -5 }}>
+ <Text>{currentGroup.description}</Text>
+ </Card.Content>
+ )}
  </Card>
- {groups.map(group => (
- <Group
- group={group}
- key={group.id}
- onPress={() => selectGroup(group)}
- removeMode={removeMode}
- onRemove={() => alert('This feature is coming soon!')}
- />
- ))}
+ {groups
+ .filter(g => g.id != currentGroup.id)
+ .map(group => (
+ <Group
+ group={group}
+ key={group.id}
+ onPress={() => selectGroup(group)}
+ removeMode={removeMode}
+ onRemove={() => leaveGroup(group.id)}
+ />
+ ))}
  </ScrollView>
  ) : (
  <ActivityIndicator

src/screens/HomeScreen.jsx

@@ -141,7 +141,6 @@ function HomeScreen({ navigation, route }) {
  groupImage={appState.groupImage}
  groupName={appState.groupName}
  onPress={() => sheetRef.current?.open()}
- onLongPress={() => sheetRef.current?.open()}
  borderRadius={BORDER_RADIUS}
  style={{ marginRight: 15 }}
  />
@@ -257,7 +256,7 @@ function HomeScreen({ navigation, route }) {
  backdropMaskColor={colors.backdrop}
  dragHandleStyle={{ backgroundColor: colors.outline }}
  openDuration={550}
- closeDuration={200}
+ closeDuration={250}
  height="80%"
  style={{
  backgroundColor: colors.surface,

yarn.lock

@@ -8123,10 +8123,10 @@ side-channel@^1.0.4:
  get-intrinsic "^1.2.4"
  object-inspect "^1.13.1"
 
-sidechat.js@^2.3.7:
- version "2.3.7"
- resolved "https://registry.npmjs.org/sidechat.js/-/sidechat.js-2.3.7.tgz"
- integrity sha512-2RlEbZesQ7eOC6LKL5STiIR0TLTuUPY58ZzOB77C4RQYthf8mxXAybA7jgWCnCAS75BKhpN5EDBrxvn7icLRUQ==
+sidechat.js@^2.3.8:
+ version "2.3.8"
+ resolved "https://registry.npmjs.org/sidechat.js/-/sidechat.js-2.3.8.tgz"
+ integrity sha512-yKlxK3fZOyA4RXLdVlmGcXUBRmquKlIXuztjRp85Hu+8oOO3d+Zp71Jm5eTS9nygM1WhcwH+2OsfY3sUQkNh/g==
 
 signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
  version "3.0.7"