Using the Effect Hooks -app.tsx & ReminderList.tsx

Author: Bikramai

Section9-React-with-TypeScript/reminders-app/src/App.tsx

@@ -1,14 +1,21 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import logo from "./logo.svg";
 import "./App.css";
 import ReminderList from "./components/ReminderList";
 import Reminder from "./models/reminder";
-
+import reminderService from "./services/reminder";
 
 function App() {
- const [reminders, setReminders] = useState<Reminder[]>([
- { id: 1, title: "Reminder 1" },
- ]);
+ const [reminders, setReminders] = useState<Reminder[]>([]);
+
+ useEffect(() => {
+ loadReminders();
+ }, []);
+
+ const loadReminders = async () => {
+ const reminders = await reminderService.getReminder();
+ setReminders(reminders);
+ };
 
  return (
  <div className="App">

Section9-React-with-TypeScript/reminders-app/src/components/ReminderList.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
 import Reminder from '../models/reminder';
 
-
-
 interface ReminderListProps {
  items: Reminder[]
 }
 
 function ReminderList({ items }: ReminderListProps) {
  return (
- <ul>
- {items.map(items => <li key={ items.id}>{items.title}</li>)}
+ <ul className='list-group'>
+ {items.map(items => <li className='list-group-item' key={ items.id}>{items.title}</li>)}
  </ul>
  );
 }

Section9-React-with-TypeScript/reminders-app/src/services/reminder.ts

@@ -4,16 +4,16 @@ import Reminder from '../models/reminder';
 
 class ReminderServices {
  http = axios.create({
- baseURL: 'https://jsonplaceholder.typicode.com'
+ baseURL: 'https://jsonplaceholder.typicode.com/'
  });
 
  async getReminder() {
- const response = await this.http.get<Reminder[]>('/todo');
+ const response = await this.http.get<Reminder[]>('/todos');
  return response.data
  }
 
  async addReminder(title: string) {
- const response = await this.http.post<Reminder[]>('/todo', { title });
+ const response = await this.http.post<Reminder>('/todos', { title });
  return response.data
  }