added first iteration of complex character creation, character delete

Dervalanana · Dec 15, 2021 · 052123b · 052123b
1 parent 5488c70
commit 052123b
Show file tree

Hide file tree

Showing 15 changed files with 1,975 additions and 103 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,5 +35,14 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "bootstrap": "^4.4.1",
+    "nss-json-server": "^1.0.5",
+    "raw-loader": "^4.0.0",
+    "react-modal": "^3.11.1",
+    "react-router-dom": "^5.2.1",
+    "typescript": "^4.4.2",
+    "webpack-cli": "^3.3.10"
   }
 }
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/characters/Character.js b/src/components/characters/Character.js
@@ -3,7 +3,7 @@ import { useParams } from "react-router-dom";
 import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
 import useSimpleAuth from "../../hooks/ui/useSimpleAuth";
 import CharacterRepository from "../../repositories/CharacterRepository";
-import { CharacterSelect } from "./CharacterSelect";
+import { CharacterSelectDelete } from "./CharacterSelectDelete";
 import "./CharacterSelect.css"
 import { CreateCharacter } from "./CreateCharacter";
 
@@ -18,11 +18,17 @@ export const Character = () => {
         CharacterRepository.getAll(getCurrentUser().id).then(setCharacters) //get all characters you're allowed to see
     }, [])
     useEffect(() => {
-        characterId && CharacterRepository.get(characterId).then(setCharacter) //only set if you have an Id
+        characterId && CharacterRepository.getComplicated(characterId).then(setCharacter) //only set if you have an Id
     }, [])
     const changeCharacter = () => {
-        document.querySelector(`[name=character]`).value? //throws a big error if it can't find anything
-        history.push(`/${document.querySelector(`[name=character]`).value}/character`):
+        document.querySelector(`[name=characterSelect]`).value? //throws a big error if it can't find anything
+        history.push(`/${document.querySelector(`[name=characterSelect]`).value}/character`):
+        history.push("/character")
+    }
+    const deleteCharacter = () => {
+        CharacterRepository.delete(document.querySelector(`[name=characterDelete]`).value)
+        document.querySelector(`[name=characterDelete]`).value !== characterId? //throws a big error if it can't find anything
+        history.push(`/${document.querySelector(`[name=characterDelete]`).value}/character`):
         history.push("/character")
     }
 
@@ -34,15 +40,19 @@ export const Character = () => {
                 {currentCharacter ? <h2>Currently Selected character is {currentCharacter.name}</h2> : <h2>you gotta select a character if you want to go anywhere other than here or the landing page</h2>}
                 <section className="flexdown">
                     <section className="flexside">
-                        <CharacterSelect characters={characters}/>
+                        <CharacterSelectDelete characters={characters} />
                         <button type="submit"
                             onClick={changeCharacter}
                             className="btn btn-primary"> Submit </button>
-                        <h3>placeholder for delete character, populates a select with all characters belonging to the user. has a submit</h3>
+                        <CharacterSelectDelete characters={characters} deleter />
+                        <button type="submit"
+                            onClick={deleteCharacter}
+                            className="btn btn-primary"> Submit </button>
                     </section>
                     <CreateCharacter refresh={setCharacters}/>
 
                 </section>
+                {JSON.stringify(currentCharacter, null, 4)}
             </article>
         </>
     )

diff --git a/src/components/characters/CharacterSelect.js → ...nents/characters/CharacterSelectDelete.js b/src/components/characters/CharacterSelect.js → ...nents/characters/CharacterSelectDelete.js
@@ -1,16 +1,16 @@
 import react, { useLayoutEffect, useState } from "react";
 
 
-export const CharacterSelect = ({ characters }) => {
+export const CharacterSelectDelete = ({ characters, deleter }) => {
     const [charList, setCharList] = useState()
     useLayoutEffect(() => { setCharList(characters) }, [characters])
     return <>
         <select defaultValue=""
-            name="character"
+            name={deleter? "characterDelete":"characterSelect"}
             className="form-control small"
         >
             <option value="">
-                Select a character
+                Select a character {deleter && "to delete"}
             </option>
             {
                 characters.map(o => <option key={o.id} value={o.id}>{o.name}</option>)

diff --git a/src/components/characters/CreateCharacter.js b/src/components/characters/CreateCharacter.js
@@ -1,8 +1,10 @@
 import react from "react";
 import useSimpleAuth from "../../hooks/ui/useSimpleAuth";
 import CharacterRepository from "../../repositories/CharacterRepository";
+import LevelRepository from "../../repositories/LevelRepository";
+import SkillsRepository from "../../repositories/SkillsRepository";
 
-export const CreateCharacter = ({refresh}) => {
+export const CreateCharacter = ({ refresh }) => {
     const { getCurrentUser } = useSimpleAuth()
     const postCharacter = () => {
         const newCharacter = {
@@ -16,10 +18,26 @@ export const CreateCharacter = ({refresh}) => {
             "wis": 0,
             "cha": 0,
             "userId": getCurrentUser().id,
-            "raceId": 1
+            "raceId": 1,
+            "HDRoll": 0,
         }
         CharacterRepository.addCharacter(newCharacter).then(
-        CharacterRepository.getAll(getCurrentUser().id).then(refresh))
+            res => {
+                const charId = res.id
+                SkillsRepository.getAll().then(res => {
+                    const skills = res
+                    skills.forEach(re => SkillsRepository.addCharacterSkills({ skillId: re.id, characterId: charId, bonus:0 })) //generates the objects to track a characters total points for a given skill
+                    LevelRepository.addLevel(charId, 1).then(levelRes => //creates the character's first level
+                        skills.forEach(skill => 
+                            SkillsRepository.addLevelSkills({ //creates the objects to track a given levels allocation of skill points
+                                skillId: skill.id, 
+                                levelId: levelRes.id, 
+                                points: 0 }
+                            )))
+                })
+                CharacterRepository.getAll(getCurrentUser().id).then(refresh)
+            }
+        )
     }
 
     return <>

diff --git a/src/components/nav/NavBar.js b/src/components/nav/NavBar.js
@@ -12,6 +12,7 @@ export const NavBar = () => {
     const { isAuthenticated, logout, getCurrentUser } = useSimpleAuth()
     const history = useHistory()
     const location = useLocation()
+    const whatever = useParams()
     const test = location.pathname.split("/")
     const characterId = test.length===3 ? test[1] : undefined 
 

diff --git a/src/index.js b/src/index.js
@@ -1,17 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import { BrowserRouter as Router } from "react-router-dom"
+import * as serviceWorker from './serviceWorker'
+import { HeroForge } from './components/HeroForge'
+import "./index.css"
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+ReactDOM.render((
+    <Router>
+        <HeroForge />
+    </Router>
+), document.querySelector("#root"))
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.unregister();
diff --git a/src/repositories/CharacterRepository.js b/src/repositories/CharacterRepository.js
@@ -1,6 +1,9 @@
 import Settings from "./Settings"
 import { fetchIt } from "./Fetch"
 import useSimpleAuth from "../hooks/ui/useSimpleAuth"
+import SkillsRepository from "./SkillsRepository"
+import LevelRepository from "./LevelRepository"
+import ClassRepository from "./ClassRepository"
 
 // const expandAnimalUser = (animal, users) => {
 //     animal.animalOwners = animal.animalOwners.map(ao => {
@@ -14,13 +17,33 @@ import useSimpleAuth from "../hooks/ui/useSimpleAuth"
 //     })
 
 //     return animal
-// }
+const expandCharacterTraits = (character, classes, skills, feats) => {
+    character.levels = character.levels.map(level => {
+        level.class = classes.find(classs => classs.id === level.classId)
+        return level
+    })
+    character.characterSkills = character.characterSkills.map(skill => {
+        skill.name = skills.find(skilll => skilll.id === skill.skillId).name
+        return skill
+    })
+    return character
+}
 
 export default {
     async get(id) {
-        return await fetchIt(`${Settings.remoteURL}/characters/${id}`)
+        return await fetchIt(`${Settings.remoteURL}/characters/${id}?_embed=levels`)
             .then(res => res)
-            }
+    }
+    ,
+    async getComplicated(id) {
+        const skills = await SkillsRepository.getAll()
+        const classes = await ClassRepository.getAll()
+        return await fetchIt(`${Settings.remoteURL}/characters/${id}?_embed=levels&_embed=characterSkills`)
+            .then(character => {
+                character = expandCharacterTraits(character, classes, skills)
+                return character
+            })
+    }
     ,
     // async searchByName(query) {
     //     const users = await OwnerRepository.getAll() //copied the extra code for expansion from get and getall to make sure I could get the full info in the search
@@ -34,9 +57,10 @@ export default {
     //     })
     //     return animals
     // },
-    // async delete(id) {
-    //     return await fetchIt(`${Settings.remoteURL}/animals/${id}`, "DELETE")
-    // },
+    async delete(id) {
+        await fetchIt(`${Settings.remoteURL}/characters/${id}?_embed=levels`).then(res => res.levels.forEach(level => LevelRepository.delete(level.id)))
+        return await fetchIt(`${Settings.remoteURL}/characters/${id}`, "DELETE")
+    },
     async getAll(playerId) {
         let userCharacters = []
         const characters = await fetchIt(`${Settings.remoteURL}/characters`)

diff --git a/src/repositories/ClassRepository.js b/src/repositories/ClassRepository.js
@@ -0,0 +1,59 @@
+import Settings from "./Settings"
+import { fetchIt } from "./Fetch"
+import useSimpleAuth from "../hooks/ui/useSimpleAuth"
+
+// const expandAnimalUser = (animal, users) => {
+//     animal.animalOwners = animal.animalOwners.map(ao => {
+//         ao.user = users.find(user => user.id === ao.userId)
+//         return ao
+//     })
+
+//     animal.animalCaretakers = animal.animalCaretakers.map(caretaker => {
+//         caretaker.user = users.find(user => user.id === caretaker.userId)
+//         return caretaker
+//     })
+
+//     return animal
+// }
+
+export default {
+    async get(id) {
+        return await fetchIt(`${Settings.remoteURL}/classes/${id}`)
+            .then(res => res)
+            }
+    ,
+    // async searchByName(query) {
+    //     const users = await OwnerRepository.getAll() //copied the extra code for expansion from get and getall to make sure I could get the full info in the search
+    //     const animals = await fetchIt(`${Settings.remoteURL}/animals?_embed=animalOwners&_embed=treatments&_embed=animalCaretakers&_expand=location&name_like=${query}`)
+    //     .then(data => {
+    //         const embedded = data.map(animal => {
+    //             animal = expandAnimalUser(animal, users)
+    //             return animal
+    //         })
+    //         return embedded
+    //     })
+    //     return animals
+    // },
+    // async delete(id) {
+    //     return await fetchIt(`${Settings.remoteURL}/animals/${id}`, "DELETE")
+    // },
+    async getAll() {
+        return await fetchIt(`${Settings.remoteURL}/classes`)
+    },
+
+
+    // async addAnimalCaretaker(newAnimalCaretaker) { //added function to add caretakers
+    //     return await fetchIt(
+    //         `${Settings.remoteURL}/animalCaretakers`,
+    //         "POST",
+    //         JSON.stringify(newAnimalCaretaker)
+    //     )
+    // },
+    // async updateAnimal(editedAnimal) {
+    //     return await fetchIt(
+    //         `${Settings.remoteURL}/animals/${editedAnimal.id}`,
+    //         "PUT",
+    //         JSON.stringify(editedAnimal)
+    //     )
+    // }
+}