saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-23 16:05:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix feeds rendering, fixed some mobile styles

Browse Source
This commit is contained in:
austinkelsay 2024-10-23 14:48:11 -05:00
parent 508bf29ac5
commit 41ae0d6112
No known key found for this signature in database
GPG Key ID: 44CB4EC6D9F2FA02
13 changed files with 117 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/content/courses/CourseDetails.js
View File

@ -113,6 +113,35 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
return null;
};
const renderAdditionalLinks = () => {
if (processedEvent?.additionalLinks && processedEvent.additionalLinks.length > 0) {
return (
<div className="my-4">
<p>Additional Links:</p>
{processedEvent.additionalLinks.map((link, index) => (
<div key={index} className="mb-2">
<a
className="text-blue-500 hover:underline hover:text-blue-600 break-words"
href={link}
target="_blank"
rel="noopener noreferrer"
style={{
wordBreak: 'break-word',
overflowWrap: 'break-word',
display: 'inline-block',
maxWidth: '100%'
}}
>
{link}
</a>
</div>
))}
</div>
);
}
return null;
};
if (!processedEvent || !author) {
return <div className='w-full h-full flex items-center justify-center'><ProgressSpinner /></div>;
}
@ -183,9 +212,10 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
<GenericButton className='my-2' outlined icon="pi pi-external-link" onClick={() => window.open(`https://nostr.band/${nAddress}`, '_blank')} tooltip={isMobileView ? null : "View Nostr Event"} tooltipOptions={{ position: paidCourse ? 'left' : 'right' }} />
</div>
)}
{renderAdditionalLinks()}
</div>
</div>
</div>
</div>
);
}
}

18
src/components/content/documents/DocumentDetails.js
View File

@ -151,12 +151,22 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
<div className="my-4">
<p>Additional Links:</p>
{processedEvent.additionalLinks.map((link, index) => (
<React.Fragment key={index}>
<a className="text-blue-500 hover:underline hover:text-blue-600" href={link} target="_blank" rel="noopener noreferrer">
<div key={index} className="mb-2">
<a
className="text-blue-500 hover:underline hover:text-blue-600 break-words"
href={link}
target="_blank"
rel="noopener noreferrer"
style={{
wordBreak: 'break-word',
overflowWrap: 'break-word',
display: 'inline-block',
maxWidth: '100%'
}}
>
{link}
</a>
<br />
</React.Fragment>
</div>
))}
</div>
)}

43
src/components/content/videos/VideoDetails.js
View File

@ -126,6 +126,35 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
return null;
}
const renderAdditionalLinks = () => {
if (processedEvent?.additionalLinks && processedEvent.additionalLinks.length > 0) {
return (
<div className="my-4">
<p>Additional Links:</p>
{processedEvent.additionalLinks.map((link, index) => (
<div key={index} className="mb-2">
<a
className="text-blue-500 hover:underline hover:text-blue-600 break-words"
href={link}
target="_blank"
rel="noopener noreferrer"
style={{
wordBreak: 'break-word',
overflowWrap: 'break-word',
display: 'inline-block',
maxWidth: '100%'
}}
>
{link}
</a>
</div>
))}
</div>
);
}
return null;
};
return (
<div className="w-full">
{renderContent()}
@ -154,19 +183,7 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
{(summary)?.split('\n').map((line, index) => (
<p key={index}>{line}</p>
))}
{processedEvent?.additionalLinks && processedEvent?.additionalLinks.length > 0 && (
<div className="my-4">
<p>Additional Links:</p>
{processedEvent.additionalLinks.map((link, index) => (
<React.Fragment key={index}>
<a className="text-blue-500 hover:underline hover:text-blue-600" href={link} target="_blank" rel="noopener noreferrer">
{link}
</a>
<br />
</React.Fragment>
))}
</div>
)}
{renderAdditionalLinks()}
</div>
</div>
<div className='flex items-center'>

2
src/components/feeds/DiscordFeed.js
View File

@ -33,7 +33,7 @@ const DiscordFeed = ({ searchQuery }) => {
}
return (
<div className="bg-gray-900 h-full w-full min-bottom-bar:w-[86vw]">
<div className="h-full w-full min-bottom-bar:w-[86vw]">
<div className="mx-4">
{filteredData.length > 0 ? (
filteredData.map(message => (

2
src/components/feeds/GlobalFeed.js
View File

@ -108,7 +108,7 @@ const GlobalFeed = ({searchQuery}) => {
});
return (
<div className="bg-gray-900 h-full w-full min-bottom-bar:w-[86vw]">
<div className="h-full w-full min-bottom-bar:w-[86vw]">
<div className="mx-4 mt-4">
{combinedFeed.length > 0 ? (
combinedFeed.map(item => (

27
src/components/feeds/NostrFeed.js
View File

@ -5,45 +5,36 @@ import { useSession } from 'next-auth/react';
import { findKind0Fields } from '@/utils/nostr';
import NostrIcon from '../../../public/images/nostr.png';
import Image from 'next/image';
import { useImageProxy } from '@/hooks/useImageProxy';
import useWindowWidth from '@/hooks/useWindowWidth';
import { nip19 } from 'nostr-tools';
import { useCommunityNotes } from '@/hooks/nostr/useCommunityNotes';
import CommunityMessage from '@/components/feeds/messages/CommunityMessage';
import ZapThreadsWrapper from '@/components/ZapThreadsWrapper';
const NostrFeed = ({ searchQuery }) => {
const { communityNotes, isLoading, error } = useCommunityNotes();
const { ndk } = useNDKContext();
const { returnImageProxy } = useImageProxy();
const { data: session } = useSession();
const [authorData, setAuthorData] = useState({});
const [npub, setNpub] = useState(null);
const windowWidth = useWindowWidth();
useEffect(() => {
const fetchAuthors = async () => {
const authorDataMap = {};
for (const message of communityNotes) {
if (!authorDataMap[message.pubkey]) {
if (!authorData[message.pubkey]) {
const author = await fetchAuthor(message.pubkey);
authorDataMap[message.pubkey] = author;
setAuthorData(prevData => ({
...prevData,
[message.pubkey]: author
}));
}
}
setAuthorData(authorDataMap);
};
if (communityNotes && communityNotes.length > 0) {
fetchAuthors();
}
}, [communityNotes]);
useEffect(() => {
if (session?.user?.pubkey) {
setNpub(nip19.npubEncode(session.user.pubkey));
}
}, [session]);
}, [communityNotes, authorData]);
const fetchAuthor = async (pubkey) => {
try {
@ -86,7 +77,7 @@ const NostrFeed = ({ searchQuery }) => {
.sort((a, b) => b.created_at - a.created_at);
return (
<div className="bg-gray-900 h-full w-full min-bottom-bar:w-[86vw]">
<div className="h-full w-full min-bottom-bar:w-[86vw]">
<div className="mx-4 mt-4">
{filteredNotes.length > 0 ? (
filteredNotes.map(message => (
@ -95,7 +86,7 @@ const NostrFeed = ({ searchQuery }) => {
message={{
id: message.id,
author: authorData[message.pubkey]?.username || message.pubkey.substring(0, 12) + '...',
avatar: authorData[message.pubkey]?.avatar ? returnImageProxy(authorData[message.pubkey]?.avatar) : null,
avatar: authorData[message.pubkey]?.avatar,
content: message.content,
timestamp: message.created_at * 1000,
channel: "plebdevs"
@ -115,4 +106,4 @@ const NostrFeed = ({ searchQuery }) => {
);
};
export default NostrFeed;
export default NostrFeed;

2
src/components/feeds/StackerNewsFeed.js
View File

@ -45,7 +45,7 @@ const StackerNewsFeed = ({ searchQuery }) => {
.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
return (
<div className="bg-gray-900 h-full w-full min-bottom-bar:w-[86vw]">
<div className="h-full w-full min-bottom-bar:w-[86vw]">
<div className="mx-4 mt-4">
{filteredItems && filteredItems.length > 0 ? (
filteredItems.map(item => (

9
src/components/profile/subscription/SubscribeModal.js
View File

@ -149,13 +149,20 @@ const SubscribeModal = ({ user }) => {
return (
<>
<Card title={subscriptionCardTitle} className="w-fit m-4 mx-auto">
{subscribed && (
{subscribed && !user?.role?.nwc && (
<div className="flex flex-col">
<Message className="w-fit" severity="success" text="Subscribed!" />
<p className="mt-4">Thank you for your support 🎉</p>
<p className="text-sm text-gray-400">Pay-as-you-go subscription will renew on {subscribedUntil.toLocaleDateString()}</p>
</div>
)}
{subscribed && user?.role?.nwc && (
<div className="flex flex-col">
<Message className="w-fit" severity="success" text="Subscribed!" />
<p className="mt-4">Thank you for your support 🎉</p>
<p className="text-sm text-gray-400">Recurring subscription will AUTO renew on {subscribedUntil.toLocaleDateString()}</p>
</div>
)}
{(!subscribed && !subscriptionExpiredAt) && (
<div className="flex flex-col">
<Message className="w-fit" severity="info" text="You currently have no active subscription" />

11
src/components/profile/subscription/UserSubscription.js
View File

@ -101,11 +101,18 @@ const UserSubscription = () => {
<h1 className="text-3xl font-bold mb-6">Subscription Management</h1>
)}
<div className="mb-4 p-4 bg-gray-800 rounded-lg w-fit">
{subscribed && (
{subscribed && !user?.role?.nwc && (
<div className="flex flex-col">
<Message className="w-fit" severity="success" text="Subscribed!" />
<p className="mt-4">Thank you for your support 🎉</p>
<p className="text-sm text-gray-400">Pay-as-you-go subscription will renew on {subscribedUntil.toLocaleDateString()}</p>
<p className="text-sm text-gray-400">Pay-as-you-go subscription requires manual renewal on {subscribedUntil.toLocaleDateString()}</p>
</div>
)}
{subscribed && user?.role?.nwc && (
<div className="flex flex-col">
<Message className="w-fit" severity="success" text="Subscribed!" />
<p className="mt-4">Thank you for your support 🎉</p>
<p className="text-sm text-gray-400">Recurring subscription will AUTO renew on {subscribedUntil.toLocaleDateString()}</p>
</div>
)}
{(!subscribed && !subscriptionExpiredAt) && (

2
src/config/appConfig.js
View File

@ -11,7 +11,7 @@ const appConfig = {
// "wss://purplerelay.com/",
"wss://relay.devs.tools/"
],
authorPubkeys: ["8cb60e215678879cda0bef4d5b3fc1a5c5925d2adb5d8c4fa7b7d03b5f2deaea", "676c02247668d5b18479be3d1a80933044256f3fbd03640a8c234684e641b6d6", "f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741", "c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345"],
authorPubkeys: ["468f729dd409053dac5e7470622c3996aad88db6ed1de9165cb1921b5ab4fd5e","8cb60e215678879cda0bef4d5b3fc1a5c5925d2adb5d8c4fa7b7d03b5f2deaea", "676c02247668d5b18479be3d1a80933044256f3fbd03640a8c234684e641b6d6", "f33c8a9617cb15f705fc70cd461cfd6eaf22f9e24c33eabad981648e5ec6f741", "c67cd3e1a83daa56cff16f635db2fdb9ed9619300298d4701a58e68e84098345"],
customLightningAddresses: [
{
// todo remove need for lowercase

5
src/pages/about.js
View File

@ -13,6 +13,7 @@ const AboutPage = () => {
const windowWidth = useWindowWidth();
const isTabView = windowWidth <= 1360;
const isMobile = windowWidth < 768;
const copyToClipboard = async (text) => {
try {
@ -31,9 +32,9 @@ const AboutPage = () => {
};
return (
<div className={`${isTabView ? 'w-full' : 'w-[83vw]'} p-4 mx-auto`}>
<div className={`${isTabView ? 'w-full' : 'w-[83vw]'} ${isMobile ? 'p-0' : 'p-4'} mx-auto`}>
<InteractivePromotionalCarousel />
<Card title="Key Features" className="mb-4">
<Card title="Key Features" className={`mb-4 ${isMobile ? 'm-2' : null}`}>
<div className="flex flex-col gap-4">
<div className="flex flex-col items-start justify-center">
<div className='flex items-start'>

2
src/pages/feed.js
View File

@ -51,7 +51,7 @@ const Feed = () => {
};
return (
<div className="bg-gray-900 h-[100vh] w-[100vw] min-bottom-bar:w-[86vw]">
<div className="h-[100vh] w-[100vw] min-bottom-bar:w-[86vw]">
<div className="w-[100vw] min-bottom-bar:w-[86vw] px-4 pt-4 flex flex-col items-start">
<div className='mb-4 flex flex-row items-end'>
<h1 className="font-bold mb-0">Feeds</h1>

9
src/pages/subscribe.js
View File

@ -147,13 +147,20 @@ const Subscribe = () => {
<div className="mb-4 p-4 bg-gray-800 rounded-lg w-fit">
{session && session?.user ? (
<>
{subscribed && (
{subscribed && !user?.role?.nwc && (
<div className="flex flex-col">
<Message className="w-fit" severity="success" text="Subscribed!" />
<p className="mt-4">Thank you for your support 🎉</p>
<p className="text-sm text-gray-400">Pay-as-you-go subscription must be manually renewed on {subscribedUntil.toLocaleDateString()}</p>
</div>
)}
{subscribed && user?.role?.nwc && (
<div className="flex flex-col">
<Message className="w-fit" severity="success" text="Subscribed!" />
<p className="mt-4">Thank you for your support 🎉</p>
<p className="text-sm text-gray-400">Recurring subscription will AUTO renew on {subscribedUntil.toLocaleDateString()}</p>
</div>
)}
{(!subscribed && !subscriptionExpiredAt) && (
<div className="flex flex-col">
<Message className="w-fit" severity="info" text="You currently have no active subscription" />