fix elements desync with query params, remove unused assets (#1991)

Author: Simek

app.json

@@ -2,12 +2,11 @@
   "expo": {
     "name": "React Native Directory",
     "slug": "react-native-directory",
-    "privacy": "public",
     "platforms": [
       "web"
     ],
     "version": "1.0.0",
-    "icon": "./assets/icon.png",
+    "icon": "./assets/logo.png",
     "updates": {
       "fallbackToCacheTimeout": 0
     },

assets/icon.png

@@ -23,6 +23,7 @@ const Search = ({ query, total }: Props) => {
   const { search, order, direction, offset, ...filterParams } = query;
   const [isInputFocused, setInputFocused] = useState(false);
   const [isFilterVisible, setFilterVisible] = useState(Object.keys(filterParams).length > 0);
+
   const isApple = useMemo<boolean>(() => isAppleDevice(), []);
   const inputRef = useRef<TextInput>(null);
 
@@ -43,12 +44,18 @@ const Search = ({ query, total }: Props) => {
     }
   }, [isApple]);
 
+  useEffect(() => {
+    if (inputRef?.current && !search) {
+      inputRef.current.clear();
+    }
+  }, [search]);
+
   const typingCallback = useDebouncedCallback((text: string) => {
     void replace(urlWithQuery('/', { ...query, search: text, offset: null }));
   }, 200);
 
   function handleClearAllPress() {
-    void replace(urlWithQuery('/', { search: query.search, offset: undefined }));
+    void replace(urlWithQuery('/', { search, offset: undefined }));
   }
 
   return (

assets/share-bg.png

@@ -1,6 +1,6 @@
 import { Picker } from '@react-native-picker/picker';
 import { useRouter } from 'next/router';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useState } from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
 
 import { colors, darkColors, P } from '~/common/styleguide';
@@ -15,75 +15,23 @@ type SortButtonProps = {
   query: Query;
 };
 
-const sorts: { param: QueryOrder; label: string }[] = [
-  {
-    param: 'relevance',
-    label: 'Relevance',
-  },
-  {
-    param: 'updated',
-    label: 'Last Updated',
-  },
-  {
-    param: 'added',
-    label: 'Recently Added',
-  },
-  {
-    param: 'released',
-    label: 'Recently Released',
-  },
-  {
-    param: 'quality',
-    label: 'Quality',
-  },
-  {
-    param: 'popularity',
-    label: 'Popularity Gain',
-  },
-  {
-    param: 'downloads',
-    label: 'Downloads',
-  },
-  {
-    param: 'stars',
-    label: 'Stars',
-  },
-  {
-    param: 'issues',
-    label: 'Issues',
-  },
-  {
-    param: 'dependencies',
-    label: 'Dependencies',
-  },
-  {
-    param: 'size',
-    label: 'Bundle Size',
-  },
-];
-
-export const SortButton = ({ query: { order, direction, offset }, query }: SortButtonProps) => {
-  const [sortValue, setSortValue] = useState<QueryOrder | undefined>(order);
-  const [sortDirection, setSortDirection] = useState<QueryOrderDirection | undefined>(direction);
-  const [paginationOffset, setPaginationOffset] = useState<string | null | undefined>(
-    typeof offset === 'string' ? offset : offset
-  );
+export const SortButton = ({
+  query: { order, direction, offset, search },
+  query,
+}: SortButtonProps) => {
   const [isSortIconHovered, setIsSortIconHovered] = useState(false);
 
-  const { pathname, push } = useRouter();
+  const { asPath, push } = useRouter();
   const { isDark } = useContext(CustomAppearanceContext);
 
-  useEffect(() => {
-    const url = urlWithQuery('/', {
-      ...query,
-      order: sortValue,
-      direction: sortDirection,
-      offset: paginationOffset,
-    });
-    if (url !== pathname) {
+  const currentSortValue: QueryOrder | undefined = order;
+  const currentDirection: QueryOrderDirection | undefined = direction;
+
+  function updatePath(url: string) {
+    if (url !== asPath) {
       void push(url);
     }
-  }, [sortValue, sortDirection, paginationOffset]);
+  }
 
   return (
     <View
@@ -99,16 +47,16 @@ export const SortButton = ({ query: { order, direction, offset }, query }: SortB
             <Pressable
               onHoverIn={() => setIsSortIconHovered(true)}
               onHoverOut={() => setIsSortIconHovered(false)}
-              style={sortDirection === 'ascending' && styles.flippedIcon}
+              style={currentDirection === 'ascending' && styles.flippedIcon}
               aria-label="Toggle sort direction"
               role="button"
               onPress={() => {
-                setSortDirection(previousOrder =>
-                  previousOrder === 'ascending' ? 'descending' : 'ascending'
+                updatePath(
+                  urlWithQuery('/', {
+                    ...query,
+                    direction: currentDirection === 'ascending' ? 'descending' : 'ascending',
+                  })
                 );
-                if (!sortValue) {
-                  setSortValue('relevance');
-                }
               }}>
               <SortIcon fill={isSortIconHovered ? colors.primary : colors.white} />
             </Pressable>
@@ -121,18 +69,23 @@ export const SortButton = ({ query: { order, direction, offset }, query }: SortB
         <Picker
           id="sort-order"
           aria-label="Sort order"
-          selectedValue={sortValue}
+          selectedValue={currentSortValue ?? (search ? 'relevance' : 'updated')}
           style={[
             styles.picker,
             {
               backgroundColor: isDark ? darkColors.border : 'transparent',
             },
           ]}
           onValueChange={value => {
-            setPaginationOffset(null);
-            setSortValue(value);
+            updatePath(
+              urlWithQuery('/', {
+                ...query,
+                order: value,
+                offset: null,
+              })
+            );
           }}>
-          {sorts.map(sort => (
+          {SORTS.map(sort => (
             <Picker.Item
               key={sort.param}
               value={sort.param}
@@ -146,6 +99,53 @@ export const SortButton = ({ query: { order, direction, offset }, query }: SortB
   );
 };
 
+const SORTS: { param: QueryOrder; label: string }[] = [
+  {
+    param: 'relevance',
+    label: 'Relevance',
+  },
+  {
+    param: 'updated',
+    label: 'Last Updated',
+  },
+  {
+    param: 'added',
+    label: 'Recently Added',
+  },
+  {
+    param: 'released',
+    label: 'Recently Released',
+  },
+  {
+    param: 'quality',
+    label: 'Quality',
+  },
+  {
+    param: 'popularity',
+    label: 'Popularity Gain',
+  },
+  {
+    param: 'downloads',
+    label: 'Downloads',
+  },
+  {
+    param: 'stars',
+    label: 'Stars',
+  },
+  {
+    param: 'issues',
+    label: 'Issues',
+  },
+  {
+    param: 'dependencies',
+    label: 'Dependencies',
+  },
+  {
+    param: 'size',
+    label: 'Bundle Size',
+  },
+];
+
 const styles = StyleSheet.create({
   container: {
     backgroundColor: colors.gray5,