Updates to routes

* The shortcode will only be pulled from here
* Add an editable key to enable/disable editing the grid
* Fix type erros with props.match

src/components/WeaponGrid/WeaponGrid.tsx

@@ -14,9 +14,14 @@ interface GridWeapon {
     weapon: Weapon
 }
 
+interface Props {
+    shortcode: string
+    editable: boolean
+}
+
 type GridArray = { [key: number]: Weapon } 
 
-const WeaponGrid = (props: {}) => {
+const WeaponGrid = (props: Props) => {
     const [partyId, setPartyId] = useState<string>()
     const [shortcode, setShortcode] = useState<string>()
 
@@ -26,10 +31,8 @@ const WeaponGrid = (props: {}) => {
     const numWeapons: number = 9
 
     useEffect(() => {
-        const shortcode = props.match.params.hash
+        if (props.shortcode) {
-
+            fetchGrid(props.shortcode)
-        if (shortcode) {
-            fetchGrid(shortcode)
         } else {
             // There is no need to fetch a weapon
         }
@@ -141,12 +144,24 @@ const WeaponGrid = (props: {}) => {
 
     return (
         <div className="WeaponGrid">
-            <WeaponGridMainhand key="grid_mainhand" onReceiveData={receiveMainhand} position={0} weapon={mainhand} />
+            <WeaponGridMainhand 
+                editable={props.editable}
+                key="grid_mainhand" 
+                onReceiveData={receiveMainhand} 
+                position={0} 
+                weapon={mainhand}
+            />
 
             <ul id="grid_weapons">
                 {
                     Array.from(Array(numWeapons)).map((x, i) => {
-                        return <WeaponGridUnit key={`grid_unit_${i}`} onReceiveData={receiveWeapon} position={i} weapon={weapons[i]} />
+                        return <WeaponGridUnit 
+                            editable={props.editable}
+                            key={`grid_unit_${i}`} 
+                            onReceiveData={receiveWeapon} 
+                            position={i} 
+                            weapon={weapons[i]}
+                        />
                     })
                 }
             </ul>

src/components/WeaponGridMainhand/WeaponGridMainhand.css

@@ -12,7 +12,7 @@
     width: 200px;
 }
 
-.WeaponGridMainhand:hover {
+.WeaponGridMainhand.editable:hover {
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
     cursor: pointer;

src/components/WeaponGridMainhand/WeaponGridMainhand.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react'
+import classnames from 'classnames'
 import SearchModal from '~components/SearchModal/SearchModal'
 import { useModal as useModal } from '~utils/useModal'
 
@@ -20,11 +21,18 @@ function WeaponGridMainhand(props: WeaponGridProps) {
         imgSrc = mainhandImages[weapon.granblue_id]
     }
 
+    const openModalIfEditable = (props.editable) ? openModal : () => {}
+
+    const classes = classnames({
+        WeaponGridMainhand: true,
+        'editable': props.editable
+    })
+
     return (
         <div>
-            <div className="WeaponGridMainhand" onClick={openModal}>
+            <div className={classes} onClick={openModalIfEditable}>
                 <img className="grid_image" src={imgSrc} />
-                <span className='icon'><Plus /></span>
+                { (props.editable) ? <span className='icon'><Plus /></span> : '' }
             </div>
             {open ? (
                 <SearchModal 

src/components/WeaponGridUnit/WeaponGridUnit.css

@@ -13,7 +13,7 @@
     width: 160px;
 }
 
-.WeaponGridUnit:hover {
+.WeaponGridUnit.editable:hover {
     border: 1px solid rgba(0, 0, 0, 0.1);
     box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
     cursor: pointer;

src/components/WeaponGridUnit/WeaponGridUnit.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import classnames from 'classnames'
 import SearchModal from '~components/SearchModal/SearchModal'
 import { useModal as useModal } from '~utils/useModal'
 
@@ -16,11 +17,18 @@ function WeaponGridUnit(props: WeaponGridProps) {
         imgSrc = gridImages[weapon.granblue_id]
     }
 
+    const openModalIfEditable = (props.editable) ? openModal : () => {}
+
+    const classes = classnames({
+        WeaponGridUnit: true,
+        'editable': props.editable
+    })
+
     return (
         <li>
-            <div className="WeaponGridUnit" onClick={openModal}>
+            <div className={classes} onClick={openModalIfEditable}>
                 <img className="grid_image" src={imgSrc} />
-                <span className='icon'><Plus /></span>
+                { (props.editable) ? <span className='icon'><Plus /></span> : '' }
             </div>
             {open ? (
                 <SearchModal 

src/routes/New/New.tsx

@@ -3,7 +3,7 @@ import SearchModal from '../../components/SearchModal/SearchModal'
 import WeaponGrid from '../../components/WeaponGrid/WeaponGrid'
 
 const New = () => (
-    <WeaponGrid key="weapon_grid"/>
+    <WeaponGrid key="weapon_grid" editable={true} />
 )
 
 export default New

src/routes/Party/Party.tsx

@@ -1,17 +1,24 @@
 import React from 'react'
-import { withRouter } from 'react-router'
+import { RouteComponentProps, withRouter } from 'react-router'
 
 import WeaponGrid from '../../components/WeaponGrid/WeaponGrid'
 
-class Party extends React.Component {
+interface RouterProps {
-    render() {
+    hash: string
-        var hash = this.props.match.params.hash
+}
-        return (
+
-            <div>
+interface PartyProps extends RouteComponentProps<RouterProps> {
-                <WeaponGrid />
+
-            </div>
+}
-        )
+
-    }
+const Party: React.FC<PartyProps> = ({ match }) => {
+    const shortcode = match.params.hash || ''
+
+    return (
+        <div>
+            <WeaponGrid shortcode={shortcode} editable={false} />
+        </div>
+    )
 }
 
 export default withRouter(Party)

src/types/WeaponGridProps.d.ts

@@ -2,4 +2,5 @@ interface WeaponGridProps {
     onReceiveData: (Weapon, number) => void
     weapon: Weapon | undefined
     position: number
+    editable: boolean
 }