youtube link with id on profile

frontend-react/src/components/user/AvatarWithInfo.tsx

@@ -86,7 +86,7 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({ user, canEdit }) => {
                   </a>
                 </Flex>
               )}
-              {user.youtube_name && (
+              {user.youtube_name && user.youtube_id && (
                 <Flex
                   alignItems="center"
                   mx="0.5em"
@@ -94,7 +94,7 @@ const AvatarWithInfo: React.FC<AvatarWithInfoProps> = ({ user, canEdit }) => {
                   color={grayWithShade}
                 >
                   <Box as={FaYoutube} mr="0.2em" />
-                  <a href={`https://youtube.com/c/${user.youtube_name}`}>
+                  <a href={`https://youtube.com/channel/${user.youtube_id}`}>
                     {user.youtube_name}
                   </a>
                 </Flex>

frontend-react/src/graphql/queries/searchForUser.ts

@@ -20,6 +20,7 @@ export const SEARCH_FOR_USER: DocumentNode = gql`
       twitch_name
       twitter_name
       youtube_name
+      youtube_id
       country
       weapons
       top500

frontend-react/src/types.ts

@@ -110,6 +110,7 @@ export interface User {
   twitch_name?: string
   twitter_name?: string
   youtube_name?: string
+  youtube_id?: string
   country?: CountryCode
   weapons?: Weapon[]
   top500: boolean