Skip to content

Commit

Permalink
🤖🐧 ↝ Lens client working on social graph/ql api integrated again
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gizmotronn
Gizmotronn committed Feb 11, 2023
1 parent e12ec43 commit 29c0d44
Show file tree
Hide file tree
Showing 21 changed files with 7,004 additions and 507 deletions.
47 changes: 47 additions & 0 deletions components/Lens/FeedPost.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { MediaRenderer } from '@thirdweb-dev/react';
import Link from 'next/link';
import React from 'react';
import { ExplorePublicationsQuery } from '../../graphql/generated';
import styles from '../../styles/Lens/FeedPost.module.css';
import { useComments } from '@lens-protocol/react'; // Visit https://docs.lens.xyz/docs/use-comments

type Props = {
publication: ExplorePublicationsQuery["explorePublications"]["items"][0];
}

export default function LensPostFeed ({ publication }: Props) {
var postId = publication.id;

return (
<div className={styles.feedPostContainer}>
<div className={styles.feedPostHeader}>
<MediaRenderer
// @ts-ignore
src={publication?.profile?.picture?.original?.url || ""}
alt={publication.profile.name || publication.profile.handle}
className={styles.feedPostProfilePicture}
/>
<Link href={`/profile/${publication.profile.handle}`} className={styles.feedPostProfileName}>
{publication.profile.name || publication.profile.handle}
</Link>
</div>
<div className={styles.feedPostContent}>
<h3 className={styles.feedPostContentTitle}>{publication.metadata.name}</h3>
<p className={styles.feedPostContentDescription}>{publication.metadata.content}</p>

{(publication.metadata.image || publication.metadata.media?.length > 0) && (
<MediaRenderer
src={publication.metadata.image || publication.metadata.media[0].original.url}
alt={publication.metadata.name || ""}
className={styles.feedPostContentImage}
/>
)}
</div>
<div className={styles.feedPostFooter}>
<p>{publication.stats.totalAmountOfCollects} Collects</p>
<p>{publication.stats.totalAmountOfComments} Comments</p>
<p>{publication.stats.totalAmountOfMirrors} Mirrors</p>
</div>
</div>
);
};
97 changes: 97 additions & 0 deletions components/Lens/LensUser.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
// Base imports / next
import React from "react";
import { useRouter } from "next/router";

// Functional components
import LensPostFeed from "./FeedPost";

// Thirdweb interactions
import { MediaRenderer, Web3Button } from "@thirdweb-dev/react";

// API Queries / Tanstack-Graphql
import { useProfileQuery, usePublicationsQuery } from "../../graphql/generated";
//import { useFollow } from "@lens-protocol/react";
import { useFollow } from "../../lib/useFollow";

// Styling
import styles from '../../styles/Lens/Profile.module.css';
import { Flex, Text, IconButton } from "@chakra-ui/react";
import { LENS_CONTRACT_ABI, LENS_CONTRACT_ADDRESS } from "../../constants/contracts";

type Props = {};

export default function LensProfilePage ( {}: Props ) {
const router = useRouter();
const { id } = router.query;
const { mutate: followUser } = useFollow();
const { isLoading: loadingProfile, data: profileData, error: profileError } = useProfileQuery({
request: {
handle: id,
},
}, {
enabled: !!id,
});

const { isLoading: isLoadingPublications, data: publicationsData, error: publicationsError } = usePublicationsQuery({
request: {
profileId: profileData?.profile?.id,
},
}, {
enabled: !!profileData?.profile?.id,
});

if (publicationsError || profileError) { return <div>Unable to find this profile</div>; };
if (loadingProfile) { return <div>Loading profile...</div>; };

return (
<Flex w='100%'>
{/*<Sidebar />*/}
<center><Flex
pos="absolute"
top="50%"
left="50%"
w="60%"
transform="translate(-50%)"
>
<div className={styles.profileContainer}>
<div className={styles.profileContentContainer}>
{/* @ts-ignore */}
{profileData?.profile?.coverPicture?.original?.url && (
<MediaRenderer
// @ts-ignore
src={profileData?.profile?.coverPicture?.original?.url || ""}
alt={profileData.profile.name || profileData.profile.handle || ""}
className={styles.coverImageContainer}
/>
)}
{/* @ts-ignore */}
{profileData?.profile?.picture?.original?.url && (
<MediaRenderer
// @ts-ignore
src={profileData.profile.picture.original.url}
alt={profileData.profile.name || profileData.profile.handle || ""}
className={styles.profilePictureContainer}
/>
)}
<h1 className={styles.profileName}>{profileData?.profile?.name || 'Unknown user'}</h1>
<p className={styles.profileHandle}>{profileData?.profile?.handle}</p>
<p className={styles.profileDescription}>{profileData?.profile?.bio}</p>
<p className={styles.followerCount}>{profileData?.profile?.stats.totalFollowers} Followers</p>
</div>
<Web3Button
contractAddress={LENS_CONTRACT_ADDRESS}
contractAbi={LENS_CONTRACT_ABI}
action={() => followUser(profileData?.profile?.id)}
>Follow User</Web3Button> <br />
<center><div className={styles.publicationsContainer}>
{
publicationsData?.publications.items.map((publication) => (
<LensPostFeed publication={publication} key={publication.id} />
))
}
</div></center>
</div>
</Flex></center>
</Flex>
);
}
6 changes: 6 additions & 0 deletions components/NavigationCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,12 @@ export function ProfileNavigationCard(){
</svg>
<span className="hidden md:block">Edge Functions/Forks</span>
</Link>
<Link href="/posts/lens/feed" className={pathname === '/notifications' ? activeElementClasses : nonActiveElementClasses}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
<span className="hidden md:block">Lens Feed</span>
</Link>
<Link href="/posts/notifications" className={pathname === '/notifications' ? activeElementClasses : nonActiveElementClasses}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
Expand Down
1 change: 1 addition & 0 deletions constants/cdn.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const imagesCdnAddress = 'https://qwbufbmxkjfaikoloudl.supabase.co/storage/v1/object/public/images/'
Loading

1 comment on commit 29c0d44

@Gizmotronn
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Signal-K/Silfur#31

Please sign in to comment.