I’ve got up to step 9 but none of the topics I create are rendering onto screen. My code seems to be fine and the state is updating. Any ideas?
topicsSlice.js:
import { createSlice } from '@reduxjs/toolkit';
const topicsSlice = createSlice({
name: 'topics',
initialState: {
topics: {}
},
reducers: {
addTopic: (state, action) => {
const { id, name, icon } = action.payload
state.topics[id] = {
id: id,
name: name,
icon: icon,
quizIds: []
}
}
}
});
export const selectTopic = state => state.topics.topics;
export const { addTopic } = topicsSlice.actions;
export default topicsSlice.reducer;
topic.js:
import { useSelector } from 'react-redux';
import { Link, useParams } from "react-router-dom";
import ROUTES from "../../app/routes";
import { selectTopic } from "./topicsSlice";
export default function Topic() {
const topics = useSelector(selectTopic); // replace this with a call to your selector to select all the topics in state
const quizzes = {}; // replace this with a call to your selector to select all the quizzes in state
let { topicId } = useParams();
const topic = topics[topicId];
const quizzesForTopic = topic.quizIds.map((quizId) => quizzes[quizId]);
return (
<section>
<img src={topic.icon} alt="" className="topic-icon" />
<h1>Topic: {topic.name}</h1>
<ul className="quizzes-list">
{quizzesForTopic.map((quiz) => (
<li className="quiz" key={quiz.id}>
<Link to={ROUTES.quizRoute(quiz.id)}>{quiz.name}</Link>
</li>
))}
</ul>
<Link to="/quizzes/new" className="button center">
Create a New Quiz
</Link>
</section>
);
}
NewTopicForm.js:
import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useHistory } from "react-router-dom";
import { v4 as uuidv4, v4 } from "uuid";
import ROUTES from "../app/routes";
import { ALL_ICONS } from "../data/icons";
import { addTopic } from "../features/topics/topicsSlice";
export default function NewTopicForm() {
const [name, setName] = useState("");
const [icon, setIcon] = useState("");
const history = useHistory();
const dispatch = useDispatch()
const handleSubmit = (e) => {
e.preventDefault();
if (name.length === 0) {
return;
}
// dispatch your add topic action here
dispatch(addTopic({ id: uuidv4(), name: name, icon: icon}))
history.push(ROUTES.topicsRoute());
};
return (
<section>
<form onSubmit={handleSubmit}>
<h1 className="center">Create a new topic</h1>
<div className="form-section">
<input
id="topic-name"
type="text"
value={name}
onChange={(e) => setName(e.currentTarget.value)}
placeholder="Topic Name"
/>
<select
onChange={(e) => setIcon(e.currentTarget.value)}
required
defaultValue="default"
>
<option value="default" disabled hidden>
Choose an icon
</option>
{ALL_ICONS.map(({ name, url }) => (
<option key={url} value={url}>
{name}
</option>
))}
</select>
</div>
<button className="center">Add Topic</button>
</form>
</section>
);
}
store.js:
import { configureStore } from "@reduxjs/toolkit";
import topicsReducer from '../features/topics/topicsSlice';
export default configureStore({
reducer: {
topics: topicsReducer
},
});