feat: instagram stories, add collaborators, infrastructure for settings in validation

Author: nevo-david

apps/frontend/src/components/launches/add.edit.model.tsx

@@ -276,7 +276,8 @@ export const AddEditModal: FC<{
       for (const key of allKeys) {
         if (key.checkValidity) {
           const check = await key.checkValidity(
-            key?.value.map((p: any) => p.image || [])
+            key?.value.map((p: any) => p.image || []),
+            key.settings
           );
           if (typeof check === 'string') {
             toaster.show(check, 'warning');

apps/frontend/src/components/launches/helpers/use.values.ts

@@ -8,7 +8,10 @@ const finalInformation = {} as {
     settings: () => object;
     trigger: () => Promise<boolean>;
     isValid: boolean;
-    checkValidity?: (value: Array<Array<{path: string}>>) => Promise<string|true>;
+    checkValidity?: (
+      value: Array<Array<{ path: string }>>,
+      settings: any
+    ) => Promise<string | true>;
     maximumCharacters?: number;
   };
 };
@@ -18,8 +21,11 @@ export const useValues = (
   identifier: string,
   value: Array<{ id?: string; content: string; media?: Array<string> }>,
   dto: any,
-  checkValidity?: (value: Array<Array<{path: string}>>) => Promise<string|true>,
-  maximumCharacters?: number,
+  checkValidity?: (
+    value: Array<Array<{ path: string }>>,
+    settings: any
+  ) => Promise<string | true>,
+  maximumCharacters?: number
 ) => {
   const resolver = useMemo(() => {
     return classValidatorResolver(dto);
@@ -43,8 +49,7 @@ export const useValues = (
   finalInformation[integration].trigger = form.trigger;
 
   if (checkValidity) {
-    finalInformation[integration].checkValidity =
-      checkValidity;
+    finalInformation[integration].checkValidity = checkValidity;
   }
 
   if (maximumCharacters) {

apps/frontend/src/components/launches/providers/high.order.provider.tsx

@@ -68,15 +68,16 @@ export const EditorWrapper: FC<{ children: ReactNode }> = ({ children }) => {
   return children;
 };
 
-export const withProvider = (
+export const withProvider = function <T extends object>(
   SettingsComponent: FC<{values?: any}> | null,
   CustomPreviewComponent?: FC<{maximumCharacters?: number}>,
   dto?: any,
   checkValidity?: (
-    value: Array<Array<{ path: string }>>
+    value: Array<Array<{ path: string }>>,
+    settings: T
   ) => Promise<string | true>,
   maximumCharacters?: number
-) => {
+) {
   return (props: {
     identifier: string;
     id: string;

apps/frontend/src/components/launches/providers/instagram/instagram.collaborators.tsx

@@ -0,0 +1,89 @@
+import { withProvider } from '@gitroom/frontend/components/launches/providers/high.order.provider';
+import { FC } from 'react';
+import { Select } from '@gitroom/react/form/select';
+import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
+import { InstagramDto } from '@gitroom/nestjs-libraries/dtos/posts/providers-settings/instagram.dto';
+import { InstagramCollaboratorsTags } from '@gitroom/frontend/components/launches/providers/instagram/instagram.tags';
+
+const postType = [
+  {
+    value: 'post',
+    label: 'Post / Reel',
+  },
+  {
+    value: 'story',
+    label: 'Story',
+  },
+];
+const InstagramCollaborators: FC<{ values?: any }> = (props) => {
+  const { watch, register, formState, control } = useSettings();
+  const postCurrentType = watch('post_type');
+  return (
+    <>
+      <Select
+        label="Post Type"
+        {...register('post_type', {
+          value: 'post',
+        })}
+      >
+        <option value="">Select Post Type...</option>
+        {postType.map((item) => (
+          <option key={item.value} value={item.value}>
+            {item.label}
+          </option>
+        ))}
+      </Select>
+
+      {postCurrentType !== 'story' && (
+        <InstagramCollaboratorsTags
+          label="Collaborators (max 3) - accounts can't be private"
+          {...register('collaborators')}
+        />
+      )}
+    </>
+  );
+};
+
+export default withProvider<InstagramDto>(
+  InstagramCollaborators,
+  undefined,
+  InstagramDto,
+  async ([firstPost, ...otherPosts], settings) => {
+    if (!firstPost.length) {
+      return 'Instagram should have at least one media';
+    }
+
+    if (firstPost.length > 1 && settings.post_type === 'story') {
+      return 'Instagram stories can only have one media';
+    }
+
+    const checkVideosLength = await Promise.all(
+      firstPost
+        .filter((f) => f.path.indexOf('mp4') > -1)
+        .flatMap((p) => p.path)
+        .map((p) => {
+          return new Promise<number>((res) => {
+            const video = document.createElement('video');
+            video.preload = 'metadata';
+            video.src = p;
+            video.addEventListener('loadedmetadata', () => {
+              res(video.duration);
+            });
+          });
+        })
+    );
+
+    for (const video of checkVideosLength) {
+      if (video > 60 && settings.post_type === 'story') {
+        return 'Instagram stories should be maximum 60 seconds';
+      }
+
+      if (video > 90 && settings.post_type === 'post') {
+        return 'Instagram reel should be maximum 90 seconds';
+      }
+    }
+
+    return true;
+  },
+  2200
+);

apps/frontend/src/components/launches/providers/instagram/instagram.provider.tsx

@@ -0,0 +1,61 @@
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
+import { ReactTags } from 'react-tag-autocomplete';
+import interClass from '@gitroom/react/helpers/inter.font';
+
+export const InstagramCollaboratorsTags: FC<{
+  name: string;
+  label: string;
+  onChange: (event: { target: { value: any[]; name: string } }) => void;
+}> = (props) => {
+  const { onChange, name, label } = props;
+  const { getValues } = useSettings();
+  const [tagValue, setTagValue] = useState<any[]>([]);
+  const [suggestions, setSuggestions] = useState<string>('');
+
+  const onDelete = useCallback(
+    (tagIndex: number) => {
+      const modify = tagValue.filter((_, i) => i !== tagIndex);
+      setTagValue(modify);
+      onChange({ target: { value: modify, name } });
+    },
+    [tagValue]
+  );
+
+  const onAddition = useCallback(
+    (newTag: any) => {
+      if (tagValue.length >= 3) {
+        return;
+      }
+      const modify = [...tagValue, newTag];
+      setTagValue(modify);
+      onChange({ target: { value: modify, name } });
+    },
+    [tagValue]
+  );
+
+  useEffect(() => {
+    const settings = getValues()[props.name];
+    if (settings) {
+      setTagValue(settings);
+    }
+  }, []);
+
+  const suggestionsArray = useMemo(() => {
+    return [...tagValue, { label: suggestions, value: suggestions }].filter(f => f.label);
+  }, [suggestions, tagValue]);
+
+  return (
+    <div>
+      <div className={`${interClass} text-[14px] mb-[6px]`}>{label}</div>
+      <ReactTags
+        placeholderText="Add a tag"
+        suggestions={suggestionsArray}
+        selected={tagValue}
+        onAdd={onAddition}
+        onInput={setSuggestions}
+        onDelete={onDelete}
+      />
+    </div>
+  );
+};

apps/frontend/src/components/launches/providers/instagram/instagram.tags.tsx

@@ -7,7 +7,7 @@ import RedditProvider from "@gitroom/frontend/components/launches/providers/redd
 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.provider';
+import InstagramProvider from '@gitroom/frontend/components/launches/providers/instagram/instagram.collaborators';
 import YoutubeProvider from '@gitroom/frontend/components/launches/providers/youtube/youtube.provider';
 import TiktokProvider from '@gitroom/frontend/components/launches/providers/tiktok/tiktok.provider';
 import PinterestProvider from '@gitroom/frontend/components/launches/providers/pinterest/pinterest.provider';

apps/frontend/src/components/launches/providers/show.all.providers.tsx

@@ -0,0 +1,18 @@
+import { Type } from 'class-transformer';
+import { IsArray, IsDefined, IsIn, IsString, ValidateNested } from 'class-validator';
+
+export class Collaborators {
+  @IsDefined()
+  @IsString()
+  label: string;
+}
+export class InstagramDto {
+  @IsIn(['post', 'story'])
+  @IsDefined()
+  post_type: 'post' | 'story';
+
+  @Type(() => Collaborators)
+  @ValidateNested({ each: true })
+  @IsArray()
+  collaborators: Collaborators[];
+}

libraries/nestjs-libraries/src/dtos/posts/providers-settings/instagram.dto.ts

@@ -20,7 +20,11 @@ export class NotEnoughScopes {
 }
 
 export abstract class SocialAbstract {
-  async fetch(url: string, options: RequestInit = {}, identifier = ''): Promise<Response> {
+  async fetch(
+    url: string,
+    options: RequestInit = {},
+    identifier = ''
+  ): Promise<Response> {
     const request = await fetch(url, options);
 
     if (request.status === 200 || request.status === 201) {
@@ -40,7 +44,10 @@ export abstract class SocialAbstract {
       return this.fetch(url, options, identifier);
     }
 
-    if (request.status === 401 || json.includes('OAuthException')) {
+    if (
+      request.status === 401 ||
+      (json.includes('OAuthException') && !json.includes("Unsupported format") && !json.includes('2207018'))
+    ) {
       throw new RefreshToken(identifier, json, options.body!);
     }