feat(feed): map frontend (#1266)

* chore: handle Post filter HasLocation, add Location in Post Metadata

* make generate

* fix: small fix mapfeed

* Add map post geoloc

* Add gno social feed indexer

* Add more functionnality to backend

* Add heatmap aggregation for large number of posts

* fix: test4

* Clean pr

* fix: map feed front errors, yarn lint-fix

* feat add heatmap

* Include aggregate posts query in code

* fix: map icons per post category

* wip: social feed map: posts previews on map

* Solve comments from PR review

* weshnet and protobuf generate

* fix: properly define txIndexerURL config field

Signed-off-by: Norman Meier <[email protected]>

* chore: run lint-fix

Signed-off-by: Norman Meier <[email protected]>

* feat: add test4 indexer url

Signed-off-by: Norman Meier <[email protected]>

* fix: remove out-of-scope work on feed map, yarn lint-fix

* wip: MapPosts

* fix: Add/Remove/Update location when creating a post, optionally

* fix: show marker when updating location at post creation, disable location adding if no content at post creation

* feat: handling Map location at Article creation

* fix: better location button at post/article creation, responsive

* fix: prevent infinite PostsWithLocation fetching

* fix: show existing map posts at post's creation, factorize Map components (social feed) stuff, fix NewsFeedInput paddings

* feat: add post-to-map and map-to-post redirection (UI), rollback a local env modif in networks/teritori-testnet

* fix: center map to selected address at post's creation

* fix: map cluster icon style

* fix: yarn install

* fix: remove unused component

* fix: map feed small fixes

* fix: add location on publishing track or video, small fixes

* fix: location button

* fix: video.svg

* fix: remove limit on fetch feed location

* fix: remove hasLocation

* make generate

* fix: PostsWithLocationRequest

* make generate

* fix: yarn lint-fix

* fix: check-codegen diffs

* fix: Map fetch posts with location using network, handle Audio and VideoNote on map

* fix: map layer url as exported constant

* fix: map video and audio render, fix map location in url, better typing, remove legacy stuff

* fix: avoid shared player bar on map posts

* fix: feed map media player

* fix: feed map show posts when map appears

* fix: handle multiple pictures on map posts

* make generate

* fix: gifs picture map posts

* fix: remove unused authorId, remove unused height

* fix: small fixes map

* fix: add TODO and remove wrong icon url from Map.tsx

* fix: externalize constants

* remove unecessary package

* fix: MarkerCluster type

* fix: MarkerCluster is any, no solution

* yarn lint-fix

* fix: map feed: remove developerMode

* fix: show map feed tab by default

* fix remove useMemo usage

* fix: remove unused undefined

* fix: add consulted post id on feed map, todo added

* fix: highlight consulted post icon on the map

* fix: simplify Map

* fix: MapModal: close adresses list after selection instead of waiting 1500ms

* fix: MapModal: Remove Suspense because no fallback

* wip: Map: open consulted post marker, not working with clusters

* chore: remove unused comments

* fix: Map: rollback to highlight markers on consultation instead of open popup

---------

Signed-off-by: Norman Meier <[email protected]>
Co-authored-by: Miguel Victoria <[email protected]>
Co-authored-by: Omar Sy <[email protected]>
Co-authored-by: Norman Meier <[email protected]>
Co-authored-by: n0izn0iz <[email protected]>

package.json

@@ -73,7 +73,8 @@
     "@solana/web3.js": "^1.87.6",
     "@tanstack/react-query": "^4.12.0",
     "@types/crypto-js": "^4.2.2",
-    "@types/leaflet": "^1.9.8",
+    "@types/leaflet": "^1.9.12",
+    "@types/leaflet.markercluster": "^1.5.4",
     "@types/papaparse": "^5.3.14",
     "assert": "^2.1.0",
     "axios": "^1.6.2",
@@ -112,6 +113,7 @@
     "immutable": "^4.0.0",
     "kubernetes-models": "^4.3.1",
     "leaflet": "^1.9.4",
+    "leaflet.markercluster": "^1.5.3",
     "listr2": "^8.0.1",
     "lodash": "^4.17.21",
     "long": "^5.2.1",

packages/components/FilePreview/AudioView.tsx

@@ -27,21 +27,19 @@ export const AudioView: React.FC<{
   imageURI?: string;
   duration: number;
   waveform: number[];
-  authorId: string;
   postId: string;
   fallbackImageURI?: string;
 }> = ({
   fileUrl,
   imageURI,
   duration,
   waveform,
-  authorId,
   postId,
   fallbackImageURI: fallbackImageSource,
 }) => {
   const { media, handlePlayPause, loadAndPlaySoundsQueue, playbackStatus } =
     useMediaPlayer();
-  const isInMediaPlayer = media?.postId === postId;
+  const isInMediaPlayer = !!media && postId === media.postId;
 
   const onPressPlayPause = async () => {
     if (isInMediaPlayer) {

packages/components/FilePreview/FilesPreviewsContainer.tsx

@@ -5,9 +5,6 @@ import { v4 as uuidv4 } from "uuid";
 import { EditableAudioPreview } from "./EditableAudioPreview";
 import { ImagesViews } from "./ImagesViews";
 import { VideoView } from "./VideoView";
-import { useSelectedNetworkId } from "../../hooks/useSelectedNetwork";
-import useSelectedWallet from "../../hooks/useSelectedWallet";
-import { getUserId } from "../../networks";
 import { GIF_MIME_TYPE } from "../../utils/mime";
 import { convertGIFToLocalFileType } from "../../utils/social-feed";
 import { layout } from "../../utils/style/layout";
@@ -30,10 +27,6 @@ export const FilesPreviewsContainer: React.FC<FilePreviewContainerProps> = ({
   onAudioUpdate,
   showSmallPreview = false,
 }) => {
-  const selectedWallet = useSelectedWallet();
-  const selectedNetworkId = useSelectedNetworkId();
-  const userId = getUserId(selectedNetworkId, selectedWallet?.address);
-
   const audioFiles = useMemo(
     () => files?.filter((file) => file.fileType === "audio"),
     [files],
@@ -82,7 +75,6 @@ export const FilesPreviewsContainer: React.FC<FilePreviewContainerProps> = ({
           file={file}
           onDelete={onDelete}
           isEditable
-          authorId={userId}
           showSmallPreview={showSmallPreview}
         />
       ))}

packages/components/FilePreview/VideoView.tsx

@@ -11,19 +11,17 @@ import { LocalFileData, RemoteFileData } from "../../utils/types/files";
 import { BrandText } from "../BrandText";
 import { MediaPlayerVideo } from "../mediaPlayer/MediaPlayerVideo";
 
-interface VideoPreviewProps {
+interface Props {
   file: LocalFileData | RemoteFileData;
   onDelete?: (file: LocalFileData | RemoteFileData) => void;
   isEditable?: boolean;
   postId?: string;
-  authorId: string;
   showSmallPreview?: boolean;
 }
 
-export const VideoView: React.FC<VideoPreviewProps> = ({
+export const VideoView: React.FC<Props> = ({
   file,
   onDelete,
-  authorId,
   postId,
   isEditable = false,
   showSmallPreview = false,

packages/components/IconBox.tsx

@@ -12,8 +12,8 @@ interface IconBoxProps {
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
   iconProps?: {
-    height: number;
-    width: number;
+    height?: number;
+    width?: number;
     color?: string;
   };
 }

packages/components/TopMenu/TopMenuLiveMint.tsx

@@ -17,7 +17,7 @@ import {
   COLLECTION_VIEW_SM_HEIGHT,
   COLLECTION_VIEW_SM_WIDTH,
 } from "../CollectionView";
-import { SmallCarousel } from "../carousels/SmallCarousel";
+import { SmallCarousel } from "../carousels/SmallCarousel/SmallCarousel";
 
 export const TopMenuLiveMint: React.FC = () => {
   const selectedNetworkId = useSelectedNetworkId();

packages/components/TopMenu/TopMenuMyTeritories.tsx

@@ -12,7 +12,7 @@ import FlexCol from "../FlexCol";
 import FlexRow from "../FlexRow";
 import { OmniLink } from "../OmniLink";
 import { LegacyTertiaryBox } from "../boxes/LegacyTertiaryBox";
-import { SmallCarousel } from "../carousels/SmallCarousel";
+import { SmallCarousel } from "../carousels/SmallCarousel/SmallCarousel";
 import { UserAvatarWithFrame } from "../images/AvatarWithFrame";
 
 const ORG_CARD_WIDTH = 164;