Admin Tab for MAPLE News Items #2055

components/db/index.ts

@@ -1,6 +1,7 @@
 export * from "./bills"
 export * from "./createTableHook"
 export * from "./members"
+export * from "./news"
 export * from "./profile"
 export * from "./testimony"
 export * from "./useUpcomingBills"

components/db/news.ts

@@ -0,0 +1,26 @@
+import { collection, getDocs, orderBy, Timestamp } from "firebase/firestore"
+import { useAsync } from "react-async-hook"
+import { firestore } from "../firebase"
+
+export type NewsType = "article" | "award" | "book"
+
+export type NewsItem = {
+  id: string
+  url: string
+  title: string
+  author: string
+  type: NewsType
+  description?: string
+  publishDate: string
+  createdAt: Timestamp
+}
+
+export async function listNews(): Promise<NewsItem[]> {
+  const newsRef = collection(firestore, "news")
+  const result = await getDocs(newsRef)
+  return result.docs.map(d => ({ id: d.id, ...d.data() } as NewsItem))
+}
+
+export function useNews() {
+  return useAsync(listNews, [])
+}

components/moderation/News.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect } from "react"
+import { collection, getFirestore, onSnapshot } from "firebase/firestore"
+import {
+  Create,
+  Datagrid,
+  DateField,
+  DateInput,
+  Edit,
+  EditButton,
+  FunctionField,
+  List,
+  SelectInput,
+  SimpleForm,
+  TextField,
+  TextInput,
+  useRefresh
+} from "react-admin"
+
+const typeChoices = [
+  { id: "article", name: "Article" },
+  { id: "award", name: "Award" },
+  { id: "book", name: "Book" }
+]
+
+export function ListNews() {
+  const firestore = getFirestore()
+  const refresh = useRefresh()
+
+  useEffect(() => {
+    const newsRef = collection(firestore, "news")
+    const unsubscribe = onSnapshot(
+      newsRef,
+      () => refresh(),
+      (e: Error) => console.log(e)
+    )
+
+    return () => unsubscribe()
+  }, [firestore, refresh])
+
+  return (
+    <List>
+      <Datagrid rowClick="edit" bulkActionButtons={false}>
+        <TextField source="id" label="News ID" />
+        <TextField source="title" label="Title" />
+        <TextField source="author" label="Author" />
+        <TextField source="type" label="Type" />
+        <DateField source="publishDate" label="Publish Date" />
+        <DateField source="createdAt" showTime />
+        <EditButton label="Edit" />
+      </Datagrid>
+    </List>
+  )
+}
+
+export function EditNews() {
+  return (
+    <Edit>
+      <SimpleForm>
+        <TextInput source="url" fullWidth />
+        <SelectInput source="type" choices={typeChoices} />
+        <TextInput source="author" />
+        <TextInput source="title" fullWidth />
+        <TextInput source="description" multiline fullWidth />
+        <DateInput source="publishDate" />
+      </SimpleForm>
+    </Edit>
+  )
+}
+
+export function CreateNews() {
+  return (
+    <Create redirect="list" transform={(data: Record<string, unknown>) => ({ ...data, createdAt: new Date() })}>
+      <SimpleForm>
+        <TextInput source="url" fullWidth />
+        <SelectInput source="type" choices={typeChoices} />
+        <TextInput source="author" />
+        <TextInput source="title" fullWidth />
+        <TextInput source="description" multiline fullWidth />
+        <DateInput source="publishDate" />
+      </SimpleForm>
+    </Create>
+  )
+}
+
+export default { ListNews, EditNews, CreateNews }

components/moderation/dataProviderDbCalls.ts

@@ -136,9 +136,13 @@ export async function createMyOne(
 ): Promise<CreateResult> {
   console.log("creating my one")
   const { data, meta } = params
-  const ref = doc(firestore, resource, data.id)
-  await setDoc(ref, data)
-  return { data: data }
+  const ref = data.id
+    ? doc(firestore, resource, data.id)
+    : doc(collection(firestore, resource))
+  const id = ref.id
+  const newData = { ...data, id }
+  await setDoc(ref, newData)
+  return { data: newData }
 }
 
 export const getMyListGroup = async (

components/moderation/index.ts

@@ -1,5 +1,6 @@
 export * from "./types"
 export * from "./ListPublishedTestimony"
+export * from "./News"
 export * from "./ListReports"
 export * from "./EditReports"
 export * from "./ListProfiles"

components/moderation/moderation.tsx

@@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from "react-query"
 import { EditReports, ListReports } from "./"
 import { ListProfiles } from "./ListProfiles"
 import { ScrapeHearingList } from "./ScrapeHearing"
+import { ListNews, EditNews, CreateNews } from "./"
 import {
   createMyOne,
   getMyListGroup,
@@ -54,6 +55,13 @@ const App = () => {
           list={ScrapeHearingList}
           options={{ label: "Scrape Hearing" }}
         />
+        <Resource
+          name="news"
+          list={ListNews}
+          edit={EditNews}
+          create={CreateNews}
+          options={{ label: "In the News" }}
+        />
       </Admin>
     </QueryClientProvider>
   )

firestore.rules

@@ -69,6 +69,12 @@ service cloud.firestore {
       // Only admins can do anything with it
       allow read, write: if request.auth.token.get("role", "user") == "admin"
     }
+
+    // Admin-managed news collection used by the admin UI and public news page
+    match /news/{nid} {
+      allow read: if true;
+      allow write: if request.auth.token.get("role", "user") == "admin";
+    }
     match /users/{uid} {
       allow read, write: if request.auth.token.get("role", "user") == "admin"
       match /draftTestimony/{id} {