merge

src/addons/browser/AddOnListItem.svelte

@@ -80,7 +80,7 @@
 
   .description {
     margin: 0 0.5em;
-    opacity: 0.6z;
+    opacity: 0.6;
     font-size: 0.875em;
     line-height: 1.4;
     color: var(--darkgray);

src/addons/browser/Browser.svelte

@@ -13,6 +13,7 @@
   import Pin from "../../common/icons/Pin.svelte";
   import Star from "../../common/icons/Star.svelte";
   import Credit from "../../common/icons/Credit.svelte";
+  import Flex from "../../common/Flex.svelte";
 
   export let visible = false;
   export let per_page = 10;
@@ -80,8 +81,8 @@
         <Categories />
       </div>
     </aside>
-    <main class="results">
-      <div class="list">
+    <Flex as="main" direction="column" class="results">
+      <Flex direction="column" class="list">
         {#if $filter === "active"}
           <aside class="pinned tip">
             <div class="icon"><Pin size={1.75} /></div>
@@ -99,16 +100,14 @@
           </aside>
         {/if}
         <AddOnList {loading} {error} {items} bind:reload />
-      </div>
-      <div class="pagination">
-        <Paginator
-          has_next={Boolean(next_url)}
-          has_previous={Boolean(previous_url)}
-          on:next={loadNext}
-          on:previous={loadPrev}
-        />
-      </div>
-    </main>
+      </Flex>
+      <Paginator
+        has_next={Boolean(next_url)}
+        has_previous={Boolean(previous_url)}
+        on:next={loadNext}
+        on:previous={loadPrev}
+      />
+    </Flex>
   </div>
 </Drawer>
 
@@ -149,27 +148,22 @@
   .search {
     margin-bottom: 1em;
   }
-  .results {
+
+  /* Use of :global is required for passing style to Flex component */
+  .browser :global(.results) {
     flex: 4 1 24em;
     min-width: 20em;
     min-height: 0;
     max-height: 100%;
-    display: flex;
-    flex-direction: column;
   }
-  .results .list {
+  .browser :global(.results > .list) {
     flex: 1 1 24em;
-    display: flex;
-    flex-direction: column;
     align-items: center;
     background-color: white;
     border: 1px solid rgba(0, 0, 0, 0.25);
     border-radius: calc(2 * var(--radius));
     overflow-y: scroll;
   }
-  .results .pagination {
-    flex: 0 0 auto;
-  }
 
   .tip {
     font-size: 0.9em;

src/addons/browser/Categories.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
   import { filter, CATEGORIES } from "./browser";
-  import Filter from "./Filter.svelte";
+  import Filter from "../../common/Filter.svelte";
 </script>
 
 <div class="categories">

src/addons/browser/Filters.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { _ } from "svelte-i18n";
   import { filter, FILTERS } from "./browser";
-  import Filter from "./Filter.svelte";
+  import Filter from "../../common/Filter.svelte";
   import Pin from "../../common/icons/Pin.svelte";
   import Star from "../../common/icons/Star.svelte";
   import Infinity from "svelte-octicons/lib/Infinity16.svelte";

src/api/fixtures/orgAndUser.fixtures.js → src/api/fixtures/orgAndUser.fixtures.ts

@@ -1,4 +1,7 @@
-export const me = {
+import { Org, Page, User } from "../types";
+import { GroupOrg, IndividualOrg } from "../types/orgAndUser";
+
+export const me: User = {
   id: 4,
   avatar_url:
     "https://cdn.muckrock.com/media/account_images/allan-headshot-2016.jpg",
@@ -23,9 +26,10 @@ export const me = {
   verified_journalist: true,
 };
 
-export const users = {
+export const users: Page<User> = {
   next: null,
   previous: null,
+  count: 12,
   results: [
     {
       id: 1,
@@ -156,9 +160,10 @@ export const users = {
   ],
 };
 
-export const organizations = {
+export const organizations: Page<Org> = {
   next: null,
   previous: null,
+  count: 2,
   results: [
     {
       id: 1,
@@ -189,7 +194,7 @@ export const organizations = {
   ],
 };
 
-export const organization = {
+export const organization: GroupOrg = {
   id: 1,
   avatar_url:
     "https://squarelet-staging.s3.amazonaws.com/media/org_avatars/logo_uEHCMva.png",
@@ -203,7 +208,7 @@ export const organization = {
   plan: "Organization",
 };
 
-export const proOrg = {
+export const proOrg: IndividualOrg = {
   id: 4,
   avatar_url:
     "https://cdn.muckrock.com/media/account_images/allan-headshot-2016.jpg",
@@ -217,7 +222,7 @@ export const proOrg = {
   plan: "Professional",
 };
 
-export const freeOrg = {
+export const freeOrg: IndividualOrg = {
   id: 4,
   avatar_url:
     "https://cdn.muckrock.com/media/account_images/allan-headshot-2016.jpg",

src/api/fixtures/projects.fixtures.ts

@@ -0,0 +1,109 @@
+import { Page, Project } from "../types";
+
+export let project: Project = {
+  id: 29,
+  created_at: "2020-10-23T15:59:33.779478Z",
+  description: "",
+  edit_access: null,
+  add_remove_access: null,
+  private: false,
+  slug: "miltary-contractors",
+  title: "Miltary Contractors",
+  updated_at: "2020-10-23T15:59:33.896698Z",
+  user: 1,
+};
+
+export let editableProject: Project = {
+  id: 29,
+  created_at: "2020-10-23T15:59:33.779478Z",
+  description: "",
+  edit_access: true,
+  add_remove_access: null,
+  private: false,
+  slug: "miltary-contractors",
+  title: "Miltary Contractors",
+  updated_at: "2020-10-23T15:59:33.896698Z",
+  user: 1,
+};
+
+export let projects: Page<Project> = {
+  next: null,
+  previous: null,
+  count: 5,
+  results: [
+    {
+      id: 2,
+      created_at: "2020-10-27T16:48:08.161751Z",
+      description: "A sample set. ",
+      edit_access: null,
+      add_remove_access: null,
+      private: true,
+      slug: "defense-dept-foia",
+      title: "Defense Dept FOIA",
+      updated_at: "2020-10-27T16:48:08.168482Z",
+      user: 4,
+      pinned: true,
+    },
+    {
+      id: 5,
+      created_at: "2020-11-10T16:24:55.027446Z",
+      description:
+        "DOJ Report on Bush Administration Interrogation Memos and Related Documents released by the house judiciary committee in March 2010.",
+      edit_access: null,
+      add_remove_access: null,
+      private: false,
+      slug: "interrogation-memo-report-doj",
+      title: "Interrogation Memo Report (DOJ)",
+      updated_at: "2020-11-10T16:24:55.070632Z",
+      user: 4,
+    },
+    {
+      id: 6,
+      created_at: "2020-11-10T16:24:55.027659Z",
+      description: "",
+      edit_access: null,
+      add_remove_access: null,
+      private: false,
+      slug: "the-financial-crisis",
+      title: "The Financial Crisis",
+      updated_at: "2020-11-10T16:24:55.071378Z",
+      user: 1,
+    },
+    {
+      id: 17,
+      created_at: "2020-11-10T16:24:55.036977Z",
+      description: "",
+      edit_access: null,
+      add_remove_access: null,
+      private: false,
+      slug: "pulitzer-please",
+      title: "Pulitzer, Please",
+      updated_at: "2020-11-10T16:24:55.097554Z",
+      user: 14,
+    },
+    {
+      id: 20,
+      created_at: "2020-11-10T16:09:05.829402Z",
+      description: "",
+      edit_access: null,
+      add_remove_access: null,
+      private: false,
+      slug: "illinois",
+      title: "illinois",
+      updated_at: "2020-11-10T16:09:05.873311Z",
+      user: 3,
+    },
+    {
+      id: 21,
+      created_at: "2020-11-10T16:24:55.038969Z",
+      description: "",
+      edit_access: null,
+      add_remove_access: null,
+      private: false,
+      slug: "documentcloud",
+      title: "DocumentCloud",
+      updated_at: "2020-11-10T16:24:55.103407Z",
+      user: 4,
+    },
+  ],
+};

src/api/project.ts

@@ -10,10 +10,15 @@ import { queryBuilder } from "../util/url.js";
 import type { Page, Project, User, Document, DocumentAccess } from "./types";
 
 // Create a project
-export async function newProject(title, description): Promise<Project> {
+export async function newProject(
+  title: string,
+  description: string,
+  isPrivate: boolean,
+): Promise<Project> {
   const { data } = await session.post(apiUrl("projects/"), {
     title,
     description,
+    private: isPrivate,
   });
   return data;
 }
@@ -28,10 +33,12 @@ export async function updateProject(
   projectId: number,
   title: string,
   description: string,
+  isPrivate: boolean,
 ): Promise<Project> {
   const { data } = await session.patch(apiUrl(`projects/${projectId}/`), {
     title,
     description,
+    private: isPrivate,
   });
   return data;
 }
@@ -61,13 +68,31 @@ export async function removeDocumentsFromProject(
   );
 }
 
+export async function getPublicProjects(
+  cursor?: string,
+  query?: string,
+  expand: string = DEFAULT_EXPAND,
+): Promise<Page<Project>> {
+  // Returns all public projects
+  const { data } = await session.get(
+    queryBuilder(apiUrl("projects/"), {
+      private: false,
+      cursor,
+      query,
+      expand,
+    }),
+  );
+  return data;
+}
+
 export async function getProjects(
   userId: number,
+  query?: string,
   expand: string = DEFAULT_EXPAND,
 ): Promise<Project[]> {
   // Returns all projects
   const projects = await grabAllPages(
-    queryBuilder(apiUrl("projects/"), { user: userId, expand }),
+    queryBuilder(apiUrl("projects/"), { user: userId, query, expand }),
   );
   return projects;
 }

src/api/types/orgAndUser.ts

@@ -34,7 +34,8 @@ export interface User {
   organization: number | Org;
   organizations: number[];
   admin_organizations: number[];
-  feature_level: number;
+  feature_level?: number;
+  verified_journalist?: boolean;
 }
 
 export function isOrg(org?: null | number | Org): org is Org {

src/common/EditButton.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { Pencil16 } from "svelte-octicons";
+
+  export let title: string;
+  export let small: boolean = false;
+</script>
+
+<button
+  {title}
+  class="edit"
+  class:small
+  on:click|stopPropagation|preventDefault
+>
+  <Pencil16 />
+</button>
+
+<style>
+  .edit {
+    flex: 0 0 2rem;
+    padding: 0.25rem;
+    height: 1.5rem;
+    width: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    appearance: none;
+    fill: var(--primary);
+    background: transparent;
+    border: none;
+    border-radius: 1rem;
+    cursor: pointer;
+  }
+
+  .edit.small {
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+
+  .edit:hover {
+    fill: var(--white);
+    background: var(--primary);
+  }
+</style>