update linter to work with ts/tsx files

.eslintrc.js

@@ -10,10 +10,13 @@ module.exports = {
   extends: [
     'airbnb',
     'plugin:react/recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
   ],
-  parser: '@babel/eslint-parser',
+  parser: '@typescript-eslint/parser',
   plugins: [
     'react',
+    '@typescript-eslint',
   ],
   rules: {
     semi: ['error', 'always'],
@@ -35,13 +38,22 @@ module.exports = {
     }],
     'react/jsx-filename-extension': [
       1,
-      { extensions: ['.js', '.jsx'] },
+      { extensions: ['.js', '.jsx', '.tsx', '.ts'] },
     ],
     'react/jsx-uses-vars': [2],
     'linebreak-style': ['error', process.env.OS === 'Windows_NT' ? 'windows' : 'unix'],
     'react/no-did-update-set-state': 0,
     'no-param-reassign': ['error', { props: true, ignorePropertyModificationsFor: ['user', 'req', 'res'] }],
     'import/no-named-as-default': 0,
     'react/jsx-props-no-spreading': 'off',
+    '@typescript-eslint/no-var-requires': 0,
+    'import/extensions': 0,
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
   },
 };

client/src/components/common/common.tsx

@@ -1,15 +1,14 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 import TwitterIcon from '@mui/icons-material/Twitter';
 import GoogleIcon from '@mui/icons-material/Google';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import DownloadDoneIcon from '@mui/icons-material/DownloadDone';
 import Button from '@mui/material/Button';
 import ButtonGroup from '@mui/material/ButtonGroup';
-import {providerIcons} from '../../interfaces'
+import { providerIconsType } from '../../interfaces';
 import './common.scss';
 
-
-export const getProviderIcons = ({ fontSize }: {fontSize: number}): providerIcons => (
+export const getProviderIcons = ({ fontSize }: {fontSize: number}): providerIconsType => (
   {
     twitter: { icon: <TwitterIcon style={{ fontSize }} />, color: '#1DA1F2' },
     google: { icon: <GoogleIcon style={{ fontSize }} />, color: '#4285F4' },
@@ -38,7 +37,10 @@ export function Loading({ imagesLoaded, ready }: LoadingProps) {
     </div>
   );
 }
-
+Loading.defaultProps = {
+  imagesLoaded: undefined,
+  ready: undefined,
+};
 
 interface UserPinsSelectorProps {
   displaySetting: string,

client/src/components/cover/cover.tsx

@@ -19,7 +19,7 @@ function Cover() {
           </div>
         </div>
         <div>
-          <LoginButtons guest={() => {}} />
+          <LoginButtons guest={() => ({})} />
         </div>
       </div>
     </div>

client/src/components/home/home.tsx

@@ -4,17 +4,17 @@ import { connect } from 'react-redux';
 import RESTcall from '../../crud';
 import ImageBuild from '../imagebuild/Imagebuild';
 import { shuffleImages, getFilteredPins } from '../../utils/utils';
-import { Pin, user, search } from '../../interfaces';
+import { PinType, userType, searchType } from '../../interfaces';
 
-interface HomeProps  {
-  user: user
-  search: search
-};
+interface HomeProps {
+  user: userType
+  search: searchType
+}
 
 interface HomeState {
-  pinList: Pin[],
+  pinList: PinType[],
   ready: boolean
-};
+}
 
 export class Home extends Component<HomeProps, HomeState> {
 
@@ -57,6 +57,6 @@ export class Home extends Component<HomeProps, HomeState> {
 
 }
 
-export const mapStateToProps = ({user, search}: HomeProps) => ({user, search});
+export const mapStateToProps = ({ user, search }: HomeProps) => ({ user, search });
 
 export default connect(mapStateToProps)(Home);

client/src/components/imagebuild/MasonryPins.js

@@ -26,7 +26,7 @@ function MasonryPins({
             role="button"
             className="image-box"
             onClick={(e) => pinEnlarge(e, element)}
-            onKeyDown={() => {}}
+            onKeyDown={() => ({})}
             tabIndex={0}
           >
             <img

client/src/components/profile/Profile.tsx

@@ -8,7 +8,7 @@ import ImageBuild from '../imagebuild/Imagebuild';
 import { Loading, getProviderIcons, UserPinsSelector } from '../common/common';
 import SignIn from '../signin/signin';
 import RESTcall from '../../crud';
-import {providerIcons as providerIconTypes, user} from '../../interfaces';
+import { providerIconsType, userType } from '../../interfaces';
 import error from '../mypins/error.png';
 
 const providerIcons = getProviderIcons({ fontSize: 25 });
@@ -24,7 +24,7 @@ function Profile() {
   const { userInfo }:{userInfo: string} = useParams();
   const { pathname } = useLocation();
   const history = useHistory();
-  const loggedInUser = useSelector(({user}:{user: user}) => user);
+  const loggedInUser = useSelector(({ user }:{user: userType}) => user);
 
   const getProfileData = async () => {
     try {
@@ -95,13 +95,16 @@ function Profile() {
         >
           PROFILE
         </Typography>
-        <Avatar sx={{ bgcolor: providerIcons[retrievedUser.service as keyof providerIconTypes].color, mt: 3 }}>
-          {providerIcons[retrievedUser.service as keyof providerIconTypes].icon}
+        <Avatar sx={{
+          bgcolor: providerIcons[retrievedUser.service as keyof providerIconsType].color, mt: 3,
+        }}
+        >
+          {providerIcons[retrievedUser.service as keyof providerIconsType].icon}
         </Avatar>
         <Typography variant="h6" sx={{ mt: 3 }}>{retrievedUser.displayName}</Typography>
         <UserPinsSelector
           displaySetting={displaySetting}
-          setDisplaySetting={(val) => setDisplaySetting(val)}
+          setDisplaySetting={(val: string) => setDisplaySetting(val)}
         />
       </div>
 

client/src/components/signin/loginbuttons.tsx

@@ -4,11 +4,10 @@ import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import { connect } from 'react-redux';
 import { setGuest } from '../../actions/authentication';
 import { getProviderIcons } from '../common/common';
-import { user, providerIcons, providers } from '../../interfaces'
+import { userType, providerIconsType, providersType } from '../../interfaces';
 import './loginbuttons.scss';
 
-
-export const mapStateToProps = ({ user }: {user: user}) => ({ user });
+export const mapStateToProps = ({ user }: {user: userType}) => ({ user });
 
 const actionCreators = {
   setGuest,
@@ -19,12 +18,12 @@ const handleLogin = (loc: string) => { // twitter/ google authentication
 };
 
 export function ProviderButton({ service }: {service: string}) {
-  const providerIcons: providerIcons = getProviderIcons({ fontSize: 25 });
+  const providerIcons: providerIconsType = getProviderIcons({ fontSize: 25 });
   return (
     <Button
       id={`${service}loginbutton`}
       variant="outlined"
-      startIcon={providerIcons[service as keyof providerIcons].icon}
+      startIcon={providerIcons[service as keyof providerIconsType].icon}
       onClick={() => handleLogin(`/auth/${service}`)}
       onMouseDown={(e) => e.preventDefault()}
     >
@@ -34,7 +33,7 @@ export function ProviderButton({ service }: {service: string}) {
 }
 
 interface LoginButtonsProps{
-  user: user
+  user: userType
   setGuest: (path: string) => void
   guest: () => void
 }
@@ -64,7 +63,9 @@ export class LoginButtons extends React.Component<LoginButtonsProps> {
 
         {
           providerKeys.map((service) => {
-            if (providers[service as keyof providers]) return <ProviderButton key={service} service={service} />;
+            if (providers[service as keyof providersType]) {
+              return <ProviderButton key={service} service={service} />;
+            }
             return null;
           })
         }
@@ -75,4 +76,3 @@ export class LoginButtons extends React.Component<LoginButtonsProps> {
 }
 
 export default connect(mapStateToProps, actionCreators)(LoginButtons);
-

client/src/components/signin/signin.tsx

@@ -1,4 +1,4 @@
-import React, {createRef} from 'react';
+import React, { createRef } from 'react';
 import LoginButtons from './loginbuttons';
 import {
   delay,
@@ -11,10 +11,12 @@ interface SignInProps{
 
 interface SignInState {
   show: boolean
-};
+}
 
 export class SignIn extends React.Component<SignInProps, SignInState> {
 
+  private signInModal = createRef<HTMLDivElement>();
+
   constructor(props: SignInProps) {
     super(props);
     this.state = {
@@ -23,10 +25,8 @@ export class SignIn extends React.Component<SignInProps, SignInState> {
     this.signInModal = React.createRef<HTMLInputElement>();
   }
 
-  private signInModal = createRef<HTMLDivElement>();
-
   componentDidMount() {
-    if(this.signInModal.current !== null){
+    if (this.signInModal.current !== null) {
       this.signInModal.current.focus();
     }
     this.setState({ show: true });

client/src/index.d.ts

@@ -1 +1 @@
-declare module '*.png';
+declare module '*.png';

client/src/interfaces.tsx → client/src/interfaces.ts

@@ -1,57 +1,57 @@
-import { ReactElement } from "react"
+import { ReactElement } from 'react';
 
-export interface Pinner {
+export interface PinnerType {
     name: string,
     service: string,
     userId: string
 }
 
-export interface comment {
+export interface commentType {
     _id: string,
     displayName: string,
     comment: string,
     createdAt: string
 }
 
-export interface tag {
+export interface tagType {
     _id: string,
     tag: string,
 }
 
-export interface Pin {
+export interface PinType {
     _id: string,
     imgDescription: string,
     imgLink: string,
     owner: { name: string, service: string, userId: string },
-    savedBy: Pinner[],
+    savedBy: PinnerType[],
     owns: boolean,
     hasSaved: boolean,
     createdAt: string,
-    comments: comment[],
-    tags: tag[],
+    comments: commentType[],
+    tags: tagType[],
 }
 
-export interface providers {
+export interface providersType {
     twitter: boolean,
     google: boolean,
     github: boolean
   }
 
-export interface user {
+export interface userType {
     authenticated: boolean,
     userIp: string,
     username: string | null,
     displayName: string | null,
-    providers: providers
+    providers: providersType
 }
 
-export interface search {
+export interface searchType {
     term: string | null,
     tagSearch: boolean
 }
 
-export interface providerIcons {
+export interface providerIconsType {
     twitter: {icon: ReactElement, color: string},
     google: {icon: ReactElement, color: string},
     github: {icon: ReactElement, color: string}
-  } 
+  }