about summary refs log tree commit diff
path: root/src/view/com/search/Suggestions.tsx
blob: e9999e1d26d20eee1551214299ca5844bc7a1255 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import React from 'react'
import {StyleSheet, View} from 'react-native'
import {observer} from 'mobx-react-lite'
import {FoafsModel} from 'state/models/discovery/foafs'
import {SuggestedActorsModel} from 'state/models/discovery/suggested-actors'
import {SuggestedFollows} from 'view/com/discover/SuggestedFollows'
import {ProfileCardFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
import {sanitizeDisplayName} from 'lib/strings/display-names'

export const Suggestions = observer(
  ({
    foafs,
    suggestedActors,
  }: {
    foafs: FoafsModel
    suggestedActors: SuggestedActorsModel
  }) => {
    if (foafs.isLoading || suggestedActors.isLoading) {
      return <ProfileCardFeedLoadingPlaceholder />
    }
    return (
      <>
        {foafs.popular.length > 0 && (
          <View style={styles.suggestions}>
            <SuggestedFollows
              title="In your network"
              suggestions={foafs.popular}
            />
          </View>
        )}
        {suggestedActors.hasContent && (
          <View style={styles.suggestions}>
            <SuggestedFollows
              title="Suggested follows"
              suggestions={suggestedActors.suggestions}
            />
          </View>
        )}
        {foafs.sources.map((source, i) => {
          const item = foafs.foafs.get(source)
          if (!item || item.follows.length === 0) {
            return <View key={`sf-${item?.did || i}`} />
          }
          return (
            <View key={`sf-${item.did}`} style={styles.suggestions}>
              <SuggestedFollows
                title={`Followed by ${sanitizeDisplayName(
                  item.displayName || item.handle,
                )}`}
                suggestions={item.follows.slice(0, 10)}
              />
            </View>
          )
        })}
      </>
    )
  },
)

const styles = StyleSheet.create({
  suggestions: {
    marginTop: 10,
    marginBottom: 20,
  },
})