Contributing to Telescope project (part 3)
Published: 2021-12-10 16:24:01

## 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](https://github.com/Seneca-CDOT/telescope/pull/2524)
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](https://github.com/Seneca-CDOT/telescope/pull/2548)
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](https://github.com/Seneca-CDOT/telescope/pull/2531)
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.