Created Interface Folder

* Fixed some syntax
* Added PostType to interfaces
* Added some comments

src/frontend/next/src/components/Post/Post.tsx

@@ -1,28 +1,20 @@
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 
 import useSWR from 'swr';
 import 'highlight.js/styles/github.css';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import { Box, Grid, Typography, ListSubheader, createStyles } from '@material-ui/core';
+import { PostType } from '../../interfaces';
 
-// For style, need to add:
+// For style, need to add to "index.tsx"
 // import '../styles/telescope-post-content.css';
+// See https://github.com/Seneca-CDOT/telescope/issues/1548 for discussion.
 
-interface Props {
+type Props = {
   postUrl: string;
-}
-
-interface DataItem {
-  feed: { link: string; author: string };
-  id: string;
-  post: string;
-  title: string;
-  updated: string;
-  url: string;
-  html: string;
-}
+};
 
-const useStyles = makeStyles((theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       padding: 0,
@@ -113,6 +105,7 @@ const formatPublishedDate = (dateString: string) => {
 
 const Post = ({ postUrl }: Props) => {
   const classes = useStyles();
+  // TODO: Switch this over to useSWR
   // We need a ref to our post content, which we inject into a <section> below.
   const sectionEl = useRef(null);
   // Grab the post data from our backend so we can render it
@@ -121,7 +114,7 @@ const Post = ({ postUrl }: Props) => {
     return res.json();
   };
 
-  const { data: post, error } = useSWR<DataItem>(postUrl, getData);
+  const { data: post, error } = useSWR<PostType>(postUrl, getData);
   const [expandHeader, setExpandHeader] = useState(false);
 
   if (error) {

src/frontend/next/src/components/Posts/LoadAutoScroll.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
-import { Container, Button, Grid, createStyles } from '@material-ui/core';
+import { Container, Button, Grid, createStyles, Theme } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 
-interface Scroll {
+type Scroll = {
   onScroll: Function;
-}
+};
 
-const useStyles = makeStyles((theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     content: {
       '& > *': {

src/frontend/next/src/components/Posts/Timeline.tsx

@@ -1,18 +1,18 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 import { Container, createStyles, Grid } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import Post from '../Post/Post';
 import Spinner from '../Spinner/Spinner.jsx';
 import LoadAutoScroll from './LoadAutoScroll';
 import useSiteMetaData from '../../hooks/use-site-metadata';
 
-interface Props {
+type Props = {
   pages: Array<any> | undefined;
   nextPage: Function;
-}
+};
 
-const useStyles = makeStyles((theme) =>
+const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       padding: 0,

src/frontend/next/src/interfaces/index.tsx

@@ -0,0 +1,14 @@
+export type Feed = {
+  link: string;
+  author: string;
+};
+
+export type PostType = {
+  feed: Feed;
+  id: string;
+  post: string;
+  title: string;
+  updated: string;
+  url: string;
+  html: string;
+};