Fix cleanup

I did it wrong

jsconfig.json

@@ -0,0 +1,5 @@
+{
+    "compilerOptions": {
+        "baseUrl": "src"
+    }
+}

src/components/App/App.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import './App.css'
 
-import Header from 'components/Header/Header'
-import Main from 'Main/Main'
+import Header from '~components/Header/Header'
+import Main from '~components/Main/Main'
 
 function App() {
     return (   

src/components/Header/Header.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 
-import Button from 'components/Button/Button'
-import UnauthMenu from 'components/UnauthMenu/UnauthMenu'
+import Button from '~components/Button/Button'
+import UnauthMenu from '~components/UnauthMenu/UnauthMenu'
 
 import './Header.css'
 

src/components/LoginModal/LoginModal.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import Portal from '../../Portal'
+import Portal from '~utils/Portal'
 
-import Modal from '../Modal/Modal'
-import Overlay from '../Overlay/Overlay'
+import Modal from '~components/Modal/Modal'
+import Overlay from '~components/Overlay/Overlay'
 
 const LoginModal = (close: () => null ) => {
     return (

src/components/Main/Main.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { Switch, Route } from 'react-router-dom'
 
-import New from '../routes/New/New'
-import Party from '../routes/Party/Party'
-import Parties from '../routes/Parties/Parties'
+import New from '~routes/New/New'
+import Party from '~routes/Party/Party'
+import Parties from '~routes/Parties/Parties'
 
 // The Main component renders one of the three provided
 // Routes (provided that one matches). Both the /roster

src/components/SearchModal/SearchModal.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import Portal from 'Portal'
+import Portal from '~utils/Portal'
 
-import Modal from 'components/Modal/Modal'
-import Overlay from 'components/Overlay/Overlay'
-import WeaponResult from 'components/WeaponResult/WeaponResult'
+import Modal from '~components/Modal/Modal'
+import Overlay from '~components/Overlay/Overlay'
+import WeaponResult from '~components/WeaponResult/WeaponResult'
 
 import './SearchModal.css'
 

src/components/SignupModal/SignupModal.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import Portal from 'Portal'
+import Portal from '~utils/Portal'
 
-import Modal from 'components/Modal/Modal'
-import Overlay from 'components/Overlay/Overlay'
+import Modal from '~components/Modal/Modal'
+import Overlay from '~components/Overlay/Overlay'
 
 const SignupModal = ({ close }) => {
     return (

src/components/UnauthMenu/UnauthMenu.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import './UnauthMenu.css'
 
-import LoginModal from 'components/LoginModal/LoginModal'
-import SignupModal from 'components/SignupModal/SignupModal'
+import LoginModal from '~components/LoginModal/LoginModal'
+import SignupModal from '~components/SignupModal/SignupModal'
 
-import { useModal as useSignupModal } from 'useModal'
-import { useModal as useLoginModal } from 'useModal'
+import { useModal as useSignupModal } from '~utils/useModal'
+import { useModal as useLoginModal } from '~utils/useModal'
 
 function UnauthMenu() {
     const { open: signupOpen, openModal: openSignupModal, closeModal: closeSignupModal } = useSignupModal()

src/components/WeaponGrid/WeaponGrid.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react'
 import { withRouter } from 'react-router'
 
-import WeaponGridMainhand from 'components/WeaponGridMainhand/WeaponGridMainhand'
-import WeaponGridUnit from 'components/WeaponGridUnit/WeaponGridUnit'
+import WeaponGridMainhand from '~components/WeaponGridMainhand/WeaponGridMainhand'
+import WeaponGridUnit from '~components/WeaponGridUnit/WeaponGridUnit'
 
 import './WeaponGrid.css'
 
@@ -15,8 +15,6 @@ interface GridWeapon {
 
 type GridArray = { [key: number]: Weapon } 
 
-const endpoint = process.env.SIERO_API ? process.env.SIERO_API : 'http://127.0.0.1:3000/api/v1'
-
 const WeaponGrid = (props: null) => {
     const [partyId, setPartyId] = useState<string>()
     const [shortcode, setShortcode] = useState<string>()
@@ -43,7 +41,7 @@ const WeaponGrid = (props: null) => {
             method: 'GET'
         }
 
-        return fetch(`${endpoint}/party/${shortcode}`, options)
+        return fetch(`http://127.0.0.1:3000/api/v1/party/${shortcode}`, options)
             .then(response => response.json())
             .then(data => {
                 const grid = data.party.grid
@@ -120,7 +118,7 @@ const WeaponGrid = (props: null) => {
             method: 'POST'
         }
 
-        return fetch(`${endpoint}/api/v1/party`, options)
+        return fetch('http://127.0.0.1:3000/api/v1/party', options)
             .then(response => response.json())
     }
 
@@ -140,7 +138,7 @@ const WeaponGrid = (props: null) => {
             body: body
         }
 
-        fetch(`${endpoint}/api/v1/weapons`, options)
+        fetch('http://127.0.0.1:3000/api/v1/weapons', options)
             .then(data => {
                 console.log(data)
             })
@@ -161,7 +159,7 @@ const WeaponGrid = (props: null) => {
             body: body
         }
 
-        fetch(`${endpoint}/api/v1/weapons`, options)
+        fetch('http://127.0.0.1:3000/api/v1/weapons', options)
             .then(data => {
                 console.log(data)
             })

src/components/WeaponGridMainhand/WeaponGridMainhand.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react'
-import SearchModal from 'components/SearchModal/SearchModal'
-import { useModal as useModal } from 'useModal'
+import SearchModal from '~components/SearchModal/SearchModal'
+import { useModal as useModal } from '~utils/useModal'
 
-import mainhandImages from 'images/mainhand/*.jpg'
+import mainhandImages from '../../images/mainhand/*.jpg'
 import Plus from '../../../assets/plus.svg'
 
 import './WeaponGridMainhand.css'
@@ -14,10 +14,16 @@ function WeaponGridMainhand(props: WeaponGridProps) {
         console.log('Mainhand weapon prop was updated.')
     }, [props.weapon])
     
+    let imgSrc
+    if (props.weapon) {
+        const weapon = props.weapon!
+        imgSrc = mainhandImages[weapon.granblue_id]
+    }
+
     return (
         <div>
             <div className="WeaponGridMainhand" onClick={openModal}>
-                <img className="grid_image" src={mainhandImages[props.weapon?.granblue_id]} />
+                <img className="grid_image" src={imgSrc} />
                 <span className='icon'><Plus /></span>
             </div>
             {open ? (

src/components/WeaponGridUnit/WeaponGridUnit.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import SearchModal from 'components/SearchModal/SearchModal'
-import { useModal as useModal } from 'useModal'
+import SearchModal from '~components/SearchModal/SearchModal'
+import { useModal as useModal } from '~utils/useModal'
 
-import gridImages from 'images/grid/*.jpg'
+import gridImages from '../../images/grid/*.jpg'
 import Plus from '../../../assets/plus.svg'
 
 import './WeaponGridUnit.css'
@@ -10,7 +10,7 @@ import './WeaponGridUnit.css'
 function WeaponGridUnit(props: WeaponGridProps) {
     const { open, openModal, closeModal } = useModal()
 
-    let imgSrc = ''
+    let imgSrc
     if (props.weapon) {
         const weapon = props.weapon!
         imgSrc = gridImages[weapon.granblue_id]

src/components/WeaponResult/WeaponResult.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import WeaponLabelIcon from 'components/WeaponLabelIcon/WeaponLabelIcon'
+import WeaponLabelIcon from '~components/WeaponLabelIcon/WeaponLabelIcon'
 
-import gridImages from 'images/grid/*.jpg'
+import gridImages from '../../images/grid/*.jpg'
 
 import './WeaponResult.css'
 

src/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { BrowserRouter } from 'react-router-dom'
 
-import App from 'components/App/App'
+import App from './components/App/App'
 
 ReactDOM.render((
     <BrowserRouter>