Books can now appear in teacher resources

frontend/src/pages/HomePage.tsx

@@ -58,7 +58,9 @@ export default function HomePage() {
         published: true,
       })
         .then((response) => {
-          setResults(response);
+          setResults(
+            response.filter((book) => !book.tags.includes("teacher_resource")),
+          );
           setLoading(false);
         })
         .catch((error) => {

frontend/src/pages/TeacherResources.tsx

@@ -2,8 +2,40 @@ import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
 import Background from "../components/Background";
 import PostPreview from "../components/PostPreview";
+import { useCallback, useEffect, useState } from "react";
+import { Book, BooksService } from "../api";
+import ActivityBookList from "../components/ActivityBookList";
 
 export default function ActivityPostList() {
+  const [results, setResults] = useState<Book[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const loadBookResults = useCallback(
+    (topic: string | null, query: string | null) => {
+      setLoading(true);
+      BooksService.searchBooksBooksSearchPost({
+        categories: null,
+        query,
+        published: true,
+      })
+        .then((response) => {
+          setResults(
+            response.filter((book) => book.tags.includes("teacher_resource")),
+          );
+          setLoading(false);
+        })
+        .catch((error) => {
+          console.error(error);
+          setLoading(false);
+        });
+    },
+    [],
+  );
+
+  // The initial load of all books
+  useEffect(() => {
+    loadBookResults(null, null);
+  }, [loadBookResults]);
   const otherPostsData = [
     {
       image: "/lego-sort-example-clumping.png",
@@ -37,6 +69,15 @@ export default function ActivityPostList() {
               ))}
           </ul>
         </section>
+        <section className="w-full p-2 mt-2">
+          <h2 className="text-2xl">Books for Teachers</h2>
+          <ActivityBookList
+            books={results}
+            linkPrefix="/book/"
+            linkSuffix="/1"
+            loading={loading}
+          />
+        </section>
       </div>
       <Footer />
     </div>