From f0c11bd72b9f8bf9ec968640428b720c90e7af76 Mon Sep 17 00:00:00 2001
From: Rexogamer <beartechtalks@gmail.com>
Date: Sat, 21 Sep 2024 07:19:49 +0100
Subject: [PATCH] feat(discover): show server icons/tags + design improvements

---
 src/pages/discover/DiscoverPage.tsx | 67 +++++++++++++++++++++++++----
 1 file changed, 58 insertions(+), 9 deletions(-)

diff --git a/src/pages/discover/DiscoverPage.tsx b/src/pages/discover/DiscoverPage.tsx
index 0ab1426..310440e 100644
--- a/src/pages/discover/DiscoverPage.tsx
+++ b/src/pages/discover/DiscoverPage.tsx
@@ -6,7 +6,7 @@ import {DOMParser} from '@xmldom/xmldom';
 
 import {app, client} from '@rvmob/Generic';
 import {currentTheme, styles} from '@rvmob/Theme';
-import {Button, Text} from '@rvmob/components/common/atoms';
+import {Button, GeneralAvatar, Text} from '@rvmob/components/common/atoms';
 import {ChannelHeader} from '@rvmob/components/navigation/ChannelHeader';
 import {SpecialChannelIcon} from '@rvmob/components/navigation/SpecialChannelIcon';
 
@@ -20,19 +20,60 @@ const parser = new DOMParser({
 
 const renderServers = (servers: any) => {
   return servers.map((server: any) => {
-    console.log(server);
+    // console.log(server);
     return (
       <View
         key={`discover-entry-${server._id}`}
         style={{
           marginBottom: 8,
           borderRadius: 8,
-          padding: 8,
+          padding: 16,
           backgroundColor: currentTheme.backgroundSecondary,
         }}>
-        <Text type={'h1'}>{server.name}</Text>
-        <Text colour={currentTheme.foregroundSecondary}>{server._id}</Text>
+        <View
+          style={{
+            alignItems: 'center',
+            flexDirection: 'row',
+          }}>
+          {server.icon ? (
+            <View style={{marginEnd: 8}}>
+              <GeneralAvatar
+                attachment={server.icon._id}
+                size={40}
+                directory={'/icons/'}
+              />
+            </View>
+          ) : null}
+          <View>
+            <Text type={'h1'}>{server.name}</Text>
+            <Text colour={currentTheme.foregroundSecondary}>{server._id}</Text>
+          </View>
+        </View>
+        <View
+          key={`discover-entry-${server._id}-tags`}
+          style={{
+            rowGap: 4,
+            flexWrap: 'wrap',
+            flexDirection: 'row',
+            marginVertical: 8,
+          }}>
+          {server.tags.map((tag: string) => {
+            return (
+              <View
+                style={{
+                  padding: 4,
+                  borderRadius: 8,
+                  backgroundColor: currentTheme.headerSecondary,
+                  marginEnd: 4,
+                }}
+                key={`discover-entry-${server._id}-tag-${tag}`}>
+                <Text>#{tag}</Text>
+              </View>
+            );
+          })}
+        </View>
         <Button
+          style={{margin: 0}}
           onPress={async () => {
             !client.servers.get(server._id) &&
               (await client.joinInvite(server._id));
@@ -61,10 +102,16 @@ export const DiscoverPage = () => {
 
       // code based on https://codeberg.org/Doru/Discoverolt/src/branch/pages/index.html
 
-      const rawJSON = parser
+      const element = parser
         .parseFromString(unparsedText, 'text/html')
-        // @ts-expect-error hmm
-        .getElementById('__NEXT_DATA__')?.childNodes[0].data;
+        .getElementById('__NEXT_DATA__');
+
+      if (!element || !element.childNodes[0]) {
+        return setData({});
+      }
+
+      // @ts-expect-error works fine so meh
+      const rawJSON = element.childNodes[0].data;
       const json = JSON.parse(rawJSON).props.pageProps;
       setData(json);
     }
@@ -126,7 +173,9 @@ export const DiscoverPage = () => {
           </ScrollView>
         </>
       ) : (
-        <Text>{t(`app.discover.fetching_${tab}`)}</Text>
+        <View style={styles.loadingScreen}>
+          <Text type={'h1'}>{t(`app.discover.fetching_${tab}`)}</Text>
+        </View>
       )}
     </View>
   );