Skip to content

Development has been made to allow X users to generate and use their own APIKEY and Access Token #489

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+420 −41
Open

Development has been made to allow X users to generate and use their own APIKEY and Access Token #489

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,3 +88,7 @@ STRIPE_SIGNING_KEY_CONNECT=""
# Developer Settings
NX_ADD_PLUGINS=false
IS_GENERAL="true" # required for now

#Enable X Integration with Self Generated Tokens.
ENABLE_X_SELF="true"

Binary file added apps/frontend/public/icons/platforms/xself.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
98 changes: 58 additions & 40 deletions apps/frontend/src/components/launches/providers/show.all.providers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import {FC} from "react";
import {Integrations} from "@gitroom/frontend/components/launches/calendar.context";
import DevtoProvider from "@gitroom/frontend/components/launches/providers/devto/devto.provider";
import XProvider from "@gitroom/frontend/components/launches/providers/x/x.provider";
import LinkedinProvider from "@gitroom/frontend/components/launches/providers/linkedin/linkedin.provider";
import RedditProvider from "@gitroom/frontend/components/launches/providers/reddit/reddit.provider";
import MediumProvider from "@gitroom/frontend/components/launches/providers/medium/medium.provider";
import HashnodeProvider from "@gitroom/frontend/components/launches/providers/hashnode/hashnode.provider";
import { FC } from 'react';
import { Integrations } from '@gitroom/frontend/components/launches/calendar.context';
import DevtoProvider from '@gitroom/frontend/components/launches/providers/devto/devto.provider';
import XProvider from '@gitroom/frontend/components/launches/providers/x/x.provider';
import LinkedinProvider from '@gitroom/frontend/components/launches/providers/linkedin/linkedin.provider';
import RedditProvider from '@gitroom/frontend/components/launches/providers/reddit/reddit.provider';
import MediumProvider from '@gitroom/frontend/components/launches/providers/medium/medium.provider';
import HashnodeProvider from '@gitroom/frontend/components/launches/providers/hashnode/hashnode.provider';
import FacebookProvider from '@gitroom/frontend/components/launches/providers/facebook/facebook.provider';
import InstagramProvider from '@gitroom/frontend/components/launches/providers/instagram/instagram.collaborators';
import YoutubeProvider from '@gitroom/frontend/components/launches/providers/youtube/youtube.provider';
Expand All @@ -17,40 +17,58 @@ import DiscordProvider from '@gitroom/frontend/components/launches/providers/dis
import SlackProvider from '@gitroom/frontend/components/launches/providers/slack/slack.provider';
import MastodonProvider from '@gitroom/frontend/components/launches/providers/mastodon/mastodon.provider';
import BlueskyProvider from '@gitroom/frontend/components/launches/providers/bluesky/bluesky.provider';
import XSelfProvider from '@gitroom/frontend/components/launches/providers/xself/xself.provider';

export const Providers = [
{identifier: 'devto', component: DevtoProvider},
{identifier: 'x', component: XProvider},
{identifier: 'linkedin', component: LinkedinProvider},
{identifier: 'linkedin-page', component: LinkedinProvider},
{identifier: 'reddit', component: RedditProvider},
{identifier: 'medium', component: MediumProvider},
{identifier: 'hashnode', component: HashnodeProvider},
{identifier: 'facebook', component: FacebookProvider},
{identifier: 'instagram', component: InstagramProvider},
{identifier: 'youtube', component: YoutubeProvider},
{identifier: 'tiktok', component: TiktokProvider},
{identifier: 'pinterest', component: PinterestProvider},
{identifier: 'dribbble', component: DribbbleProvider},
{identifier: 'threads', component: ThreadsProvider},
{identifier: 'discord', component: DiscordProvider},
{identifier: 'slack', component: SlackProvider},
{identifier: 'mastodon', component: MastodonProvider},
{identifier: 'bluesky', component: BlueskyProvider},
{ identifier: 'devto', component: DevtoProvider },
{ identifier: 'x', component: XProvider },
{ identifier: 'linkedin', component: LinkedinProvider },
{ identifier: 'linkedin-page', component: LinkedinProvider },
{ identifier: 'reddit', component: RedditProvider },
{ identifier: 'medium', component: MediumProvider },
{ identifier: 'hashnode', component: HashnodeProvider },
{ identifier: 'facebook', component: FacebookProvider },
{ identifier: 'instagram', component: InstagramProvider },
{ identifier: 'youtube', component: YoutubeProvider },
{ identifier: 'tiktok', component: TiktokProvider },
{ identifier: 'pinterest', component: PinterestProvider },
{ identifier: 'dribbble', component: DribbbleProvider },
{ identifier: 'threads', component: ThreadsProvider },
{ identifier: 'discord', component: DiscordProvider },
{ identifier: 'slack', component: SlackProvider },
{ identifier: 'mastodon', component: MastodonProvider },
{ identifier: 'bluesky', component: BlueskyProvider },
{ identifier: 'xself', component: XSelfProvider },
];

export const ShowAllProviders: FC<{
integrations: Integrations[];
value: Array<{ content: string; id?: string }>;
selectedProvider?: Integrations;
}> = (props) => {
const { integrations, value, selectedProvider } = props;
return (
<>
{integrations.map((integration) => {
const { component: ProviderComponent } = Providers.find(
(provider) => provider.identifier === integration.identifier
) || { component: null };
if (
!ProviderComponent ||
integrations.map((p) => p.id).indexOf(selectedProvider?.id!) === -1
) {
return null;
}
return (
<ProviderComponent
key={integration.id}
{...integration}
value={value}
show={selectedProvider?.id === integration.id}
/>
);
})}
</>
);
};

export const ShowAllProviders: FC<{integrations: Integrations[], value: Array<{content: string, id?: string}>, selectedProvider?: Integrations}> = (props) => {
const {integrations, value, selectedProvider} = props;
return (
<>
{integrations.map((integration) => {
const {component: ProviderComponent} = Providers.find(provider => provider.identifier === integration.identifier) || {component: null};
if (!ProviderComponent || integrations.map(p => p.id).indexOf(selectedProvider?.id!) === -1) {
return null;
}
return <ProviderComponent key={integration.id} {...integration} value={value} show={selectedProvider?.id === integration.id} />;
})}
</>
)
}
52 changes: 52 additions & 0 deletions apps/frontend/src/components/launches/providers/xself/xself.provider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { withProvider } from '@gitroom/frontend/components/launches/providers/high.order.provider';
export default withProvider(
null,
undefined,
undefined,
async (posts) => {
if (posts.some((p) => p.length > 4)) {
return 'There can be maximum 4 pictures in a post.';
}

if (
posts.some(
(p) => p.some((m) => m.path.indexOf('mp4') > -1) && p.length > 1
)
) {
return 'There can be maximum 1 video in a post.';
}
Comment on lines +11 to +17
Copy link

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Improve media type detection and validation logic

Using indexOf('mp4') to detect media types may produce false positives and is not reliable. Consider using file extensions with endsWith('.mp4') or checking MIME types. Also, clarify the validation logic to ensure that posts containing a video do not include other media items.

Apply this diff to improve media type checking and validation logic:

-if (
-  posts.some(
-    (p) => p.some((m) => m.path.indexOf('mp4') > -1) && p.length > 1
-  )
-) {
-  return 'There can be maximum 1 video in a post.';
-}
+if (
+  posts.some(
+    (p) =>
+      p.some((m) => m.path.endsWith('.mp4')) &&
+      p.length > 1
+  )
+) {
+  return 'Posts containing a video cannot include other media items.';
+}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
if (
posts.some(
(p) => p.some((m) => m.path.indexOf('mp4') > -1) && p.length > 1
)
) {
return 'There can be maximum 1 video in a post.';
}
if (
posts.some(
(p) =>
p.some((m) => m.path.endsWith('.mp4')) &&
p.length > 1
)
) {
return 'Posts containing a video cannot include other media items.';
}


for (const load of posts.flatMap((p) => p.flatMap((a) => a.path))) {
if (load.indexOf('mp4') > -1) {
const isValid = await checkVideoDuration(load);
if (!isValid) {
return 'Video duration must be less than or equal to 140 seconds.';
}
}
}
Comment on lines +19 to +26
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

Handle potential CORS issues when accessing video metadata

Accessing video.duration may fail due to CORS restrictions when loading videos from external URLs. This could cause the validation to fail or behave inconsistently. Consider performing video duration validation on the server side or ensure that videos come from same-origin sources where CORS policies allow metadata access.

return true;
},
280
);

const checkVideoDuration = async (url: string): Promise<boolean> => {
return new Promise((resolve, reject) => {
const video = document.createElement('video');
video.src = url;
video.preload = 'metadata';

video.onloadedmetadata = () => {
// Check if the duration is less than or equal to 140 seconds
const duration = video.duration;
if (duration <= 140) {
resolve(true); // Video duration is acceptable
} else {
resolve(false); // Video duration exceeds 140 seconds
}
};

video.onerror = () => {
reject(new Error('Failed to load video metadata.'));
};
});
};
Comment on lines +32 to +52
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

Ensure proper error handling in checkVideoDuration

The checkVideoDuration function may encounter errors if the video fails to load or due to CORS issues. Ensure that these errors are properly handled and communicated to the user. Additionally, consider implementing a timeout to handle cases where onloadedmetadata may not fire.

3 changes: 2 additions & 1 deletion libraries/nestjs-libraries/src/integrations/integration.manager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,11 @@ import { DiscordProvider } from '@gitroom/nestjs-libraries/integrations/social/d
import { SlackProvider } from '@gitroom/nestjs-libraries/integrations/social/slack.provider';
import { MastodonProvider } from '@gitroom/nestjs-libraries/integrations/social/mastodon.provider';
import { BlueskyProvider } from '@gitroom/nestjs-libraries/integrations/social/bluesky.provider';
import { XSelfProvider } from '@gitroom/nestjs-libraries/integrations/social/xself.provider';
// import { MastodonCustomProvider } from '@gitroom/nestjs-libraries/integrations/social/mastodon.custom.provider';

const socialIntegrationList: SocialProvider[] = [
new XProvider(),
process.env.ENABLE_X_SELF === 'true' ? new XSelfProvider() : new XProvider(),
new LinkedinProvider(),
new LinkedinPageProvider(),
new RedditProvider(),
Expand Down
Loading