Switch to Sidechat.js and add group list to user page

.github/workflows/android-debug.yml

@@ -48,13 +48,13 @@ jobs:
           echo "COMMIT_SHORT_SHA=$calculatedSha" >> $GITHUB_ENV
 
       - name: Rename APK
-        run: mv android/app/build/outputs/apk/release/app-release.apk android/app/build/outputs/apk/release/offsides-nightly-${{ env.COMMIT_SHORT_SHA }}.apk
+        run: mv android/app/build/outputs/apk/release/app-release.apk offsides-nightly-${{ env.COMMIT_SHORT_SHA }}.apk
 
       - name: Create prerelease
         uses: ncipollo/release-action@v1.14.0
         with:
           name: Offsides [NIGHTLY] - ${{ env.COMMIT_SHORT_SHA }}
-          artifacts: android/app/build/outputs/apk/release/offsides-nightly-${{ env.COMMIT_SHORT_SHA }}.apk
+          artifacts: offsides-nightly-${{ env.COMMIT_SHORT_SHA }}.apk
           body: This is a nightly release - do not use if you are not prepared for bugs and glitches.  Instead, try the latest versioned release.  Created from commit ${{ github.sha }}.
           prerelease: true
           allowUpdates: true

android/app/build.gradle

@@ -79,8 +79,8 @@ android {
         applicationId "com.micahlindley.offsides"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 9
-        versionName "0.3.4"
+        versionCode 10
+        versionName "0.3.7"
     }
     signingConfigs {
         debug {

docs/latest.json

@@ -1,3 +1,3 @@
 {
-  "latestVersion": "0.3.4"
+  "latestVersion": "0.3.7"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "offsides",
-  "version": "0.3.4",
+  "version": "0.3.7",
   "private": true,
   "scripts": {
     "android": "react-native run-android",
@@ -29,6 +29,7 @@
     "react-native-storage": "^1.0.1",
     "react-native-vector-icons": "^10.0.3",
     "semver": "^7.6.0",
+    "sidechat.js": "^2.1.0",
     "timesago": "^1.0.1"
   },
   "devDependencies": {

src/App.jsx

@@ -1,31 +1,43 @@
 import 'react-native-gesture-handler';
-import React from 'react';
+import React, { Context } from 'react';
+import { OffsidesAppState } from './types/OffsidesTypes';
 import { 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';
+import { SidechatAPIClient } from 'sidechat.js';
 import HomeScreen from './screens/HomeScreen';
 import SettingsScreen from './screens/SettingsScreen';
 import LoginScreen from './screens/LoginScreen';
 import MyProfileScreen from './screens/MyProfileScreen';
 import CommentModal from './components/CommentModal';
+import GroupsScreen from './screens/GroupsScreen';
 
 const Stack = createNativeStackNavigator();
 
+/**
+ * Global app context for Offsides.  Contains API as well as current app state.
+ * @type {Context<OffsidesAppState>}
+ */
 const AppContext = React.createContext();
 
 export default function App() {
   const colorScheme = useColorScheme();
   const [needsLogin, setNeedsLogin] = React.useState(null);
   const [appState, setAppState] = React.useState({});
+
   React.useEffect(() => {
     AsyncStorage.multiGet(['userToken', 'userID', 'groupID', 'groupName']).then(
       res => {
-        let tempState = appState;
+        let tempState = {};
         // If user token is defined
         if (res[0][1]) {
+          tempState.API = new SidechatAPIClient(res[0][1]);
           setNeedsLogin(false);
-        } else setNeedsLogin(true);
+        } else {
+          tempState.API = new SidechatAPIClient();
+          setNeedsLogin(true);
+        }
         res.forEach(item => {
           tempState[item[0]] = item[1];
         });
@@ -47,6 +59,7 @@ export default function App() {
             <Stack.Screen name="Login" component={LoginScreen} />
             <Stack.Screen name="Settings" component={SettingsScreen} />
             <Stack.Screen name="MyProfile" component={MyProfileScreen} />
+            <Stack.Screen name="Groups" component={GroupsScreen} />
             <Stack.Screen
               name="Comments"
               component={CommentModal}

src/components/Comment.jsx

@@ -1,31 +1,35 @@
+import '../types/OffsidesTypes.js';
 import React from 'react';
 import { View } from 'react-native';
 import { Avatar, Card, IconButton, Text, useTheme } from 'react-native-paper';
 import timesago from 'timesago';
 import { AppContext } from '../App';
-import * as API from '../utils/sidechatAPI';
 import AutoImage from './AutoImage';
 
 const BORDER_RADIUS = 10;
 
+/**
+ * @param {{ comment: SidechatPostOrComment }} props
+ * @returns
+ */
 function Comment({ comment, nav }) {
-  const appState = React.useContext(AppContext);
+  const { API } = React.useContext(AppContext);
   const { colors } = useTheme();
   const [vote, setVote] = React.useState(comment.vote_status);
   const [voteCount, setVoteCount] = React.useState(comment.vote_total);
   const [width, setWidth] = React.useState();
 
   const upvote = () => {
     const action = vote == 'upvote' ? 'none' : 'upvote';
-    API.setVote(comment.id, appState.userToken, action).then(res => {
+    API.setVote(comment.id, action).then(res => {
       setVote(action);
       setVoteCount(res.post.vote_total);
     });
   };
 
   const downvote = () => {
     const action = vote == 'downvote' ? 'none' : 'downvote';
-    API.setVote(comment.id, appState.userToken, action).then(res => {
+    API.setVote(comment.id, action).then(res => {
       setVote(action);
       setVoteCount(res.post.vote_total);
     });
@@ -95,7 +99,7 @@ function Comment({ comment, nav }) {
             <AutoImage
               src={comment.assets[0].url}
               fitWidth={width - 35}
-              token={appState.userToken}
+              token={API.userToken}
               style={comment.text.trim().length < 1 ? { marginTop: 10 } : {}}
             />
           )}

src/components/CommentModal.jsx

@@ -8,15 +8,17 @@ import {
 } from 'react-native';
 import { Appbar, useTheme, Text, Divider } from 'react-native-paper';
 import { AppContext } from '../App';
-import * as API from '../utils/sidechatAPI';
 import Comment from './Comment';
 import Post from './Post';
 
 function CommentModal({ navigation, route }) {
+  /** @type {{postID: String, postObj: SidechatPostOrComment}} */
   const { postID, postObj } = route.params;
-  const appState = React.useContext(AppContext);
+  const { API } = React.useContext(AppContext);
   const { colors } = useTheme();
-  const [comments, setComments] = React.useState([]);
+  const [comments, setComments] = React.useState(
+    /** @type {SidechatPostOrComment[]} */ ([]),
+  );
   const [loadingComments, setLoadingComments] = React.useState(true);
 
   useEffect(() => {
@@ -30,7 +32,7 @@ function CommentModal({ navigation, route }) {
   );
   const fetchComments = () => {
     setLoadingComments(true);
-    API.getPostComments(postID, appState.userToken).then(res => {
+    API.getPostComments(postID).then(res => {
       setComments(res);
       setLoadingComments(false);
     });

src/components/Post.jsx

@@ -1,31 +1,30 @@
 import React from 'react';
-import { Image, View } from 'react-native';
+import { View } from 'react-native';
 import { Avatar, Card, IconButton, Text, useTheme } from 'react-native-paper';
 import timesago from 'timesago';
 import { AppContext } from '../App';
-import * as API from '../utils/sidechatAPI';
 import AutoImage from './AutoImage';
 
 const BORDER_RADIUS = 12;
 
 function Post({ post, nav, commentView = false }) {
-  const appState = React.useContext(AppContext);
+  const { API } = React.useContext(AppContext);
   const { colors } = useTheme();
   const [vote, setVote] = React.useState(post.vote_status);
   const [voteCount, setVoteCount] = React.useState(post.vote_total);
   const [width, setWidth] = React.useState();
 
   const upvote = () => {
     const action = vote == 'upvote' ? 'none' : 'upvote';
-    API.setVote(post.id, appState.userToken, action).then(res => {
+    API.setVote(post.id, action).then(res => {
       setVote(action);
       setVoteCount(res.post.vote_total);
     });
   };
 
   const downvote = () => {
     const action = vote == 'downvote' ? 'none' : 'downvote';
-    API.setVote(post.id, appState.userToken, action).then(res => {
+    API.setVote(post.id, action).then(res => {
       setVote(action);
       setVoteCount(res.post.vote_total);
     });
@@ -72,7 +71,7 @@ function Post({ post, nav, commentView = false }) {
           <AutoImage
             src={post.assets[0].url}
             fitWidth={width - 35}
-            token={appState.userToken}
+            token={API.userToken}
             style={
               post.text.trim().length < 1
                 ? { marginTop: 10, marginBottom: 10 }