HowTo corrections

src/components/generic/CodeShell.js

@@ -1,23 +1,23 @@
 import React from 'react';
-import {FlexColumn, Svg} from '../../utils/containers';
+import { FlexColumn, Svg } from '../../utils/containers';
 import styled from 'styled-components';
 import theme from '../../utils/theme';
 import copyIco from '../../assets/copy_ico.svg';
 import checkIco from '../../assets/check_ico.svg';
-import {Body, Code} from '../../utils/fonts';
+import { Body, Code } from '../../utils/fonts';
 
 const CodeShellStyle = styled(FlexColumn)`
   position: relative;
   padding: 24px 14px 14px;
   gap: 8px;
-  background-color: ${({theme}) => theme.colors.dark07};
+  background-color: ${({ theme }) => theme.colors.dark07};
-  border: 1px solid ${({theme}) => theme.colors.dark};
+  border: 1px solid ${({ theme }) => theme.colors.dark};
   border-radius: 4px;
   width: 100%;
   align-items: flex-start;
-  max-width: ${({maxWidth}) => maxWidth ? maxWidth : 'none'};
+  max-width: ${({ maxWidth }) => (maxWidth ? maxWidth : 'none')};
 
-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
     gap: 12px;
     padding: 40px 32px 32px;
   }
@@ -28,59 +28,63 @@ const CopiedMessageStyle = styled(Body)`
   position: absolute;
   top: -24px;
   right: -10px;
-  background-color: ${({theme}) => theme.colors.green};
+  background-color: ${({ theme }) => theme.colors.green};
-  color: ${({theme}) => theme.colors.white};
+  color: ${({ theme }) => theme.colors.white};
   border-radius: 4px;
   padding: 6px;
 `;
 
 const CodeShell = (props) => {
-    const [ico, setIco] = React.useState(copyIco);
+  const [ico, setIco] = React.useState(copyIco);
 
-    const clickCopyButton = () => {
+  const clickCopyButton = () => {
-        let commands = '';
+    let commands = '';
-        if (props.commands.length > 1) {
+    if (props.commands.length > 1) {
-            for (let command of props.commands)
+      for (let command of props.commands) commands += command + '\n';
-                commands += command + '\n';
+    } else commands = props.commands;
-        } else commands = props.commands;
+    navigator.clipboard.writeText(commands).then((r) => console.log(r));
-        navigator.clipboard.writeText(commands).then(r => console.log(r));
+    setIco(checkIco);
-        setIco(checkIco);
+    setTimeout(() => {
-        setTimeout(() => {
+      setIco(copyIco);
-            setIco(copyIco);
+    }, 2000);
-        }, 3000);
+  };
-    };
 
-    const formatCommand = (command) => {
+  const formatCommand = (command) => {
-        if (command[0] === '\t') {
+    if (command[0] === '\t') {
-            return <>&nbsp;&nbsp;&nbsp;&nbsp;{formatCommand(command.slice(1))}</>;
+      return <>&nbsp;&nbsp;&nbsp;&nbsp;{formatCommand(command.slice(1))}</>;
-            /* eslint-disable */
+    }
-        } else if (command[0] === '\s') {
+    return command;
-            return <>&nbsp;{formatCommand(command.slice(1))}</>;
+  };
-        }
-        return command;
-    };
 
-    const renderCommands = () => {
+  const renderCommands = () => {
-        return (
+    return props.commands.map((command, index) => {
-            props.commands.map((command, index) => {
+      return (
-                return (
+        <Code
-                    <Code key={`command-${props.codeBlockIndex}-${index}`} as='li'
+          key={`command-${props.codeBlockIndex}-${index}`}
-                          before={!props.disablePrompt}>
+          as="li"
-                        {formatCommand(command)}
+          before={!props.disablePrompt}
-                    </Code>
+        >
-                );
+          {formatCommand(command)}
-            })
+        </Code>
-        );
+      );
-    };
+    });
+  };
 
-    return (
+  return (
-        <CodeShellStyle as='ul' maxWidth={props.maxWidth}>
+    <CodeShellStyle as="ul" maxWidth={props.maxWidth}>
-            <Svg position='absolute' top='12px' right='12px' cursor='pointer'
+      <Svg
-                 backgroundColor={theme.colors.white} src={ico} onClick={clickCopyButton}/>
+        position="absolute"
-            {ico === checkIco ? <CopiedMessageStyle>copied!</CopiedMessageStyle> : ''}
+        top="12px"
-            {renderCommands()}
+        right="12px"
-        </CodeShellStyle>
+        cursor="pointer"
-    );
+        backgroundColor={theme.colors.white}
+        src={ico}
+        onClick={clickCopyButton}
+      />
+      {ico === checkIco ? <CopiedMessageStyle>copied!</CopiedMessageStyle> : ''}
+      {renderCommands()}
+    </CodeShellStyle>
+  );
 };
 
-export default CodeShell;
+export default CodeShell;

src/components/specific_challenge/HowTo/sections/HowToContent.js

@@ -22,9 +22,7 @@ const HowToContent = (props) => {
       return (
         <CodeShell
           codeBlockIndex={0}
-          commands={[
+          commands={[props.userFullInfo.individualKey]}
-            props.userFullInfo.individualKey
-          ]}
         />
       );
     }
@@ -49,7 +47,7 @@ const HowToContent = (props) => {
         <Body as="p" margin="auto 0">
           Create a private git repository with the name
           <Medium as="span">&nbsp;{props.challengeName}</Medium>
-          .&nbsp;The name of the repository must match!
+          &nbsp;The name of the repository must match!
         </Body>
       </Grid>
       <Grid
@@ -59,8 +57,9 @@ const HowToContent = (props) => {
       >
         <CircleNumber number="2" />
         <Body as="p" margin="auto 0">
-          Add the following ssh key <Medium as="span">{props.userFullInfo ? '' : 'REPO_KEY_HERE'}</Medium> to
+          Add the following ssh key{' '}
-          your deploy keys in your git repository settings.
+          <Medium as="span">{props.userFullInfo ? '' : 'REPO_KEY_HERE'}</Medium>{' '}
+          to your deploy keys in your git repository settings.
         </Body>
       </Grid>
       {repoKeyRender()}