feat: canonical link change + reddit change

apps/frontend/src/components/launches/providers/reddit/subreddit.tsx

@@ -1,10 +1,4 @@
-import {
-  FC,
-  FormEvent,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react';
+import { FC, FormEvent, useCallback, useMemo, useState } from 'react';
 import { useCustomProviderFunction } from '@gitroom/frontend/components/launches/helpers/use.custom.provider.function';
 import { Input } from '@gitroom/react/form/input';
 import { useDebouncedCallback } from 'use-debounce';
@@ -14,6 +8,8 @@ import { MultiMediaComponent } from '@gitroom/frontend/components/media/media.co
 import { useWatch } from 'react-hook-form';
 import { Select } from '@gitroom/react/form/select';
 import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
+import { Canonical } from '@gitroom/react/form/canonical';
+import { useIntegration } from '@gitroom/frontend/components/launches/helpers/use.integration';
 
 export const RenderOptions: FC<{
   options: Array<'self' | 'link' | 'media'>;
@@ -60,6 +56,7 @@ export const Subreddit: FC<{
   const { onChange, name } = props;
 
   const state = useSettings();
+  const { date } = useIntegration();
   const split = name.split('.');
   const [loading, setLoading] = useState(false);
   // @ts-ignore
@@ -225,7 +222,8 @@ export const Subreddit: FC<{
             ))}
           </Select>
           {value.type === 'link' && (
-            <Input
+            <Canonical
+              date={date}
               error={errors?.url?.message}
               value={value.url}
               label="URL"
@@ -267,7 +265,7 @@ export const Subreddit: FC<{
             }}
           />
           {!!results.length && !loading && (
-            <div className="w-full absolute bg-input -mt-[20px] outline-none border-fifth border cursor-pointer">
+            <div className="z-[400] w-full absolute bg-input -mt-[20px] outline-none border-fifth border cursor-pointer">
               {results.map((r: { id: string; name: string }) => (
                 <div
                   onClick={setResult(r)}

apps/frontend/src/components/post-url-selector/post.url.selector.tsx

@@ -107,7 +107,7 @@ export const PostSelector: FC<{
 
   return (
     <div className="text-white fixed left-0 top-0 bg-black/80 z-[300] w-full h-full p-[60px] animate-fade">
-      <div className="flex flex-col w-full h-full bg-[#0B101B] border-tableBorder border-2 rounded-xl pb-[20px] px-[20px] relative">
+      <div className="flex flex-col w-full max-w-[1200px] mx-auto h-full bg-[#0B101B] border-tableBorder border-2 rounded-xl pb-[20px] px-[20px] relative">
         <div className="flex">
           <div className="flex-1">
             <TopTitle

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

@@ -1,12 +1,5 @@
 import {
-  ArrayMinSize,
-  IsBoolean,
-  IsDefined,
-  IsString,
-  IsUrl,
-  MinLength,
-  ValidateIf,
-  ValidateNested,
+  ArrayMinSize, IsBoolean, IsDefined, IsString, IsUrl, Matches, MinLength, ValidateIf, ValidateNested
 } from 'class-validator';
 import { MediaDto } from '@gitroom/nestjs-libraries/dtos/media/media.dto';
 import { Type } from 'class-transformer';
@@ -37,9 +30,15 @@ export class RedditSettingsDtoInner {
   @IsDefined()
   type: string;
 
-  @ValidateIf((e) => e.type === 'link')
   @IsUrl()
   @IsDefined()
+  @ValidateIf((o) => o.type === 'link' && o?.url?.indexOf('(post:') === -1)
+  @Matches(
+    /^(|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})$/,
+    {
+      message: 'Invalid URL',
+    }
+  )
   url: string;
 
   @IsBoolean()