Contributing to Telescope project (part 3)

Introduction

Hello everyone, this is part 3 where I'd like to talk more about the details of each issue that mentioned in part 2.

Process

First

Pull request for the first issue can be found here
To be honest, this issue only took me around 10 to 15 minutes to fix as it's about removing const fetch = require('node-fetch'); and changing it to const {fetch} = require('@senecacdot/satellite');. The thing is that you have to use a command to look for it git grep node-fetch.

Second

Pull request for the second issue can be found here
Because Telescope is written in React so I have to work with component most of the time. This is no exception. I created a dedicated component for the share button.

import { useState } from 'react';
import { Tooltip, IconButton, createStyles, Zoom } from '@material-ui/core';
import { makeStyles, Theme } from '@material-ui/core/styles';
import { withStyles } from '@material-ui/styles';
import CopyIcon from '@material-ui/icons/FileCopyOutlined';
import Check from '@material-ui/icons/Check';

type Props = {
  url: string;
};

const ButtonTooltip = withStyles({
  tooltip: {
    fontSize: '1.25rem',
    margin: 0,
  },
})(Tooltip);

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    copy: {
      fill: theme.palette.primary.main,
    },

    check: {
      fill: '#3fb950',
    },
  })
);

const ShareButton = ({ url }: Props) => {
  const classes = useStyles();

  const [isCopiedToClipboard, setIsCopiedToClipboard] = useState(false);

  const copyToClipboardEvent = () => {
    navigator.clipboard.writeText(url);
    setIsCopiedToClipboard(true);

    setTimeout(() => {
      setIsCopiedToClipboard(false);
    }, 3000);
  };

  return !isCopiedToClipboard ? (
    <ButtonTooltip title="Copy URL" arrow placement="top" TransitionComponent={Zoom}>
      <IconButton
        onClick={() => {
          copyToClipboardEvent();
        }}
      >
        <CopyIcon className={classes.copy} />
      </IconButton>
    </ButtonTooltip>
  ) : (
    <ButtonTooltip title="Copied" arrow placement="top" TransitionComponent={Zoom}>
      <IconButton>
        <Check className={classes.check} />
      </IconButton>
    </ButtonTooltip>
  );
};

export default ShareButton;

In the code above, as you can see, I tried to use as much material ui component as possible such as the CopyIcon, Check icon, and some class components. For the share button, when a user clicks it, it will be changed to the check button. It also shows tooltip to let user know what is happening. After adding the share button component, all I have to do is put it in both Posts/PostInfo.tsx and Posts/Post.tsx.

Third

Pull request for third issue can be found here
This is my most commented pull request I've ever had. Because different people have different preferences so it's difficult to just make one that fits all. And after that, I also have struggle with aligning it properly in different screen sizes. After struggling with that, I also had to make eslint happy as new esline rules just got merged into the main branch. After a while, I thought I would have done but a problem with search bar occurred. The problem was found when I pull new code from upstream and force push to my branch. At first, I found I introduced the bug, so I spent way too much time figuring out how to fix it. I almost gave up but it turned out that my code before I pulled from upstream was working just fine, so I'd believe that it was not me who introduced the bug. After that, I also had to adjust currentPost variable in order that it is side effect free.

This is the code that I added in Posts/Timeline.tsx

  const firstLength = pages[0].length;
  const getCurrentPost = (pageIndex: number, postIndex: number): number => {
    // this function takes 2 indexes from the 2-d posts array and length of the first array
    return pageIndex * firstLength + postIndex + 1;
  };

  const postsTimeline = pages.map((page, pageIndex): Array<ReactElement> | ReactElement =>
    page.map(({ id, url }, postIndex) => {
      return (
        <PostComponent
          postUrl={url}
          key={id}
          currentPost={getCurrentPost(pageIndex, postIndex)}
          totalPosts={totalPosts}
        />
      );
    })
  );

Apart from that, it's just about getting totalPosts, adjusting styling,...

Thank you for reading.