Merge pull request #10 from lennertsoffers/documenting

Documenting code done

app.json

@@ -1,4 +1,4 @@
 {
-  "name": "pokemon_city_stats",
-  "displayName": "pokemon_city_stats"
-}
+    "name": "pokemon_city_stats",
+    "displayName": "Pokemon City Statistics"
+}

package.json

@@ -17,10 +17,8 @@
         "@rneui/base": "^4.0.0-rc.6",
         "@rneui/themed": "^4.0.0-rc.6",
         "axios": "^0.27.2",
-        "lottie-react-native": "^5.1.4",
         "react": "18.1.0",
         "react-native": "0.70.3",
-        "react-native-animated-pull-to-refresh": "^1.0.3",
         "react-native-element-dropdown": "^2.3.1",
         "react-native-fast-image": "^8.6.3",
         "react-native-gesture-handler": "^2.8.0",
@@ -29,8 +27,7 @@
         "react-native-root-toast": "^3.4.0",
         "react-native-safe-area-context": "^4.4.1",
         "react-native-screens": "^3.18.2",
-        "react-native-vector-icons": "^9.2.0",
-        "rn-sprite-sheet": "^1.1.12"
+        "react-native-vector-icons": "^9.2.0"
     },
     "devDependencies": {
         "@babel/core": "^7.12.9",

src/components/users/UserRanking.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from "react";
-import { ScrollView, StyleSheet, Text, View } from "react-native";
+import { ScrollView } from "react-native";
 import { RefreshControl } from "react-native-gesture-handler";
 import UserService from "../../api/UserService";
 import { UserContext } from "../../context/Context";

src/context/AuthContextProvider.tsx

@@ -2,7 +2,15 @@ import React, { createContext, ReactElement, useState } from "react";
 import AuthContextType from "../types/context/AuthContextType";
 import { AuthContext } from "./Context";
 
+/**
+ * Component that wraps its children in the provider for the authContext
+ * All children can now user the useContext hook to access the auth state
+ * They also get access to the setLoggedIn method that sets if the user is logged in or not
+ */
 const AuthContextProvider = ({ children }: { children: JSX.Element[] | JSX.Element }) => {
+    // Holds the actual context object
+    // LoggedIn is true if the user is logged in
+    // setLoggedIn calls the setter of the state where the context is stored, so updates the context
     const getAuthContextValue = (): AuthContextType => {
         return {
             loggedIn: false,
@@ -15,6 +23,11 @@ const AuthContextProvider = ({ children }: { children: JSX.Element[] | JSX.Eleme
         };
     };
 
+    // State that holds the authContext
+    // Placing this in a state triggers a re-render on every change
+    // This state will be the same as the global context
+    // => Context makes the state global
+    // => State triggers the re-render on change
     const [authContextValue, setAuthContextValue] = useState<AuthContextType>(getAuthContextValue());
 
     return <AuthContext.Provider value={authContextValue}>{children}</AuthContext.Provider>;

src/routes/Navigator.tsx

@@ -19,17 +19,30 @@ const SearchUserStack = createNativeStackNavigator();
 const AccountStack = createNativeStackNavigator();
 const Tab = createBottomTabNavigator();
 
+/**
+ * Main application component holding all the different screens
+ * It shows the correct stack depending on the state of the application:
+ * - Loading: If the app is still checking the auth state
+ * - Login: If the user is not logged in
+ * - Tabs: If the user is logged in
+ *   -> Each tab consists of a stack navigator
+ */
 const Navigator = () => {
     const [loading, setLoading] = useState(true);
     const authContext = useContext(AuthContext);
 
+    // Checks if the user is authenticated and sets the global state for it
     useEffect(() => {
         AuthService.isAuthenticated().then(authenticated => {
+            console.log(authenticated);
             authContext.setLoggedIn(authenticated);
             setLoading(false);
         });
     }, []);
 
+    /**
+     * Creates the correct stack for the current state of the application
+     */
     const buildNavigator = () => {
         if (loading) {
             return (

src/screens/AccountScreen.tsx

@@ -1,8 +1,10 @@
-import { Text } from "@rneui/base";
 import React from "react";
 import ScreenContent from "../components/content/ScreenContent";
 import Account from "../components/users/Account";
 
+/**
+ * Screen holding the account information
+ */
 const AccountScreen = () => {
     return (
         <ScreenContent title="Account">

src/screens/CityPreviewScreen.tsx

@@ -2,6 +2,9 @@ import React from "react";
 import World from "../components/cityPreview/World";
 import ScreenContent from "../components/content/ScreenContent";
 
+/**
+ * Screen showing the preview of a city of the selected user
+ */
 const CityPreviewScreen = ({ route }: any) => {
     const userId: Readonly<number> = route.params;
 

src/screens/LeaderboardScreen.tsx

@@ -1,9 +1,10 @@
-import { Text } from "@rneui/base";
 import React from "react";
-import { View } from "react-native";
 import ScreenContent from "../components/content/ScreenContent";
 import UserRanking from "../components/users/UserRanking";
 
+/**
+ * Screen showing the ranking of the users
+ */
 const LeaderboardScreen = () => {
     return (
         <ScreenContent>

src/screens/LoadingScreen.tsx

@@ -1,8 +1,10 @@
-import { Text } from "@rneui/base";
 import React from "react";
 import { View } from "react-native";
 import LoadingAnimation from "../components/LoadingAnimation";
 
+/**
+ * Screen showing the loading animation
+ */
 const LoadingScreen = () => {
     return (
         <View>

src/screens/LoginScreen.tsx

@@ -1,29 +1,44 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useState } from "react";
 import { NativeSyntheticEvent, Pressable, StyleSheet, TextInput, TextInputChangeEventData, TextInputComponent, View } from "react-native";
 import { Text } from "@rneui/base";
 import { Immersive } from "react-native-immersive";
 import LoginScreenStyle from "../styles/screens/LoginScreenStyle";
 import AuthService from "../api/AuthService";
 import { AuthContext } from "../context/Context";
 
+/**
+ * Screen showing the login form and handling login actions
+ */
 const LoginScreen = () => {
     const authContext = useContext(AuthContext);
     const [username, setUsername] = useState<string>("");
     const [password, setPassword] = useState<string>("");
 
+    /**
+     * Updates the username state if the value of the input field changes
+     */
     const handleUsernameChange = (event: NativeSyntheticEvent<TextInputChangeEventData>) => {
         setUsername(event.nativeEvent.text);
     };
 
+    /**
+     * Updates the password state if the value of the input field changes
+     */
     const handlePasswordChange = (event: NativeSyntheticEvent<TextInputChangeEventData>) => {
         setPassword(event.nativeEvent.text);
     };
 
+    /**
+     * Handles clicking the login button by calling the userservice to login
+     */
     const handleLoginClick = async () => {
         const loggedIn = await AuthService.login(username, password);
         authContext.setLoggedIn(loggedIn);
     };
 
+    /**
+     * Handles unfocussing the input field by going back into fullscreen mode
+     */
     const handleInputBlur = () => {
         Immersive.setImmersive(true);
     };

src/screens/SearchUserScreen.tsx

@@ -1,11 +1,14 @@
-import { Tab, TabView, Text } from "@rneui/base";
+import { TabView, Text } from "@rneui/base";
 import React, { useState } from "react";
 import { View, Pressable } from "react-native";
 import ScreenContent from "../components/content/ScreenContent";
 import SearchUserByNumericForm from "../components/form/SearchUserByNumericForm";
 import SearchUserByUsernameForm from "../components/form/SearchUserByUsernameForm";
 import SearchUserScreenStyle from "../styles/screens/SearchUserScreenStyle";
 
+/**
+ * Screen holding the two forms to search users
+ */
 const SearchUserScreen = () => {
     const [tabIndex, setTabIndex] = useState(0);
 

src/screens/UserDetailsScreen.tsx

@@ -1,4 +1,4 @@
-import { Route, useNavigation } from "@react-navigation/native";
+import { useNavigation } from "@react-navigation/native";
 import { NativeStackScreenProps } from "@react-navigation/native-stack";
 import { Text } from "@rneui/base";
 import React from "react";
@@ -9,6 +9,9 @@ import UserData from "../types/model/UserData";
 import StringUtils from "../utils/StringUtils";
 import Icon from "react-native-vector-icons/FontAwesome5";
 
+/**
+ * Screen showing the details of a certain user which information is passed via the route param
+ */
 const UserDetailsScreen = ({ route }: NativeStackScreenProps<any>) => {
     const userData: Readonly<UserData> | undefined = route.params;
     const navigator = useNavigation();
@@ -21,6 +24,9 @@ const UserDetailsScreen = ({ route }: NativeStackScreenProps<any>) => {
         );
     }
 
+    /**
+     * Handles pressing the view city button by navigation to the city preview screen
+     */
     const handleViewCityPress = () => {
         navigator.navigate("CityPreview" as never, userData.id as never);
     };

src/utils/SpritesheetUtils.ts

@@ -3,6 +3,7 @@ import SpritesheetConfig from "../config/SpritesheetConfig";
 import SpritesheetDimension from "../types/model/SpritesheetDimensions";
 import SpritesheetLocation from "../types/model/SpritesheetLocation";
 
+/** Module containing util functions concerning spritesheets */
 const SpritesheetUtils = (() => {
     /**
      * Calculates the dimensions of the object on the spriteshee given the first and last tile index