Merge pull request #621 from MuckRock/public-project-discovery

Allow searching of public projects

src/api/project.ts

@@ -69,8 +69,8 @@ export async function removeDocumentsFromProject(
 }
 
 export async function getPublicProjects(
-  cursor?: string,
   query?: string,
+  cursor?: string,
   expand: string = DEFAULT_EXPAND,
 ): Promise<Page<Project>> {
   // Returns all public projects

src/projects/Browser.svelte

@@ -6,16 +6,19 @@
 
 <script lang="ts">
   import type { Project } from "../api/types/project";
+  import type { User } from "../api/types";
+
   import Drawer from "../common/Drawer.svelte";
   import Search, { query } from "../common/SearchInput.svelte";
   import Flex from "../common/Flex.svelte";
   import ProjectList from "./ProjectList.svelte";
-  import { newProject } from "../manager/layout";
   import Button from "../common/Button.svelte";
-  import { getProjects } from "../api/project";
-  import type { User } from "../api/types";
-  import { getMe } from "../api/orgAndUser";
   import Filters, { type FilterKey, filter } from "./Filters.svelte";
+  import Paginator from "../common/Paginator.svelte";
+
+  import { getProjects, getPublicProjects } from "../api/project";
+  import { getMe } from "../api/orgAndUser";
+  import { newProject } from "../manager/layout";
 
   let drawer: Drawer;
 
@@ -44,18 +47,22 @@
     loading = true;
     try {
       user = await getMe();
-      // if (filter === "public") {
-      //   res = await getPublicProjects($query, cursor);
-      // } else {
-      res.results = await getProjects(user.id, $query);
-      if (filter === "user") {
-        res.results = res.results.filter((project) => project.user === user.id);
+      if (filter === "public") {
+        res = await getPublicProjects($query, cursor);
       } else {
-        res.results = res.results.filter((project) => project.user !== user.id);
+        res.results = await getProjects(user.id, $query);
+        if (filter === "user") {
+          res.results = res.results.filter(
+            (project) => project.user === user.id,
+          );
+        } else {
+          res.results = res.results.filter(
+            (project) => project.user !== user.id,
+          );
+        }
       }
-      // }
     } catch (err) {
-      error = err.errorData.detail;
+      error = err?.errorData?.detail;
       projects = null;
     }
     loading = false;
@@ -84,14 +91,14 @@
       <Flex direction="column" class="list">
         <ProjectList {loading} {error} {items} bind:reload />
       </Flex>
-      <!-- {#if $filter === "public"}
+      {#if $filter === "public"}
         <Paginator
           has_next={Boolean(next_cursor)}
           has_previous={Boolean(previous_cursor)}
           on:next={loadNext}
           on:previous={loadPrev}
         />
-      {/if} -->
+      {/if}
     </Flex>
   </div>
 </Drawer>
@@ -119,11 +126,6 @@
     flex: 0 1 auto;
     margin: 0;
   }
-  .header p {
-    margin: 0;
-    font-weight: 600;
-    color: gray;
-  }
   .sidebar {
     flex: 1 1 12em;
     display: flex;

src/projects/Filters.svelte

@@ -9,11 +9,11 @@
   const FILTERS = {
     user: "Your Projects",
     shared: "Shared with you",
-    // public: "Public Projects",
+    public: "Public Projects",
   };
 
   const filterIcons: Record<FilterKey, typeof SvgComponent> = {
-    // public: Globe16,
+    public: Globe16,
     user: Person16,
     shared: People16,
   };
@@ -26,9 +26,9 @@
     <li {id} class:selected={$filter === id}>
       <Filter {name} selected={$filter === id}>
         <input slot="input" type="radio" value={id} bind:group={$filter} />
-        <span class="icon" slot="icon"
-          ><svelte:component this={filterIcons[id]} /></span
-        >
+        <span class="icon" slot="icon">
+          <svelte:component this={filterIcons[id]} />
+        </span>
       </Filter>
     </li>
   {/each}

src/projects/ProjectList.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-  import { _ } from "svelte-i18n";
   import type { Project } from "../api/types/project";
+
+  import { _ } from "svelte-i18n";
+
   import Button from "../common/Button.svelte";
   import EmptyResults from "../common/icons/EmptyResults.svelte";
   import Error from "../common/icons/Error.svelte";
   import Loader from "../common/Loader.svelte";
-  import { editProject } from "../manager/layout.js";
-
   import ListItem from "./ProjectListItem.svelte";
 
+  import { editProject } from "../manager/layout.js";
+
   export let items: Project[];
   export let loading: boolean;
   export let error: string | undefined;

src/projects/ProjectListItem.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
+  import type { Project } from "../api/types/project";
+
   import { _ } from "svelte-i18n";
+  import { Globe16, Lock16 } from "svelte-octicons";
 
   import ProjectPin from "./ProjectPin.svelte";
-  import type { Project } from "../api/types/project";
   import EditButton from "../common/EditButton.svelte";
-  import { Globe16, Lock16 } from "svelte-octicons";
-  import { projectUrl } from "../search/search.js";
   import Link from "../router/Link.svelte";
+
   import { Project as ProjectStructure } from "../structure/project";
+  import { projectUrl } from "../search/search.js";
 
   export let project: Project;
   export let editProject;
 </script>
 
 <div class="project-link">
-  <!-- TODO: Replace `Link` with `a` in `sveltekit` branch -->
   <Link toUrl={projectUrl(project)}>
     <div class="container" id={`#project-${project.id}`}>
       <div class="row margin">
@@ -33,13 +34,13 @@
           </div>
         {/if}
         {#if project.private}
-          <span class="small center center-self" title="Private Project"
-            ><Lock16 /></span
-          >
+          <span class="small center center-self" title="Private Project">
+            <Lock16 />
+          </span>
         {:else}
-          <span class="small center center-self" title="Public Project"
-            ><Globe16 /></span
-          >
+          <span class="small center center-self" title="Public Project">
+            <Globe16 />
+          </span>
         {/if}
       </div>
       {#if project.description}

src/projects/ProjectPin.svelte

@@ -14,9 +14,10 @@
 </script>
 
 <script lang="ts">
+  import Pin from "../common/Pin.svelte";
+
   import { getCsrfToken } from "../api/session.js";
   import { baseApiUrl } from "../api/base.js";
-  import Pin from "../common/Pin.svelte";
 
   export let project: Project;
   export let size = 1;