This article is a continuation of the following content: [Server customization part 4/6](https://strapi.io/blog/how-to-create-a-strapi-v4-plugin-server-customization-4-6) A plugin allows you to customize the front-end part of your Strapi application. In fact, you can: - Create a plugin homepage - Create a plugin settings page - Insert React components in [injection zones](https://docs.strapi.io/developer-docs/latest/developer-resources/plugin-api-reference/admin-panel.html#injection-zones-api) - Way more... We are going to explore the entry point of the admin of your plugin: `./src/plugins/todo/admin/src/index.js`. ## Admin entrypoint By default, your `admin/src/index.js` file should look like this: ```js // admin/src/index.js import { prefixPluginTranslations } from '@strapi/helper-plugin'; import pluginPkg from '../../package.json'; import pluginId from './pluginId'; import Initializer from './components/Initializer'; import PluginIcon from './components/PluginIcon'; const name = pluginPkg.strapi.name; export default { register(app) { app.addMenuLink({ to: `/plugins/${pluginId}`, icon: PluginIcon, intlLabel: { id: `${pluginId}.plugin.name`, defaultMessage: name, }, Component: async () => { const component = await import(/* webpackChunkName: "[request]" */ './pages/App'); return component; }, permissions: [ // Uncomment to set the permissions of the plugin here // { // action: '', // the action name should be plugin::plugin-name.actionType // subject: null, // }, ], }); app.registerPlugin({ id: pluginId, initializer: Initializer, isReady: false, name, }); }, bootstrap(app) {}, async registerTrads({ locales }) { const importedTrads = await Promise.all( locales.map(locale => { return import(`./translations/${locale}.json`) .then(({ default: data }) => { return { data: prefixPluginTranslations(data, pluginId), locale, }; }) .catch(() => { return { data: {}, locale, }; }); }) ); return Promise.resolve(importedTrads); }, }; ``` This file will, first, add your plugin to the menu link and register your plugin during the register phase: ```js register(app) { app.addMenuLink({ to: `/plugins/${pluginId}`, icon: PluginIcon, intlLabel: { id: `${pluginId}.plugin.name`, defaultMessage: name, }, Component: async () => { const component = await import(/* webpackChunkName: "[request]" */ './pages/App'); return component; }, permissions: [ // Uncomment to set the permissions of the plugin here // { // action: '', // the action name should be plugin::plugin-name.actionType // subject: null, // }, ], }); app.registerPlugin({ id: pluginId, initializer: Initializer, isReady: false, name, }); }, ``` Then, nothing is happening during the bootstrap phase: ```js bootstrap(app) {}, ``` This is the phase where we are going to inject our components later. Finally, it handles the translation files in your plugin allowing you to make it i18n friendly. ```js async registerTrads({ locales }) { const importedTrads = await Promise.all( locales.map(locale => { return import(`./translations/${locale}.json`) .then(({ default: data }) => { return { data: prefixPluginTranslations(data, pluginId), locale, }; }) .catch(() => { return { data: {}, locale, }; }); }) ); return Promise.resolve(importedTrads); }, ``` There are a lot of things you can already do here. You may want to customize the icon of your plugin in the menu link for example by updating the `admin/src/components/PluginIcon/index.js` file. Find another icon in the [Strapi Design System website](https://design-system-git-main-strapijs.vercel.app/?path=/story/design-system-components-theme--icons) and update it: ```js // admin/src/components/PluginIcon/index.js // Replace the default Puzzle icon by a Brush one import React from 'react'; import Brush from '@strapi/icons/Brush'; const PluginIcon = () => ; export default PluginIcon; ``` **Tip**: Don't forget to build your admin or to run your project with the `--watch-admin` option. If you don't want your plugin to be listed in the menu link for some reason, you can remove this function. Now is the time to get into the front-end part of this plugin but first, an introduction to our Design System is necessary. ## Strapi Design System Strapi Design System provides guidelines and tools to help anyone make Strapi's contributions more cohesive and to build plugins more efficiently. You can find the [guidelines for publishing a plugin to the marketplace](https://market.strapi.io/guidelines). As you can see: `Plugins compatible with Strapi v4 MUST use the Strapi Design System for the UI.`. **Caution**: We insist on the fact that v4 plugins must use the Design System. Feel free to browse the [Design System website](https://design-system.strapi.io/) but what is more important for you is the [components](https://design-system-git-main-strapijs.vercel.app/). This is every React component you can use within your project to give a beautiful UI to your plugin. You can also find [every icon](https://design-system-git-main-strapijs.vercel.app/?path=/story/design-system-components-theme--icons) you can use. Click on them to have the import js line copied in your clipboard. You don't need to install anything, you can directly create components, import some items from the Design System like this: `import { Button } from '@strapi/design-system/Button';` and that's it. ## Homepage A Strapi plugin can have a homepage or not, you decide if it is necessary. For our todo use case, it doesn't make sense to have a specific homepage since the most important part would be to inject a todo on every entry we have (article, product, etc...) But this section will cover this anyway. We are going to use the route we created to get the total number of tasks in order to display it on this homepage. The route we created is the following: ```js // server/routes/task.js module.exports = { type: 'admin', routes: [ { method: 'GET', path: '/count', handler: 'task.count', config: { policies: [], auth: false, }, }, // ... ], }; ``` **Tip**: This is an admin route, which means that it will be directly accessible from the admin. Not from the outside (/api/...) We are going to create a file that will execute every HTTP request to our server in a specific folder but feel free to name it differently or manage this file in another way. We are going to use the provided `axiosInstance` to send these requests. - Create an `./admin/src/api/task.js` file containing the following: ```js // ./admin/src/api/task.js import axiosInstance from '../../src/utils/axiosInstance'; const taskRequests = { getTaskCount: async () => { const data = await axiosInstance.get(`/todo/count`); return data; }, }; export default taskRequests; ``` **Tip**: We are using the `axiosInstance` provided byt the plugin. You can also use the request function from the [helper-plugin](https://github.com/strapi/strapi/tree/0f9b69298b2d94b31b434bd7217060570ae89374/packages/core/helper-plugin) too. This plugin is a core package containing hooks, components, functions and more. You can learn more about the [request function](https://github.com/strapi/strapi/blob/0f9b69298b2d94b31b434bd7217060570ae89374/packages/core/helper-plugin/lib/src/utils/request/index.js) for making HTTP request. Feel free to take some time exploring the [strapi](https://github.com/strapi/strapi) repository, a lot of useful things, sometimes not yet documented, can be found. - Update the content of the `admin/src/pages/Homepage/index.js` file with the following: ```js // admin/src/pages/Homepage/index.js /* * * HomePage * */ import React, { memo, useState, useEffect } from 'react'; import taskRequests from '../../api/task'; import { Box } from '@strapi/design-system/Box'; import { Flex } from '@strapi/design-system/Flex'; import { Typography } from '@strapi/design-system/Typography'; import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout'; import { BaseHeaderLayout, ContentLayout } from '@strapi/design-system/Layout'; import { Illo } from '../../components/Illo'; const HomePage = () => { const [taskCount, setTaskCount] = useState(0); useEffect(() => { taskRequests.getTaskCount().then(res => { setTaskCount(res.data); }); }, [setTaskCount]); return ( <> {taskCount === 0 && ( } content="You don't have any tasks yet..." /> )} {taskCount > 0 && ( You have a total of {taskCount} tasks 🚀 )} ); }; export default memo(HomePage); ``` For this homepage to work, you'll just need to create the `Illo` icon that the `EmptyStateLayout` is using. - Create an `admin/src/components/Illo/index.js` file containing the following: ```js // admin/src/components/Illo/index.js import React from 'react'; export const Illo = () => ( ); ``` You should be able to see the total number of tasks on your plugin homepage. Let's explore in detail what's happening. ```js // admin/src/pages/Homepage/index.js import React, { memo, useState, useEffect } from 'react'; import taskRequests from '../../api/task'; import { Box } from '@strapi/design-system/Box'; import { Flex } from '@strapi/design-system/Flex'; import { Typography } from '@strapi/design-system/Typography'; import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout'; import { BaseHeaderLayout, ContentLayout } from '@strapi/design-system/Layout'; ``` First, we import every hook from React that we'll need for this to work. We import the function to get the task count we created just before and then we import every Design system components we'll need. ```js const [taskCount, setTaskCount] = useState(0); useEffect(() => { taskRequests.getTaskCount().then(res => { setTaskCount(res.data); }); }, [setTaskCount]); ``` We create a `taskCount` state with 0 as a default value. We use the [useEffect React hook](https://reactjs.org/docs/hooks-effect.html) to fetch our task count using the function we created earlier and replace our state variable with the result. ```js return ( <> {taskCount === 0 && ( } content="You don't have any tasks yet..." /> )} {taskCount > 0 && ( You have a total of {taskCount} tasks 🚀 )} ); ``` Then, depending on the number of tasks you have, it will display something on the homepage of your plugin. As mentioned before, for this use case, making this homepage is not really necessary but you are now familiar with it and with the Design System. Let's add something that may be useful in the future. We want to display a loading indicator while the request is pending and for this, we'll use the [helper-plugin](https://github.com/strapi/strapi/tree/0f9b69298b2d94b31b434bd7217060570ae89374/packages/core/helper-plugin) again. - Import the `LoadingIndicatorPage` component from the `helper-plugin` ```js // admin/src/pages/Homepage/index.js import { LoadingIndicatorPage } from '@strapi/helper-plugin'; ``` - Create a new state variable that will indicate the page it is loading by default: ```js const [isLoading, setIsLoading] = useState(true); ``` - Add this conditional return just after the `useEffect` hook: ```js if (isLoading) return ; ``` Final code: ```js // admin/src/pages/Homepage/index.js /* * * HomePage * */ import React, { memo, useState, useEffect } from 'react'; import taskRequests from '../../api/task'; import { LoadingIndicatorPage } from '@strapi/helper-plugin'; import { Box } from '@strapi/design-system/Box'; import { Flex } from '@strapi/design-system/Flex'; import { Typography } from '@strapi/design-system/Typography'; import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout'; import { BaseHeaderLayout, ContentLayout } from '@strapi/design-system/Layout'; import { Illo } from '../../components/Illo'; const HomePage = () => { const [taskCount, setTaskCount] = useState(0); const [isLoading, setIsLoading] = useState(true); useEffect(() => { taskRequests.getTaskCount().then(res => { setTaskCount(res.data); setIsLoading(false); }); }, [setTaskCount]); if (isLoading) return ; return ( <> {taskCount === 0 && ( } content="You don't have any tasks yet..." /> )} {taskCount > 0 && ( You have a total of {taskCount} tasks 🚀 )} ); }; export default memo(HomePage); ``` The content of your page will only be displayed if the request has returned something. We strongly advise you to take a look at the helper-plugin which deserves to have this name. You can find the source code of the `LoadingIndicatorPage` component [here](https://github.com/strapi/strapi/blob/0f9b69298b2d94b31b434bd7217060570ae89374/packages/core/helper-plugin/lib/src/components/LoadingIndicatorPage/index.js). ## Settings page We created a settings API in a previous section. Now is the time to create the settings view in the admin to be able to interact with it. By default, Strapi creates a Homepage folder, the one you just played with, but it doesn't create the Settings which is needed to implement a settings section for your plugin in the main settings view. We need to create the necessary HTTP requests from the admin. - Update the `admin/src/api/task.js` file with the following content: ```js // admin/src/api/task.js import axiosInstance from '../../src/utils/axiosInstance'; const taskRequests = { getTaskCount: async () => { const data = await axiosInstance.get(`/todo/count`); return data; }, getSettings: async () => { const data = await axiosInstance.get(`/todo/settings`); return data; }, setSettings: async data => { return await axiosInstance.post(`/todo/settings`, { body: data, }); }, }; export default taskRequests; ``` These two new functions will request the API you created earlier for the settings. - Create an `admin/src/pages/Settings` folder with an `index.js` file inside of it with the following: ```js // admin/src/pages/Settings/index.js import React, { useEffect, useState } from 'react'; import taskRequests from '../../api/task'; import { LoadingIndicatorPage, useNotification } from '@strapi/helper-plugin'; import { Box } from '@strapi/design-system/Box'; import { Stack } from '@strapi/design-system/Stack'; import { Button } from '@strapi/design-system/Button'; import { Grid, GridItem } from '@strapi/design-system/Grid'; import { HeaderLayout } from '@strapi/design-system/Layout'; import { ContentLayout } from '@strapi/design-system/Layout'; import { Typography } from '@strapi/design-system/Typography'; import { ToggleInput } from '@strapi/design-system/ToggleInput'; import Check from '@strapi/icons/Check'; const Settings = () => { const [settings, setSettings] = useState(); const [isSaving, setIsSaving] = useState(false); const [isLoading, setIsLoading] = useState(true); const toggleNotification = useNotification(); useEffect(() => { taskRequests.getSettings().then(res => { setSettings(res.data.settings); setIsLoading(false); }); }, [setSettings]); const handleSubmit = async () => { setIsSaving(true); const res = await taskRequests.setSettings(settings); setSettings(res.data.settings); setIsSaving(false); toggleNotification({ type: 'success', message: 'Settings successfully updated', }); }; return ( <> ) : ( ) } > {isLoading ? ( ) : ( General settings { setSettings({ disabled: e.target.checked, }); }} /> )} ); }; export default Settings; ``` This settings page is displaying a toggle that will allow you to manage if you want to cross or disable your tasks marked as done. The next thing that is necessary, tell your plugin to create a settings section. You can achieve this by using the `createSettingSection` function. Learn more about it just right [here](https://github.com/strapi/strapi/blob/5cbb60ce4b652e84dd8d65ffa2713437ecb4e619/packages/core/admin/admin/src/StrapiApp.js). - Update the `admin/src/index.js` file by adding the following code just before the `app.registerPlugin` call: ```js // admin/src/index.js //... app.createSettingSection( { id: pluginId, intlLabel: { id: `${pluginId}.plugin.name`, defaultMessage: 'Todo', }, }, [ { intlLabel: { id: `${pluginId}.plugin.name`, defaultMessage: 'General settings', }, id: 'settings', to: `/settings/${pluginId}`, Component: async () => { return import('./pages/Settings'); }, }, ] ); //.. ``` If you go to the main settings of your application, you should be able to see a `TODO - General settings` section. From there, you can save the way you'll want to display your tasks marked as done in the store. We'll be able to get this setting directly from the component that we'll inject later. ## Translations You can translate your plugin into several languages if you wish. It's quite simple, you just have to do 2 things: 1. Create a locale file containing all the translations for the language you want to have for your plugin. By default, we'll ask for your plugin to have an English file containing all the wording of your application in English and then, you can create as many files as you would like to have. By default, a plugin contains an English JSON file and also a french one inside the `admin/src/translations` folder: ``` ├── translations ├── en.json └── fr.json ``` The format of this file is straight to the point. You need to create a key which is an id corresponding to a translation string: For the `en.json` file, we can have: ```JSON // admin/src/translations/en.json { "Homepage.BaseHeaderLayout.title": "Todo Plugin", // etc... } ``` You are free to name the ids as you would like to, but we advise you to name them correctly so it's easy to understand in your front-end code. `Homepage.BaseHeaderLayout.title` corresponds to the title prop of the `BaseHeaderLayout` component that we use on the homepage. Instead of having a fixed value, we can now use this translation with this id. - Update the `admin/src/translations/en.json` file with the following code: ```JSON // admin/src/translations/en.json { "Homepage.BaseHeaderLayout.title": "Todo Plugin" } ``` - Update the `admin/src/translations/fr.json` file with the following code: ```JSON // admin/src/translations/fr.json { "Homepage.BaseHeaderLayout.title": "Plugin des tâches" // French translation for Todo Plugin :) } ``` The only thing that is needed is to replace hard text by dynamically loading the translations in your pages/components. 2. Use the `useIntl` hook from `react-intl` and the `admin/src/utils/getTrad.js` function to internationalize your plugin. - Update the `admin/src/pages/Homepage/index.js` by importing these two elements: ```js // admin/src/pages/Homepage/index.js //... import { useIntl } from 'react-intl'; import getTrad from '../../utils/getTrad'; //... ``` - Implement the `formatMessage` function just before the `useEffect`: ```js //... const { formatMessage } = useIntl(); //... ``` - Finally, replace the content of your `BaseHeaderLayout` component with the following: ```js ``` You can have a `defaultMessage` in case it doesn't succeed to load the requested translation. This is what your file should look like: ```js // admin/src/pages/Homepage/index.js /* * * HomePage * */ import React, { memo, useState, useEffect } from 'react'; import { useIntl } from 'react-intl'; import getTrad from '../../utils/getTrad'; import taskRequests from '../../api/task'; import { LoadingIndicatorPage } from '@strapi/helper-plugin'; import { Box } from '@strapi/design-system/Box'; import { Flex } from '@strapi/design-system/Flex'; import { Typography } from '@strapi/design-system/Typography'; import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout'; import { BaseHeaderLayout, ContentLayout } from '@strapi/design-system/Layout'; import { Illo } from '../../components/Illo'; const HomePage = () => { const [taskCount, setTaskCount] = useState(0); const [isLoading, setIsLoading] = useState(true); const { formatMessage } = useIntl(); useEffect(() => { taskRequests.getTaskCount().then(data => { setTaskCount(data); setIsLoading(false); }); }, [setTaskCount]); if (isLoading) return ; return ( <> {taskCount === 0 && ( } content="You don't have any tasks yet..." /> )} {taskCount > 0 && ( You have a total of {taskCount} tasks 🚀 )} ); }; export default memo(HomePage); ``` Feel free to change the language of your admin in the general settings to see your different translations. ## Component injection A plugin allows you to inject React components where the admin allows you to. In fact, some areas were designed to receive any kind of components. This is possible thanks to the [injection Zones](https://docs.strapi.io/developer-docs/latest/developer-resources/plugin-api-reference/admin-panel.html#injection-zones-api). You need to use the `bootstrap` lifecycle function to inject your components in the `admin/src/index.js`. For this use case, we'll simply tell our plugin to inject a `TodoCard` React component in the `editView` > `right-links` injection zone. - Update the `admin/src/index.js` file by importing the component: ```js // admin/src/index.js //... import TodoCard from './components/TodoCard'; //... ``` - Update the `admin/src/index.js` file by injecting this component in the bootstrap lifecycle function: ```js bootstrap(app) { app.injectContentManagerComponent("editView", "right-links", { name: "todo-component", Component: TodoCard, }); }, ``` Your file should look like this: ```js // admin/src/index.js import { prefixPluginTranslations } from '@strapi/helper-plugin'; import pluginPkg from '../../package.json'; import pluginId from './pluginId'; import Initializer from './components/Initializer'; import PluginIcon from './components/PluginIcon'; import TodoCard from './components/TodoCard'; const name = pluginPkg.strapi.name; export default { register(app) { app.addMenuLink({ to: `/plugins/${pluginId}`, icon: PluginIcon, intlLabel: { id: `${pluginId}.plugin.name`, defaultMessage: name, }, Component: async () => { const component = await import(/* webpackChunkName: "[request]" */ './pages/App'); return component; }, permissions: [ // Uncomment to set the permissions of the plugin here // { // action: '', // the action name should be plugin::plugin-name.actionType // subject: null, // }, ], }); app.createSettingSection( { id: pluginId, intlLabel: { id: `${pluginId}.plugin.name`, defaultMessage: 'Todo', }, }, [ { intlLabel: { id: `${pluginId}.plugin.name`, defaultMessage: 'General settings', }, id: 'settings', to: `/settings/${pluginId}`, Component: async () => { return import('./pages/Settings'); }, }, ] ); app.registerPlugin({ id: pluginId, initializer: Initializer, isReady: false, name, }); }, bootstrap(app) { app.injectContentManagerComponent('editView', 'right-links', { name: 'todo-component', Component: TodoCard, }); }, async registerTrads({ locales }) { const importedTrads = await Promise.all( locales.map(locale => { return import(`./translations/${locale}.json`) .then(({ default: data }) => { return { data: prefixPluginTranslations(data, pluginId), locale, }; }) .catch(() => { return { data: {}, locale, }; }); }) ); return Promise.resolve(importedTrads); }, }; ``` Your application will not work since this `TodoCard` doesn't exist yet. - Create an `admin/src/components/TodoCard/index.js` with the following code: ```js import React, { useState, useEffect } from "react"; import { useCMEditViewDataManager } from "@strapi/helper-plugin"; import axiosInstance from "../../utils/axiosInstance"; import { Box, Typography, Divider, Checkbox, Stack, Flex, Icon, } from "@strapi/design-system"; import Plus from "@strapi/icons/Plus"; import TaskModal from "../TaskModal"; const TodoCard = () => { const { initialData } = useCMEditViewDataManager(); const [tasks, setTasks] = useState(initialData.tasks); const [settings, setSettings] = useState(false); const [createModalIsShown, setCreateModalIsShown] = useState(false); const fetchSettings = async () => { try { const { data } = await axiosInstance.get(`todo/settings`); setSettings(data.settings.disabled); } catch (e) { console.log(e); } }; const updateTasks = async (taskId) => { try { let updatedTasks = tasks.map((task) => { if (task.id === taskId) { return { ...task, isDone: !task.isDone }; } return task; }); setTasks(updatedTasks); } catch (e) { console.log(e); } }; useEffect(() => { fetchSettings(); }, [settings]); const toggleTask = async (taskId, isChecked) => { // Update task in database const res = await axiosInstance.put(`/todo/update/${taskId}`, { data: { isDone: isChecked, }, }); console.log(res); if (res.status === 200) await updateTasks(taskId, isChecked); }; const showTasks = () => { // Loading state if (status === "loading") { return

Fetching todos...

; } // Error state if (status === "error") { return

Could not fetch tasks.

; } // Empty state if (tasks == null || tasks.length === 0) { return

No todo yet.

; } // Success state, show all tasks return tasks.map((task) => ( <> toggleTask(task.id, isChecked)} key={task.id} disabled={task.isDone && settings ? true : false} > {task.name} )); }; return ( <> {createModalIsShown && ( setCreateModalIsShown(false)} setTasks={setTasks} tasks={tasks} /> )} Todos setCreateModalIsShown(true)} > Add todo {showTasks()} ); }; export default TodoCard; ``` There are 2 important things to see in this code: 1. `useCMEditViewDataManager`. This hook is coming from the [helper-plugin](https://github.com/strapi/strapi/tree/0f9b69298b2d94b31b434bd7217060570ae89374/packages/core/helper-plugin). It allows you to have access, from the content-manager to the data of the actual entry. In this case, we are fetching the `initialData` of the entry. You can have access to more data with it. [Learn more about this hook](https://github.com/strapi/strapi/blob/master/packages/core/helper-plugin/lib/src/content-manager/hooks/useCMEditViewDataManager/useCMEditViewDataManager.stories.mdx). 2. The component is using the settings we created in one of the previous sections. In fact, the function `fetchSettings` will execute an API call to the route we created in one of the previous sections. ```js const fetchSettings = async () => { try { const { data } = await axiosInstance.get(`todo/settings`); setSettings(data.settings.disabled); } catch (e) { console.log(e); }s }; ``` Then, depending on the value of these settings, it will render the checkbox: ```js return tasks.map(task => ( <> toggleTask(task.id, isChecked)} key={task.id} disabled={task.isDone && settings ? true : false} > {task.name} )); ``` As you can see, this component is calling a new route to update your tasks from your server: - `axiosInstance.put(`/todo/update/${taskId}...` We'll need to create it right away but the next component will also need a new route for creating tasks. Let's create them both right now: - Create 2 new routes in your `/server/routes/tasks.js` like the following: ```js ... { method: "PUT", path: "/update/:id", handler: "task.update", config: { policies: [], auth: false, }, }, { method: "POST", path: "/create", handler: "task.create", config: { policies: [], auth: false, }, }, ... ``` - Now we need to update the `/server/controllers/task.js` controller to implement the new `update` and `create` action: ```js ... async create(ctx) { try { ctx.body = await strapi .plugin("todo") .service("task") .create(ctx.request.body); } catch (err) { ctx.throw(500, err); } }, async update(ctx) { try { ctx.body = await strapi .plugin("todo") .service("task") .update(ctx.params.id, ctx.request.body.data); } catch (err) { ctx.throw(500, err); } }, ... ``` And finally, the `/server/services/task.js` file with the corresponding services: ```js ... async create(data) { return await strapi.query("plugin::todo.task").create(data); }, async update(id, data) { return await strapi.query("plugin::todo.task").update({ where: { id }, data, }); }, ... ``` The server part is ready! The `TodoCard` component requires another one (`TaskModal`). - Create an `admin/src/components/TaskModal/index.js` with the following code: ```js // admin/src/components/TaskModal/index.js import React, { useState } from "react"; import { ModalLayout, ModalHeader, ModalBody, ModalFooter, Typography, Button, TextInput, } from "@strapi/design-system"; import { useCMEditViewDataManager } from "@strapi/helper-plugin"; import axiosInstance from "../../utils/axiosInstance"; const TaskModal = ({ handleClose, setTasks, tasks }) => { const [name, setName] = useState(""); const [status, setStatus] = useState(); const { slug, initialData } = useCMEditViewDataManager(); const handleSubmit = async (e) => { // Prevent submitting parent form e.preventDefault(); e.stopPropagation(); try { // Show loading state setStatus("loading"); // Create task and link it to the related entry const res = await axiosInstance.post("/todo/create", { data: { name, isDone: false, related: { __type: slug, id: initialData.id, }, }, }); setTasks([...tasks, res.data]); // Remove loading and close popup setStatus("success"); handleClose(); } catch (e) { console.log(e); setStatus("error"); } }; const getError = () => { // Form validation error if (name.length > 40) { return "Content is too long"; } // API error if (status === "error") { return "Could not create todo"; } return null; }; return ( Add todo setName(e.target.value)} value={name} /> Cancel } endActions={ } /> ); }; export default TaskModal; ``` The most important thing here, is that we create tasks using the API routes we created just before and then we update the tasks state: ```js const res = await axiosInstance.post("/todo/create", { data: { name, isDone: false, related: { __type: slug, id: initialData.id, }, }, }); setTasks([...tasks, res.data]); ``` We create the association by adding a `related` object containing the `id` of the current entry and the internal `slug` for the `__type` field. A task creation for an article will have this data: ```js { name, // name of the task isDone: false, related: { __type: "api::article.article", id: initialData.id, // id of the article }, } ``` **Note**: For this use case we created our custom routes as usual to update and create tasks from the server. It is good to know that you can use an undocumented API that can allows to do the same without setting anything on the server side: The Strapi Content Manager API can hellp you fetch, from the admin only, your data using the `/content-manager/` endpoint. - To learn more about this API you need to clone the [strapi](https://github.com/strapi/strapi) repository and start the open-api server for the core/content-manager: ``` git clone https://github.com/strapi/strapi.git cd strapi yarn doc:api core/content-manager ``` **Caution**: It is internal documentation. There might be breaking changes. This is what both your components could look like using this API: ```js // admin/src/components/TodoCard/index.js import React, { useState, useEffect } from 'react'; import { useCMEditViewDataManager } from '@strapi/helper-plugin'; import axiosInstance from '../../utils/axiosInstance'; import { Box, Typography, Divider, Checkbox, Stack, Flex, Icon } from '@strapi/design-system'; import Plus from '@strapi/icons/Plus'; import TaskModal from '../TaskModal'; function useRelatedTasks() { const { initialData, isSingleType, slug } = useCMEditViewDataManager(); const [tasks, setTasks] = useState([]); const [status, setStatus] = useState('loading'); const [settings, setSettings] = useState(false); const fetchSettings = async () => { try { const { data } = await axiosInstance.get(`todo/settings`); setSettings(data.disabled); } catch (e) { console.log(e); } }; const refetchTasks = async () => { try { const { data } = await axiosInstance.get( `/content-manager/${isSingleType ? 'single-types' : 'collection-types'}/${slug}/${ isSingleType ? '' : initialData.id }?populate=tasks` ); setTasks(data.tasks); setStatus('success'); } catch (e) { setStatus('error'); } }; useEffect(() => { fetchSettings(); refetchTasks(); }, [initialData, isSingleType, axiosInstance, setTasks, setStatus, setSettings]); return { status, tasks, refetchTasks, fetchSettings, settings }; } const TodoCard = () => { const { status, tasks, refetchTasks, settings } = useRelatedTasks(); const [createModalIsShown, setCreateModalIsShown] = useState(false); const toggleTask = async (taskId, isChecked) => { // Update task in database await axiosInstance.put(`/content-manager/collection-types/plugin::todo.task/${taskId}`, { isDone: isChecked, }); // Call API to update local cache await refetchTasks(); }; const showTasks = () => { // Loading state if (status === 'loading') { return

Fetching todos...

; } // Error state if (status === 'error') { return

Could not fetch tasks.

; } // Empty state if (tasks == null || tasks.length === 0) { return

No todo yet.

; } // Success state, show all tasks return tasks.map(task => ( <> toggleTask(task.id, isChecked)} key={task.id} disabled={task.isDone && settings ? true : false} > {task.name} )); }; return ( <> {createModalIsShown && ( setCreateModalIsShown(false)} refetchTasks={refetchTasks} /> )} Todos setCreateModalIsShown(true)} > Add todo {showTasks()} ); }; export default TodoCard; ``` ```js // admin/src/components/TaskModal/index.js import React, { useState } from 'react'; import { ModalLayout, ModalHeader, ModalBody, ModalFooter, Typography, Button, TextInput, } from '@strapi/design-system'; import { useCMEditViewDataManager } from '@strapi/helper-plugin'; import axiosInstance from '../../utils/axiosInstance'; const TaskModal = ({ handleClose, refetchTasks }) => { const [name, setName] = useState(''); const [status, setStatus] = useState(); const { slug, initialData } = useCMEditViewDataManager(); const handleSubmit = async e => { // Prevent submitting parent form e.preventDefault(); e.stopPropagation(); try { // Show loading state setStatus('loading'); // Create task and link it to the related entry await axiosInstance.post('/content-manager/collection-types/plugin::todo.task', { name, isDone: false, related: { __type: slug, id: initialData.id, }, }); // Refetch tasks list so it includes the created one await refetchTasks(); // Remove loading and close popup setStatus('success'); handleClose(); } catch (e) { setStatus('error'); } }; const getError = () => { // Form validation error if (name.length > 40) { return 'Content is too long'; } // API error if (status === 'error') { return 'Could not create todo'; } return null; }; return ( Add todo setName(e.target.value)} value={name} /> Cancel } endActions={ } /> ); }; export default TaskModal; ``` Your todo plugin should be 100% working now. Give it a try. This guide doesn't cover yet [middlewares](https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/required/middlewares.html#loading-order) and [policies](https://docs.strapi.io/developer-docs/latest/development/backend-customization/policies.html), this will come later. Next article: [Publish on npm part 6/6](https://strapi.io/blog/how-to-create-a-strapi-v4-plugin-publish-on-npm-6-6)