got carried away and wrote some skill stuff including a classSkill ge…

…neration form

database.json

@@ -0,0 +1,19 @@
+{
+  "posts": [
+    {
+      "id": 1,
+      "title": "json-server",
+      "author": "typicode"
+    }
+  ],
+  "comments": [
+    {
+      "id": 1,
+      "body": "some comment",
+      "postId": 1
+    }
+  ],
+  "profile": {
+    "name": "typicode"
+  }
+}

src/components/Landing.js

@@ -3,7 +3,7 @@ import { Route } from "react-router-dom";
 
 export const Landing = () => {
     return <>
-        <Route exact path="/" >
+        <Route exact path="/:characterId(/d+)" >
             <br />
             <br />
             <br />

src/components/SkillRoutes.js

@@ -1,5 +1,6 @@
 import React from "react"
 import { Route } from "react-router-dom"
+import { ClassSkillGenerator } from "./skills/ClassSkillGenerator"
 import { Skills } from "./skills/Skills"
 
 export const SkillRoutes = () => {
@@ -8,5 +9,9 @@ export const SkillRoutes = () => {
             <h1>you found the hidden text! zomg</h1>
             <Skills />
         </Route>
+        <Route exact path="/classSkillGenerator">
+            <h1>spacing</h1>
+            <ClassSkillGenerator />
+        </Route>
     </>
 }

src/components/characters/Character.js

@@ -29,9 +29,10 @@ export const Character = () => {
         complicateCharacter(document.querySelector(`[name=characterSelect]`).value)
     }
     const deleteCharacter = () => {
-        CharacterRepository.delete(document.querySelector(`[name=characterDelete]`).value).then(() => {
-            document.querySelector(`[name=characterDelete]`).value !== characterId ? //throws a big error if it can't find anything
-                history.push(`/${document.querySelector(`[name=characterDelete]`).value}/character`) :
+        const holder = document.querySelector(`[name=characterDelete]`).value
+        CharacterRepository.delete(parseInt(holder)).then(() => {
+            holder !== characterId ? //throws a big error if it can't find anything
+                history.push(`/${characterId}/character`) :
                 history.push("/character")
             syncCharacters()
         })

src/components/skills/CharacterSelect.css

@@ -11,4 +11,9 @@ section, h3{
 .flexsidescroll{
     display: flex;
     overflow-x: scroll;
-}
+}
+.detailColumn1{width:8rem}
+.detailColumn2{width:3rem}
+.detailColumn3{width:3rem}
+.detailColumn4{width:3rem}
+.detailColumn5{width:3rem}

src/components/skills/ClassSkillGenerator.js

@@ -0,0 +1,30 @@
+import react, { useState, useEffect } from "react";
+import SkillsRepository from "../../repositories/SkillsRepository";
+
+export const ClassSkillGenerator = () => {
+    const[skills, setSkills] = useState([])
+    useEffect(()=>{SkillsRepository.getAll().then(setSkills)},[])
+    const createClassSkills = () => {
+        skills.forEach(skill=> {
+            const classSkill = {
+                classId: (parseInt(document.querySelector(`[name=classId]`).value)),
+                skillId: skill.id,
+                classSkillProf: (document.querySelector(`[name=skill--${skill.id}]`).checked),
+            }
+            SkillsRepository.addClassSkills(classSkill)
+        })
+    }
+
+
+    return <>
+        <h1>1</h1>
+        <h1>1</h1>
+        <input name="classId" />
+        {skills.map(skill=>{
+            return <div>
+                {skill.name}<input name={`skill--${skill.id}`} type="checkbox"/>
+            </div>
+        })}
+        <button onClick={createClassSkills}>Submit</button>
+    </>
+}

src/components/skills/SkillDetails.js

@@ -0,0 +1,14 @@
+import react from "react";
+
+export const SkillDetails = ({skill}) => {
+    return <>
+        <div className="flexside">
+            <div className="detailColumn1">{skill.name}</div>
+            <div className="detailColumn2">Total</div>
+            <div className="detailColumn3">{skill.attribute}</div>
+            <div className="detailColumn4">Ranks</div>
+            <div className="detailColumn5">Max Ranks</div>
+        </div>
+    </>
+
+}

src/components/skills/Skills.js

@@ -1,46 +1,62 @@
-import react from "react";
+import react, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { SkillDetails } from "./SkillDetails"
+import SkillsRepository from "../../repositories/SkillsRepository";
+import LevelRepository from "../../repositories/LevelRepository";
 import "./CharacterSelect.css"
 
 export const Skills = () => {
+    const [skills, setSkills] = useState([])
+    const { characterId } = useParams()
+    const [levels, setLevels] = useState([])
 
 
+
+    useEffect(() => {
+        SkillsRepository.getAll().then(setSkills)
+        LevelRepository.getComplicated(characterId).then(setLevels)
+    }, [])
+
     return (
         <>
             <article>
                 <h1>Skills</h1>
                 <h2>Currently Selected character is {"placeholder to call a reference to the current character. should be changed through filepath"}</h2>
                 <section className="flexside">
                     <section className="flexdown">
-                        <h3>Level <br/> Row</h3>
-                        <h3>Available <br/>skill <br/>points</h3>
+                        <h3>Level <br /> Row</h3>
+                        <h3>Available <br />skill <br />points</h3>
                         <div className="flexside">
-                            <h3>Skill name</h3>
-                            <h3>Total</h3>
-                            <h3>Stat</h3>
-                            <h3>Ranks</h3>
-                            <h3>Max Ranks</h3>
+                            <div className="detailColumn1">Skill name</div>
+                            <div className="detailColumn2">Total</div>
+                            <div className="detailColumn3">Stat</div>
+                            <div className="detailColumn4">Ranks</div>
+                            <div className="detailColumn5">Max Ranks</div>
+                        </div>
+                        <div className="flexdown">
+                            {skills.map(skill => <SkillDetails skill={skill} />)}
                         </div>
                     </section>
                     <section className="flexsidescroll">
                         <div className="flexdown">
-                            <h3>Level<br/>#</h3>
-                            <h3>Skill points <br/>with <br/>live updates</h3>
-                            <h3>double space <br/>for consistency</h3>
+                            <h3>Level<br />#</h3>
+                            <h3>Skill points <br />with <br />live updates</h3>
+                            <h3>double space <br />for consistency</h3>
                             <h3>Column of skills. All 3 of these are going to be in an indiviudal element that will map through vertically, then that element will be mapped horizonally for multiple levels</h3>
                         </div>
                         <div className="flexdown">
-                            <h3>Level<br/>#</h3>
-                            <h3>Skill points <br/>with <br/>live updates</h3>
-                            <h3>double space <br/>for consistency</h3>
+                            <h3>Level<br />#</h3>
+                            <h3>Skill points <br />with <br />live updates</h3>
+                            <h3>double space <br />for consistency</h3>
                             <h3>Column of skills. All 3 of these are going to be in an indiviudal element that will map through vertically, then that element will be mapped horizonally for multiple levels</h3>
                         </div>
                         <div className="flexdown">
-                            <h3>Level<br/>#</h3>
-                            <h3>Skill points <br/>with <br/>live updates</h3>
-                            <h3>double space <br/>for consistency</h3>
+                            <h3>Level<br />#</h3>
+                            <h3>Skill points <br />with <br />live updates</h3>
+                            <h3>double space <br />for consistency</h3>
                             <h3>Column of skills. All 3 of these are going to be in an indiviudal element that will map through vertically, then that element will be mapped horizonally for multiple levels</h3>
                         </div>
-                        
+
                     </section>
 
                 </section>

src/repositories/LevelRepository.js

@@ -17,6 +17,12 @@ import SkillsRepository from "./SkillsRepository"
 //     return animal
 // }
 
+const expandClassSkills = ( level, classSkills ) => {
+        classSkills = classSkills.sort((a,b) => a.skillId - b.skillId) //need to make sure that the array is in skill order for future iteration
+        level.class.classSkills = classSkills
+        return level
+    }
+
 const addComplications = (level) => {
     SkillsRepository.getAll().then(res => {
         const skills = res
@@ -83,7 +89,17 @@ export default {
             "PUT",
             JSON.stringify(updatedLevel)
         )
+    },
+    async getComplicated(id) {
+
+        return await fetchIt(`${Settings.remoteURL}/levels?characterId=${id}&_embed=levelSkills&_expand=class`)
+            .then(levels => {
+                levels.forEach(level => {
+                    SkillsRepository.getClassSkills(level.classId).then(classSkills => expandClassSkills(level, classSkills))})
+                return levels
+            })
     }
+
     // async addAnimalCaretaker(newAnimalCaretaker) { //added function to add caretakers
     //     return await fetchIt(
     //         `${Settings.remoteURL}/animalCaretakers`,

src/repositories/SkillsRepository.js

@@ -54,6 +54,16 @@ export default {
             JSON.stringify(levelSkill)
         )
     },
+    async addClassSkills(classSkill) {
+        return await fetchIt(
+            `${Settings.remoteURL}/classSkills`,
+            "POST",
+            JSON.stringify(classSkill)
+        )
+    },
+    async getClassSkills(id){
+        return await fetchIt(`${Settings.remoteURL}/classSkills?classId=${id}`)
+    }
 
 
     // async addAnimalCaretaker(newAnimalCaretaker) { //added function to add caretakers