ronantakizawa/codereview-bench huggingface dataset:
Repository: thenewboston-developers/Website
File: src/components/PageTitle/index.tsx (TypeScript)

Code before:
import React, {FC} from 'react';
import {Helmet} from 'react-helmet-async';

export interface PageTitleProps {
  title: string;
  ogDescription?: string;
  ogImageUrl?: string;
  ogTitle?: string;
  ogType?: 'website' | 'article' | 'profile' | 'book';
  ogUrl?: string;
}

export const defaultOgDescription =
  'Learn to code, collaborate on projects, gain experience, build a community, and earn coins by contributing.';
export const defaultOgImageUrl = 'https://www.thenewboston.com/logo192.png';
export const defaultOgType = 'website';
export const defaultOgUrl = 'https://www.thenewboston.com/';

const PageTitle: FC<PageTitleProps> = ({
  title,
  ogDescription = defaultOgDescription,
  ogImageUrl = defaultOgImageUrl,
  ogTitle = `${title} | thenewboston`,
  ogType = defaultOgType,
  ogUrl = defaultOgUrl,
}) => {
  return (
    <Helmet>
      <title>{title} | thenewboston</title>
      <meta property="og:url" content={ogUrl} />
      <meta property="og:type" content={ogType} />
      <meta property="og:title" content={ogTitle} />
      <meta property="og:description" content={ogDescription} />
      <meta property="og:image" content={ogImageUrl} />
    </Helmet>
  );
};

export default PageTitle;


Review comment (suggestion):
Not really sure about this, but do think it would be good to have an object instead of different variables?

```
const defaultOg = {
  description: 'Hello',
  imageUrl: 'hello.jpg'
}
```

Code after:
import React, {FC} from 'react';
import {Helmet} from 'react-helmet-async';

export interface PageTitleProps {
  title: string;
  ogDescription?: string;
  ogImageUrl?: string;
  ogTitle?: string;
  ogType?: 'website' | 'article' | 'profile' | 'book';
  ogUrl?: string;
}

export const defaultOg = {
  description:
    'Learn to code, collaborate on projects, gain experience, build a community, and earn coins by contributing.',
  imageUrl: 'https://www.thenewboston.com/logo192.png',
  type: 'website',
  url: 'https://www.thenewboston.com/',
};

const PageTitle: FC<PageTitleProps> = ({
  title,
  ogDescription = defaultOg.description,
  ogImageUrl = defaultOg.imageUrl,
  ogTitle = `${title} | thenewboston`,
  ogType = defaultOg.type,
  ogUrl = defaultOg.url,
}) => {
  return (
    <Helmet>
      <title>{title} | thenewboston</title>
      <meta property="og:url" content={ogUrl} />
      <meta property="og:type" content={ogType} />
      <meta property="og:title" content={ogTitle} />
      <meta property="og:description" content={ogDescription} />
      <meta property="og:image" content={ogImageUrl} />
    </Helmet>
  );
};

export default PageTitle;
Repository: thenewboston-developers/Website
File: src/components/RequiredAsterisk/index.tsx (TypeScript)

Code before:
import React, {memo} from 'react';
import clsx from 'clsx';
import {SFC} from 'types/generic';
import * as S from './Style';

const RequiredAsterisk: SFC = ({className}) => {
  return (
    <S.RequiredAsterisk data-testid="RequiredAsterisk" className={clsx('RequiredAsterisk', className)}>
      *
    </S.RequiredAsterisk>
  );
};

export default memo(RequiredAsterisk);


Review comment (suggestion):
```suggestion
    <S.RequiredAsterisk data-testid="RequiredAsterisk" className={className}>
```

Code after:
import React, {memo} from 'react';
import {SFC} from 'types/generic';
import * as S from './Style';

const RequiredAsterisk: SFC = ({className}) => {
  return (
    <S.RequiredAsterisk data-testid="RequiredAsterisk" className={className}>
      *
    </S.RequiredAsterisk>
  );
};

export default memo(RequiredAsterisk);
Repository: thenewboston-developers/Website
File: src/components/SlideUp/index.tsx (TypeScript)

Code before:
import React from 'react';
import {createPortal} from 'react-dom';
import clsx from 'clsx';
import {SFC} from 'types/generic';
import {bemify} from '@thenewboston/utils';
import * as S from './Style';

interface ComponentProps {
  close(): void;
}

const SlideUp: SFC<ComponentProps> = ({children, className, close}) => {
  return createPortal(
    <>
      <S.SlideUp
        className={`${className}"__overlay"`}
        onClick={close}
        role="button"
        tabIndex={0}
        data-testid="SlideUp__overlay"
      />
      <S.SlideUp className={clsx('SlideUp', className)} data-testid="SlideUp">
        <S.SlideUp
          className={clsx('SlideUp__content', {...bemify(className, '__content')})}
          data-testid="SlideUp__content"
        >
          {children}
        </S.SlideUp>
      </S.SlideUp>
    </>,
    document.getElementById('slide-up-root')!,
  );
};

export default SlideUp;


Review comment (suggestion):
`className` should only work if a `className` prop is passed in. Remove `SlideUp` class, as it's serving no purpose here. These were used in scss files; not needed now.

```suggestion
      <S.SlideUp className={className} data-testid="SlideUp">
```

Code after:
import React from 'react';
import {createPortal} from 'react-dom';
import clsx from 'clsx';
import {SFC} from 'types/generic';
import {bemify} from '@thenewboston/utils';
import * as S from './Style';

interface ComponentProps {
  close(): void;
}

const SlideUp: SFC<ComponentProps> = ({children, className, close}) => {
  return createPortal(
    <>
      <S.SlideUpOverlay
        className={`${className}"__overlay"`}
        onClick={close}
        role="button"
        tabIndex={0}
        data-testid="SlideUp__overlay"
      />
      <S.SlideUp className={className} data-testid="SlideUp">
        <S.SlideUpContent className={clsx({...bemify(className, '__content')})} data-testid="SlideUp__content">
          {children}
        </S.SlideUpContent>
      </S.SlideUp>
    </>,
    document.getElementById('slide-up-root')!,
  );
};

export default SlideUp;
Repository: thenewboston-developers/Website
File: src/components/SlideUp/index.tsx (TypeScript)

Code before:
import React from 'react';
import {createPortal} from 'react-dom';
import clsx from 'clsx';
import {SFC} from 'types/generic';
import {bemify} from '@thenewboston/utils';
import * as S from './Style';

interface ComponentProps {
  close(): void;
}

const SlideUp: SFC<ComponentProps> = ({children, className, close}) => {
  return createPortal(
    <>
      <S.SlideUp
        className={`${className}"__overlay"`}
        onClick={close}
        role="button"
        tabIndex={0}
        data-testid="SlideUp__overlay"
      />
      <S.SlideUp className={clsx('SlideUp', className)} data-testid="SlideUp">
        <S.SlideUp
          className={clsx('SlideUp__content', {...bemify(className, '__content')})}
          data-testid="SlideUp__content"
        >
          {children}
        </S.SlideUp>
      </S.SlideUp>
    </>,
    document.getElementById('slide-up-root')!,
  );
};

export default SlideUp;


Review comment (suggestion):
```suggestion
          className={clsx({...bemify(className, '__content')}}
```

Code after:
import React from 'react';
import {createPortal} from 'react-dom';
import clsx from 'clsx';
import {SFC} from 'types/generic';
import {bemify} from '@thenewboston/utils';
import * as S from './Style';

interface ComponentProps {
  close(): void;
}

const SlideUp: SFC<ComponentProps> = ({children, className, close}) => {
  return createPortal(
    <>
      <S.SlideUpOverlay
        className={`${className}"__overlay"`}
        onClick={close}
        role="button"
        tabIndex={0}
        data-testid="SlideUp__overlay"
      />
      <S.SlideUp className={className} data-testid="SlideUp">
        <S.SlideUpContent className={clsx({...bemify(className, '__content')})} data-testid="SlideUp__content">
          {children}
        </S.SlideUpContent>
      </S.SlideUp>
    </>,
    document.getElementById('slide-up-root')!,
  );
};

export default SlideUp;
Repository: thenewboston-developers/Website
File: src/components/SlideUp/Style.ts (TypeScript)

Code before:
import styled, {keyframes} from 'styled-components';
import zIndex from 'styles/zIndex';
import colors from 'styles/colors';

export const SlideUp = styled.div`
  bottom: 0;
  position: absolute;
  width: 100vw;
  z-index: ${zIndex.slideup};
`;

export const SlideUpContent = styled.div`
  __content {
    background: ${colors.white};
    box-shadow: 0px -3px 12px rgba(4, 34, 53, 0.25);
    padding: 24px 30px 40px;
  }
`;

const addOverlay = keyframes`
    from {
        background: rgba(0, 0, 0, 0);
    }
    to {
        background: rgba(0, 0, 0, 0.3);
    }
}
`;

export const SlideUpOverlay = styled.div`
  animation: ${addOverlay} 0.3s forwards;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: ${zIndex.slideupOverlay};
`;


Review comment (suggestion):
```suggestion
export const SlideUpContent = styled.div`
    background: ${colors.white};
    box-shadow: 0px -3px 12px rgba(4, 34, 53, 0.25);
    padding: 24px 30px 40px;
`;
```

Code after:
import styled, {keyframes} from 'styled-components';
import zIndex from 'styles/zIndex';
import colors from 'styles/colors';

export const SlideUp = styled.div`
  bottom: 0;
  position: absolute;
  width: 100vw;
  z-index: ${zIndex.slideup};
`;

export const SlideUpContent = styled.div`
  background: ${colors.white};
  box-shadow: 0px -3px 12px rgba(4, 34, 53, 0.25);
  padding: 24px 30px 40px;
`;

const addOverlay = keyframes`
    from {
        background: rgba(0, 0, 0, 0);
    }
    to {
        background: rgba(0, 0, 0, 0.3);
    }
}
`;

export const SlideUpOverlay = styled.div`
  animation: ${addOverlay} 0.3s forwards;
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: ${zIndex.slideupOverlay};
`;
Repository: thenewboston-developers/Website
File: src/components/ProgressiveImage/Styles.ts (TypeScript)

Code before:
import styled, {css} from 'styled-components';

interface ProgressiveImageProps {
  IsLoaded?: boolean;
}

const CenteredPosition = css`
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
`;

export const ProgressiveImage = styled.div`
  position: relative;
`;

export const ProgressiveImagePlaceholder = styled.img<ProgressiveImageProps>`
  ${CenteredPosition}
  filter: blur(20px);
  height: 100%;
  object-fit: contain;
  width: 100%;
  opacity: ${({IsLoaded}) => (IsLoaded ? '0' : '1')};
`;

export const ProgressiveImageReal = styled.img<ProgressiveImageProps>`
  ${CenteredPosition}
  height: 100%;
  object-fit: contain;
  transition: filter 0.75s linear;
  width: 100%;
  filter: ${({IsLoaded}) => (IsLoaded ? 'blur(0px)' : 'blur(20px)')};
`;


Review comment (suggestion):
```suggestion
  object-fit: contain;
  opacity: ${({IsLoaded}) => (IsLoaded ? '0' : '1')};
  width: 100%;
```

Code after:
import styled, {css} from 'styled-components';

interface ProgressiveImageProps {
  isLoaded?: boolean;
}

const CenteredPosition = css`
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
`;

export const ProgressiveImage = styled.div`
  position: relative;
`;

export const ProgressiveImagePlaceholder = styled.img<ProgressiveImageProps>`
  ${CenteredPosition}
  filter: blur(20px);
  height: 100%;
  object-fit: contain;
  opacity: ${({isLoaded}) => (isLoaded ? '0' : '1')};
  width: 100%;
`;

export const ProgressiveImageReal = styled.img<ProgressiveImageProps>`
  ${CenteredPosition}
  filter: ${({isLoaded}) => (isLoaded ? 'blur(0px)' : 'blur(20px)')};
  height: 100%;
  object-fit: contain;
  transition: filter 0.75s linear;
  width: 100%;
`;
Repository: thenewboston-developers/Website
File: src/components/Loader/index.tsx (TypeScript)

Code before:
import React, {memo} from 'react';
import clsx from 'clsx';
import {IconType} from '@thenewboston/ui';
import {SFC} from 'types/generic';

import * as S from './Styles';

const Loader: SFC = ({className}) => {
  return <S.Loader className={clsx(className)} icon={IconType.loading} size={15.35} dataTestId="Loader" />;
};

export default memo(Loader);


Review comment (suggestion):
```suggestion
  return <S.Loader className={className} icon={IconType.loading} size={15.35} dataTestId="Loader" />;
```

Code after:
import React, {memo} from 'react';
import {IconType} from '@thenewboston/ui';

import {SFC} from 'types/generic';

import * as S from './Styles';

const Loader: SFC = ({className}) => {
  return <S.Loader className={className} icon={IconType.loading} size={15.35} dataTestId="Loader" />;
};

export default memo(Loader);
Repository: thenewboston-developers/Website
File: src/components/GoToTop/index.tsx (TypeScript)

Code before:

const GoToTop: SFC = ({className}) => {
  const [show, setShow] = useState<boolean>(false);

  const handleScroll = useCallback(() => {
    if (window.pageYOffset > 100) {
      if (!show) setShow(true);
    } else {
      setShow(false);
    }
  }, [show]);

  const scrollTop = () => {
    window.scrollTo({behavior: 'smooth', top: 0});
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [handleScroll]);

  return (
    <>
      {show && (
        <S.GoToTop
          className={clsx(className)}
          dataTestId="GoToTop"
          icon={IconType.chevronUp}
          size={50}
          onClick={scrollTop}
        />
      )}
    </>
  );
};
export default GoToTop;


Review comment (suggestion):
```suggestion
          className={className}
```

Code after:
import * as S from './Styles';

const GoToTop: SFC = ({className}) => {
  const [show, setShow] = useState<boolean>(false);

  const handleScroll = useCallback(() => {
    if (window.pageYOffset > 100) {
      if (!show) setShow(true);
    } else {
      setShow(false);
    }
  }, [show]);

  const scrollTop = () => {
    window.scrollTo({behavior: 'smooth', top: 0});
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [handleScroll]);

  return (
    <>
      {show && (
        <S.GoToTop className={className} dataTestId="GoToTop" icon={IconType.chevronUp} size={50} onClick={scrollTop} />
      )}
    </>
  );
};
export default GoToTop;
Repository: thenewboston-developers/Website
File: src/components/GoToTop/Styles.ts (TypeScript)

Code before:
import styled, {keyframes} from 'styled-components';
import {Icon} from '@thenewboston/ui';
import zIndex from 'styles/zIndex';
import colors from 'styles/colors';

const fadeIn = keyframes`
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
`;

export const GoToTop = styled(Icon)`
  animation: ${fadeIn} 0.3s ease-out;
  background: ${colors.palette.blue['900']};
  border-radius: 50%;
  bottom: 24px;
  color: ${colors.white};
  cursor: pointer;
  height: 36px;
  opacity: 1;
  position: fixed;
  right: 24px;
  width: 36px;
  z-index: ${zIndex.goToTop};
`;


Review comment (suggestion):
Nice to have a line break b/w 3rd party imports and local imports
```suggestion

import zIndex from 'styles/zIndex';
import colors from 'styles/colors';
```

Code after:
import styled, {keyframes} from 'styled-components';
import {Icon} from '@thenewboston/ui';

import zIndex from 'styles/zIndex';
import colors from 'styles/colors';

const fadeIn = keyframes`
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
`;

export const GoToTop = styled(Icon)`
  animation: ${fadeIn} 0.3s ease-out;
  background: ${colors.palette.blue['900']};
  border-radius: 50%;
  bottom: 24px;
  color: ${colors.white};
  cursor: pointer;
  height: 36px;
  opacity: 1;
  position: fixed;
  right: 24px;
  width: 36px;
  z-index: ${zIndex.goToTop};
`;
Repository: thenewboston-developers/Website
File: src/components/GoToTop/index.tsx (TypeScript)

Code before:
import React, {useCallback, useEffect, useState} from 'react';
import clsx from 'clsx';
import {IconType} from '@thenewboston/ui';
import {SFC} from 'types/generic';
import * as S from './Styles';

const GoToTop: SFC = ({className}) => {
  const [show, setShow] = useState<boolean>(false);

  const handleScroll = useCallback(() => {
    if (window.pageYOffset > 100) {
      if (!show) setShow(true);
    } else {
      setShow(false);
    }
  }, [show]);

  const scrollTop = () => {
    window.scrollTo({behavior: 'smooth', top: 0});
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [handleScroll]);

  return (
    <>
      {show && (
        <S.GoToTop
          className={clsx(className)}

Review comment (suggestion):
line break before style imports too

```suggestion

import * as S from './Styles';
```

Code after:
import React, {useCallback, useEffect, useState} from 'react';
import {IconType} from '@thenewboston/ui';

import {SFC} from 'types/generic';

import * as S from './Styles';

const GoToTop: SFC = ({className}) => {
  const [show, setShow] = useState<boolean>(false);

  const handleScroll = useCallback(() => {
    if (window.pageYOffset > 100) {
      if (!show) setShow(true);
    } else {
      setShow(false);
    }
  }, [show]);

  const scrollTop = () => {
    window.scrollTo({behavior: 'smooth', top: 0});
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [handleScroll]);

  return (
    <>
      {show && (
        <S.GoToTop className={className} dataTestId="GoToTop" icon={IconType.chevronUp} size={50} onClick={scrollTop} />
Repository: thijsvanloef/palworld-server-docker
File: scripts/update.sh (Shell)

Code before:
#!/bin/bash

if [ "${UPDATE_ON_BOOT}" = false ]; then
    echo "Update on Boot needs to be enabled for auto updating"
    exit 1
fi

CURRENTBUILD=$(awk '/buildid/{ print $2 }' < palworld/steamapps/appmanifest_2394010.acf)
TARGETBUILD=$(curl https://api.steamcmd.net/v1/info/2394010 --silent | grep -P '"public": {"buildid": "\d+"' -o | sed -r 's/.*("[0-9]+")$/\1/')

if [ "$CURRENTBUILD" != "$TARGETBUILD" ]; then
    echo "New Build was found. Updating the server from $CURRENTBUILD to $TARGETBUILD."
    if [ "${RCON_ENABLED}" = true ]; then
        rm /palworld/steamapps/appmanifest_2394010.acf
        rcon-cli -c /home/steam/server/rcon.yaml "broadcast The_Server_will_update_in_${WARN_MINUTES}_Minutes"
        sleep "${WARN_MINUTES}m"
        rcon-cli -c /home/steam/server/rcon.yaml save
        rcon-cli -c /home/steam/server/rcon.yaml "shutdown 1"
    else
        kill -SIGTERM "$(pidof PalServer-Linux-Test)"
    fi
else
    echo "The Server is up to date!"
fi

Review comment (suggestion):
I don't recommend permitting auto updates if rcon is not enabled.
Doing so would mean no saving and an unsafe shutdown of the server.
```suggestion
        echo "An update is available however auto updating without rcon is not supported"
```

Code after:
#!/bin/bash

if [ "${UPDATE_ON_BOOT}" = false ]; then
    echo "Update on Boot needs to be enabled for auto updating"
    exit 0
fi

temp_file=$(mktemp)
http_code=$(curl https://api.steamcmd.net/v1/info/2394010 --output "$temp_file" --silent --location --write-out "%{http_code}")

CURRENTBUILD=$(awk '/buildid/{ print $2 }' < /palworld/steamapps/appmanifest_2394010.acf)
TARGETBUILD=$(grep -P '"public": {"buildid": "\d+"' -o <"$temp_file" | sed -r 's/.*("[0-9]+")$/\1/')
rm "$temp_file"

if [ "$http_code" -ne 200 ]; then
    echo "There was a problem reaching the Steam api. Unable to check for updates!"
    exit 1
fi

if [ -z "$TARGETBUILD" ]; then
    echo "The server response does not contain the expected BuildID. Unable to check for updates!"
    exit 1
fi

if [ "$CURRENTBUILD" != "$TARGETBUILD" ]; then
    echo "New Build was found. Updating the server from $CURRENTBUILD to $TARGETBUILD."
    if [ "${RCON_ENABLED}" = true ]; then
        rm /palworld/steamapps/appmanifest_2394010.acf
        rcon-cli -c /home/steam/server/rcon.yaml "broadcast The_Server_will_update_in_${AUTO_UPDATE_WARN_MINUTES}_Minutes"
        sleep "${AUTO_UPDATE_WARN_MINUTES}m"
        backup
        rcon-cli -c /home/steam/server/rcon.yaml "shutdown 1"
    else
        echo "An update is available however auto updating without rcon is not supported"
    fi
else
    echo "The Server is up to date!"
fi
Repository: thijsvanloef/palworld-server-docker
File: scripts/update.sh (Shell)

Code before:
#!/bin/bash

if [ "${UPDATE_ON_BOOT}" = false ]; then
    echo "Update on Boot needs to be enabled for auto updating"
    exit 1
fi

CURRENTBUILD=$(awk '/buildid/{ print $2 }' < palworld/steamapps/appmanifest_2394010.acf)
TARGETBUILD=$(curl https://api.steamcmd.net/v1/info/2394010 --silent | grep -P '"public": {"buildid": "\d+"' -o | sed -r 's/.*("[0-9]+")$/\1/')

if [ "$CURRENTBUILD" != "$TARGETBUILD" ]; then
    echo "New Build was found. Updating the server from $CURRENTBUILD to $TARGETBUILD."
    if [ "${RCON_ENABLED}" = true ]; then
        rm /palworld/steamapps/appmanifest_2394010.acf
        rcon-cli -c /home/steam/server/rcon.yaml "broadcast The_Server_will_update_in_${WARN_MINUTES}_Minutes"
        sleep "${WARN_MINUTES}m"
        rcon-cli -c /home/steam/server/rcon.yaml save
        rcon-cli -c /home/steam/server/rcon.yaml "shutdown 1"
    else
        kill -SIGTERM "$(pidof PalServer-Linux-Test)"
    fi
else
    echo "The Server is up to date!"
fi

Review comment (suggestion):
Probably a good idea to run a backup before the update.
```suggestion
        backup
```

Code after:
#!/bin/bash

if [ "${UPDATE_ON_BOOT}" = false ]; then
    echo "Update on Boot needs to be enabled for auto updating"
    exit 0
fi

temp_file=$(mktemp)
http_code=$(curl https://api.steamcmd.net/v1/info/2394010 --output "$temp_file" --silent --location --write-out "%{http_code}")

CURRENTBUILD=$(awk '/buildid/{ print $2 }' < /palworld/steamapps/appmanifest_2394010.acf)
TARGETBUILD=$(grep -P '"public": {"buildid": "\d+"' -o <"$temp_file" | sed -r 's/.*("[0-9]+")$/\1/')
rm "$temp_file"

if [ "$http_code" -ne 200 ]; then
    echo "There was a problem reaching the Steam api. Unable to check for updates!"
    exit 1
fi

if [ -z "$TARGETBUILD" ]; then
    echo "The server response does not contain the expected BuildID. Unable to check for updates!"
    exit 1
fi

if [ "$CURRENTBUILD" != "$TARGETBUILD" ]; then
    echo "New Build was found. Updating the server from $CURRENTBUILD to $TARGETBUILD."
    if [ "${RCON_ENABLED}" = true ]; then
        rm /palworld/steamapps/appmanifest_2394010.acf
        rcon-cli -c /home/steam/server/rcon.yaml "broadcast The_Server_will_update_in_${AUTO_UPDATE_WARN_MINUTES}_Minutes"
        sleep "${AUTO_UPDATE_WARN_MINUTES}m"
        backup
        rcon-cli -c /home/steam/server/rcon.yaml "shutdown 1"
    else
        echo "An update is available however auto updating without rcon is not supported"
    fi
else
    echo "The Server is up to date!"
fi