Codecademy export

Controls.js

import React, { useContext } from "react";
import { MixtapeContext } from "./MixtapeContext";

export const Controls = () => {
  const { genre, setGenre, sortOrder, setSortOrder } = useContext(
    MixtapeContext
  );

  return (
    <div className="controls">
      <select onChange={(e) => setGenre(e.target.value)}>
        <option value="all">All</option>
        <option value="hip hop">Hip hop</option>
        <option value="rap">Rap</option>
        <option value="rock">Rock</option>
        <option value="pop">Pop</option>
      </select>
      <button onClick={() => setSortOrder(sortOrder === "ascending" ? "descending" : "ascending")}>
        {sortOrder}
      </button>
    </div>
  );
};

index.js

import ReactDOM from 'react-dom';
import React from 'react';
import { MixtapeApp } from './MixtapeApp.js'

ReactDOM.render(
  <MixtapeApp />,
  document.getElementById('root')
);

MixtapeApp.js

import React from "react";
import { MixtapeProvider } from "./MixtapeContext";
import { SongList } from "./SongList";
import { Controls } from "./Controls";

export const MixtapeApp = () => {
  return (
    <MixtapeProvider songs={songs}>
      <div className="app">
        <h1 className="heading">My 🔥 Mixtape</h1>
        TODO: make some music...? 🎶
        <Controls />
        <SongList />
      </div>
    </MixtapeProvider>
  );
};

const songs = [
  {
    artist: "Smash Mouth",
    genre: "pop",
    name: "All Star",
    year: 1999,
  },
  {
    artist: "Drake",
    genre: "rap",
    name: "Hotline Bling",
    year: 2015,
  },
  {
    artist: "Lizzo",
    genre: "hip hop",
    name: "Juice",
    year: 2019,
  },
  {
    artist: "Rick Astley",
    genre: "rock",
    name: "Never Gonna Give You Up",
    year: 1987,
  },
  {
    artist: "4 Non Blondes",
    genre: "rock",
    name: "What's Up",
    year: 1993,
  },
];

MixtapeContext.js

import React, { useState } from "react";

export const MixtapeContext = React.createContext();

export const MixtapeProvider = ({ children, songs }) => {
  const [genre, setGenre] = useState("all");
  const [sortOrder, setSortOrder] = useState("ascending");

  return (
    <MixtapeContext.Provider
      value={{ songs, genre, setGenre, sortOrder, setSortOrder }}
    >
      {children}
    </MixtapeContext.Provider>
  );
};

Song.js

import React from "react";

export const Song = ({ artist, genre, name, year }) => {
  return (
    <div className="song">
      <div className="contents">
        <div className="name">{name}</div>
        <div className="details left">
          <div className="artist">{artist}</div>
        </div>
        <div className="details right">
          <div className="genre">{genre}</div>
          <div className="year">{year}</div>
        </div>
      </div>
    </div>
  );
};

SongList.js

import React, { useContext } from "react";
import { Song } from "./Song";
import { MixtapeContext } from "./MixtapeContext";

export const SongList = () => {
  // Your code here! ✨
  const { genre, sortOrder, songs } = useContext(MixtapeContext);
  const filterSong = songs.filter(
    song => genre === 'all' || song.genre === genre );
  const sortSong = filterSong.sort((a, b) =>
    sortOrder === "ascending" ? a.year - b.year : b.year - a.year
  );
// basically i must fix filterSong first before sortSong
// filterSong must show on screen. after it can be sorted
  return (
    <>
      {sortSong.map((song) => (
        <Song {...song} key={song.name} />
      ))}
    </>
  );
};