Merge pull request #301 from leonyjiang/tma690-randomize-sp-order

[TMA-690] Randomize Suggested People Ordering

2 files changed, 18 insertions, 5 deletions

diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 61adc171..4094b0a3 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -8,7 +8,6 @@ import {
   ViewToken,
 } from 'react-native';
 
-import Animated from 'react-native-reanimated';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {TabsGradient, TaggLoadingIndicator, Background} from '../../components';
 import {SP_PAGE_SIZE} from '../../constants';
@@ -39,7 +38,6 @@ import SPBody from './SPBody';
  */
 
 const SuggestedPeopleScreen: React.FC = () => {
-  const y = Animated.useValue(0);
   const navigation = useNavigation();
   const state: RootState = useStore().getState();
   const dispatch = useDispatch();
@@ -65,6 +63,13 @@ const SuggestedPeopleScreen: React.FC = () => {
     people.length ? setLoading(false) : setLoading(true);
   }, [people]);
 
+  /*
+   * The randomly-generated seed used by the API to order the suggested people.
+   */
+  const [randomizationSeed, setRandomizationSeed] = useState<number>(
+    Math.random(),
+  );
+
   const stausBarRef = useRef(hideStatusBar);
 
   // loads data and append it to users based on current page
@@ -106,6 +111,7 @@ const SuggestedPeopleScreen: React.FC = () => {
       await getSuggestedPeople(
         SP_PAGE_SIZE,
         shouldResetData ? 0 : page * SP_PAGE_SIZE,
+        randomizationSeed,
       );
 
     loadNextPage().then((newUsers) => {
@@ -131,15 +137,18 @@ const SuggestedPeopleScreen: React.FC = () => {
     await Promise.all(users.map((user) => loadUserData(user)));
   };
 
+  // TODO: only reload data, don't reset screen type, which causes the entire
+  // screen to re-render and makes for bad UX
   const onRefresh = () => {
     const reset = async () => {
-      await dispatch(resetScreenType(screenType));
+      dispatch(resetScreenType(screenType));
       setShouldResetData(true);
     };
     setRefreshing(true);
     reset().then(() => {
       setRefreshing(false);
     });
+    setRandomizationSeed(Math.random());
   };
 
   useFocusEffect(
diff --git a/src/services/SuggestedPeopleService.ts b/src/services/SuggestedPeopleService.ts
index e51914b0..4f56feb9 100644
--- a/src/services/SuggestedPeopleService.ts
+++ b/src/services/SuggestedPeopleService.ts
@@ -63,10 +63,14 @@ export const sendSuggestedPeoplePhoto = async (photoUri: string) => {
   }
 };
 
-export const getSuggestedPeople = async (limit: number, offset: number) => {
+export const getSuggestedPeople = async (
+  limit: number,
+  offset: number,
+  seed: number,
+) => {
   try {
     const token = await AsyncStorage.getItem('token');
-    const url = `${SP_USERS_ENDPOINT}?limit=${limit}&offset=${offset}`;
+    const url = `${SP_USERS_ENDPOINT}?limit=${limit}&offset=${offset}&seed=${seed}`;
     const response = await fetch(url, {
       method: 'GET',
       headers: {