webmasterdevlin

<script>
  import { onMount, onDestroy } from "svelte";
  import Icon from "fa-svelte";
  import { faEdit, faEraser } from "@fortawesome/free-solid-svg-icons";
  import NewItemForm from "../shared/NewItemForm.svelte";
  import { heroStore, getTotalHeroes } from "./hero.store.js";
  import { navigate } from "svelte-routing";
  import Loader from "../shared/Loader.svelte";
  let isShowNewItemForm = false;
  let heroForm = {

webmasterdevlin

import http from "../shared/http.service";
import { BaseUrl } from "../api.config";

export async function getHeroes() {
  return await http.get(BaseUrl.heroes);
}

export async function getHeroById(id) {
  return await http.get(`${BaseUrl.heroes}${id}`);
}

webmasterdevlin

import { writable, readable, derived, get } from "svelte/store";
import {
  getHeroes,
  getHeroById,
  deleteHero,
  putHero,
  postHero
} from "./hero.service";

const initialState = {

webmasterdevlin

import React, { useState, useEffect, useContext } from "react";
import NewItemForm from "../../shared/components/NewItemForm";
import { Link } from "@reach/router";
import { heroContext } from "../hero-context";
import { useObserver } from "mobx-react-lite";

export default function Heroes() {
  /* Don't destructure. MobX observable are objects (and derivates) only. When destructuring, any primitive variables will remain at latest values and won't be observable anymore. Use boxed observables to track primitive values exclusively or preferably pass a whole state object around.
   example:
   const { heroes,hero, getHeroes,  postHero, setHero,deleteHero,isLoading } = useContext(heroContext);*/

webmasterdevlin

import React from "react";
import "./App.css";
import { BrowserRouter } from "react-router-dom";
import RootRouter from "./root-router";
import HeaderNav from "./shared/components/HeaderNav";
import { HeroProvider } from "./heroes/hero-context";
import { VillainProvider } from "./villains/villain-context";

function App() {
  return (

webmasterdevlin

import React, { createContext } from "react";
import { useLocalStore } from "mobx-react-lite";
import {
  deleteHero,
  getHeroById,
  getHeroes,
  postHero,
  putHero
} from "./hero-service";

webmasterdevlin

import React, { createContext } from "react";
import { useLocalStore } from "mobx-react-lite";
import {
  deleteHero,
  getHeroById,
  getHeroes,
  postHero,
  putHero
} from "./hero-service";

webmasterdevlin

import React, { createContext } from "react";
import { useLocalStore } from "mobx-react-lite";
import {
  deleteHero,
  getHeroById,
  getHeroes,
  postHero,
  putHero
} from "./hero-service";

webmasterdevlin

import React, { createContext } from "react";
import { useLocalStore } from "mobx-react-lite";
import {
  deleteHero,
  getHeroById,
  getHeroes,
  postHero,
  putHero
} from "./hero-service";

webmasterdevlin

import React from "react";
import "./App.css";
import { BrowserRouter } from "react-router-dom";
import RootRouter from "./root-router";
import HeaderNav from "./shared/components/HeaderNav";
import HeroStore from "./heroes/hero-store";
import VillainStore from "./villains/villain-store";

function App() {
  return (