interface: thread gcp through props

Basically just a grep for 's3', and I added gcp wherever it looked like
I ought to.

pkg/interface/src/logic/lib/s3.js

@@ -1,41 +0,0 @@
-import S3 from 'aws-sdk/clients/s3';
-
-export default class S3Client {
-  constructor() {
-    this.s3 = null;
-
-    this.endpoint = '';
-    this.accessKeyId = '';
-    this.secretAccesskey = '';
-  }
-
-  setCredentials(endpoint, accessKeyId, secretAccessKey) {
-    this.endpoint = endpoint;
-    this.accessKeyId = accessKeyId;
-    this.secretAccessKey = secretAccessKey;
-
-    this.s3 = new S3({
-      endpoint: endpoint,
-      credentials: {
-        accessKeyId: this.accessKeyId,
-        secretAccessKey: this.secretAccessKey
-      }
-    });
-  }
-
-  async upload(bucket, filename, buffer) {
-    const params = {
-      Bucket: bucket,
-      Key:  filename,
-      Body: buffer,
-      ACL: 'public-read',
-      ContentType: buffer.type
-    };
-
-    if(!this.s3) {
-      throw new Error('S3 not initialized');
-    }
-    return this.s3.upload(params).promise();
-  }
-}
-

pkg/interface/src/views/apps/links/LinkResource.tsx

@@ -34,8 +34,8 @@ export function LinkResource(props: LinkResourceProps) {
     associations,
     graphKeys,
     unreads,
-    s3,
     gcp,
+    s3,
     history
   } = props;
 

pkg/interface/src/views/apps/profile/components/EditProfile.tsx

@@ -114,15 +114,15 @@ export function EditProfile(props: any) {
         <Input id="nickname" label="Name" mb={3} />
         <Col width="100%">
           <Text mb={2}>Description</Text>
-          <MarkdownField id="bio" mb={3} s3={props.s3} />
+          <MarkdownField id="bio" mb={3} gcp={props.gcp} s3={props.s3} />
         </Col>
         <ColorInput id="color" label="Sigil Color" mb={3} />
         <Row mb={3} width="100%">
           <Col pr={2} width="50%">
-            <ImageInput id="cover" label="Cover Image" s3={props.s3} />
+            <ImageInput id="cover" label="Cover Image" gcp={props.gcp} s3={props.s3} />
           </Col>
           <Col pl={2} width="50%">
-            <ImageInput id="avatar" label="Profile Image" s3={props.s3} />
+            <ImageInput id="avatar" label="Profile Image" gcp={props.gcp} s3={props.s3} />
           </Col>
         </Row>
         <Checkbox mb={3} id="isPublic" label="Public Profile" />

pkg/interface/src/views/apps/profile/components/Profile.tsx

@@ -107,6 +107,7 @@ export function Profile(props: any) {
           <EditProfile
             ship={ship}
             contact={contact}
+            gcp={props.gcp}
             s3={props.s3}
             api={props.api}
             groups={props.groups}

pkg/interface/src/views/apps/profile/profile.tsx

@@ -50,6 +50,7 @@ export default function ProfileScreen(props: any) {
                   groups={props.groups}
                   contact={contact}
                   api={props.api}
+                  gcp={props.gcp}
                   s3={props.s3}
                   isEdit={isEdit}
                   isPublic={isPublic}

pkg/interface/src/views/apps/publish/PublishResource.tsx

@@ -37,6 +37,7 @@ export function PublishResource(props: PublishResourceProps) {
         location={props.location}
         unreads={props.unreads}
         graphs={props.graphs}
+        gcp={props.gcp}
         s3={props.s3}
       />
     </Box>

pkg/interface/src/views/apps/publish/components/EditPost.tsx

@@ -4,7 +4,7 @@ import { PostFormSchema, PostForm } from "./NoteForm";
 import { FormikHelpers } from "formik";
 import GlobalApi from "~/logic/api/global";
 import { RouteComponentProps, useLocation } from "react-router-dom";
-import { GraphNode, TextContent, Association, S3State } from "~/types";
+import { GraphNode, TextContent, Association, GcpState, S3State } from "~/types";
 import { getLatestRevision, editPost } from "~/logic/lib/publish";
 import {useWaitForProps} from "~/logic/lib/useWaitForProps";
 interface EditPostProps {
@@ -13,11 +13,12 @@ interface EditPostProps {
   note: GraphNode;
   api: GlobalApi;
   book: string;
+  gcp: GcpState;
   s3: S3State;
 }
 
 export function EditPost(props: EditPostProps & RouteComponentProps) {
-  const { note, book, noteId, api, ship, history, s3 } = props;
+  const { note, book, noteId, api, ship, history, gcp, s3 } = props;
   const [revNum, title, body] = getLatestRevision(note);
   const location = useLocation();
 
@@ -54,6 +55,7 @@ export function EditPost(props: EditPostProps & RouteComponentProps) {
       cancel
       history={history}
       onSubmit={onSubmit}
+      gcp={gcp}
       s3={s3}
       submitLabel="Update"
       loadingText="Updating..."

pkg/interface/src/views/apps/publish/components/MarkdownField.tsx

@@ -6,6 +6,7 @@ import { MarkdownEditor } from "./MarkdownEditor";
 
 export const MarkdownField = ({
   id,
+  gcp,
   s3,
   ...rest
 }: { id: string } & Parameters<typeof Box>[0]) => {
@@ -35,6 +36,7 @@ export const MarkdownField = ({
         onBlur={handleBlur}
         value={value}
         onChange={setValue}
+        gcp={gcp}
         s3={s3}
       />
       <ErrorLabel mt="2" hasError={!!(error && touched)}>

pkg/interface/src/views/apps/publish/components/NoteForm.tsx

@@ -9,7 +9,7 @@ import {
 import { AsyncButton } from "../../../components/AsyncButton";
 import { Formik, Form, FormikHelpers } from "formik";
 import { MarkdownField } from "./MarkdownField";
-import { S3State } from "~/types";
+import { GcpState, S3State } from "~/types";
 
 interface PostFormProps {
   initial: PostFormSchema;
@@ -21,6 +21,7 @@ interface PostFormProps {
   ) => Promise<any>;
   submitLabel: string;
   loadingText: string;
+  gcp: GcpState;
   s3: S3State;
 }
 
@@ -35,7 +36,7 @@ export interface PostFormSchema {
 }
 
 export function PostForm(props: PostFormProps) {
-  const { initial, onSubmit, submitLabel, loadingText, s3, cancel, history } = props;
+  const { initial, onSubmit, submitLabel, loadingText, gcp, s3, cancel, history } = props;
 
   return (
     <Col width="100%" height="100%" p={[2, 4]}>
@@ -66,7 +67,7 @@ export function PostForm(props: PostFormProps) {
               type="button">Cancel</Button>}
             </Row>
           </Row>
-          <MarkdownField flexGrow={1} id="body" s3={s3} />
+          <MarkdownField flexGrow={1} id="body" gcp={gcp} s3={s3} />
         </Form>
       </Formik>
     </Col>

pkg/interface/src/views/apps/publish/components/NoteRoutes.tsx

@@ -6,7 +6,15 @@ import { RouteComponentProps } from "react-router-dom";
 import Note from "./Note";
 import { EditPost } from "./EditPost";
 
-import { GraphNode, Graph, Contacts, Association, S3State, Group } from "~/types";
+import {
+  GraphNode,
+  Graph,
+  Contacts,
+  Association,
+  GcpState,
+  S3State,
+  Group
+} from "~/types";
 
 interface NoteRoutesProps {
   ship: string;
@@ -20,6 +28,7 @@ interface NoteRoutesProps {
   baseUrl?: string;
   rootUrl?: string;
   group: Group;
+  gcp: GcpState;
   s3: S3State;
 }
 

pkg/interface/src/views/apps/publish/components/NotebookRoutes.tsx

@@ -9,6 +9,7 @@ import {
   Contacts,
   Rolodex,
   Unreads,
+  GcpState,
   S3State
 } from "~/types";
 import { Center, LoadingSpinner } from "@tlon/indigo-react";
@@ -33,6 +34,7 @@ interface NotebookRoutesProps {
   rootUrl: string;
   association: Association;
   associations: Associations;
+  gcp: GcpState;
   s3: S3State;
 }
 
@@ -80,6 +82,7 @@ export function NotebookRoutes(
             association={props.association}
             graph={graph}
             baseUrl={baseUrl}
+            gcp={props.gcp}
             s3={props.s3}
           />
         )}
@@ -112,6 +115,7 @@ export function NotebookRoutes(
               contacts={notebookContacts}
               association={props.association}
               group={group}
+              gcp={props.gcp}
               s3={props.s3}
               {...routeProps}
             />

pkg/interface/src/views/apps/publish/components/new-post.tsx

@@ -6,7 +6,7 @@ import { RouteComponentProps } from "react-router-dom";
 import { PostForm, PostFormSchema } from "./NoteForm";
 import {createPost} from "~/logic/api/graph";
 import {Graph} from "~/types/graph-update";
-import {Association, S3State} from "~/types";
+import {Association, GcpState, S3State} from "~/types";
 import {newPost} from "~/logic/lib/publish";
 
 interface NewPostProps {
@@ -16,6 +16,7 @@ interface NewPostProps {
   graph: Graph;
   association: Association;
   baseUrl: string;
+  gcp: GcpState;
   s3: S3State;
 }
 
@@ -53,6 +54,7 @@ export default function NewPost(props: NewPostProps & RouteComponentProps) {
       onSubmit={onSubmit}
       submitLabel="Publish"
       loadingText="Posting..."
+      gcp={props.gcp}
       s3={props.s3}
     />
   );

pkg/interface/src/views/apps/settings/components/lib/BackgroundPicker.tsx

@@ -9,7 +9,7 @@ import {
 } from "@tlon/indigo-react";
 
 import GlobalApi from "~/logic/api/global";
-import { S3State } from "~/types";
+import { GcpState, S3State } from "~/types";
 import { ImageInput } from "~/views/components/ImageInput";
 import {ColorInput} from "~/views/components/ColorInput";
 
@@ -19,11 +19,13 @@ export function BackgroundPicker({
   bgType,
   bgUrl,
   api,
+  gcp,
   s3,
 }: {
   bgType: BgType;
   bgUrl?: string;
   api: GlobalApi;
+  gcp: GcpState;
   s3: S3State;
 }) {
 
@@ -38,6 +40,7 @@ export function BackgroundPicker({
           <ImageInput
             ml="3"
             api={api}
+            gcp={gcp}
             s3={s3}
             id="bgUrl"
             name="bgUrl"

pkg/interface/src/views/apps/settings/components/lib/DisplayForm.tsx

@@ -10,7 +10,7 @@ import * as Yup from 'yup';
 
 import GlobalApi from '~/logic/api/global';
 import { uxToHex } from '~/logic/lib/util';
-import { S3State, BackgroundConfig } from '~/types';
+import { GcpState, S3State, BackgroundConfig } from '~/types';
 import { BackgroundPicker, BgType } from './BackgroundPicker';
 import useLocalState, { LocalState } from '~/logic/state/local';
 
@@ -34,11 +34,12 @@ interface FormSchema {
 
 interface DisplayFormProps {
   api: GlobalApi;
+  gcp: GcpState;
   s3: S3State;
 }
 
 export default function DisplayForm(props: DisplayFormProps) {
-  const { api, s3 } = props;
+  const { api, gcp, s3 } = props;
 
   const { hideAvatars, hideNicknames, background, set: setLocalState } = useLocalState();
 
@@ -94,6 +95,7 @@ export default function DisplayForm(props: DisplayFormProps) {
               bgType={props.values.bgType}
               bgUrl={props.values.bgUrl}
               api={api}
+              gcp={gcp}
               s3={s3}
             />
             <Checkbox

pkg/interface/src/views/apps/settings/components/settings.tsx

@@ -13,6 +13,7 @@ type ProfileProps = StoreState & { api: GlobalApi; ship: string };
 
 export default function Settings({
   api,
+  gcp,
   s3
 }: ProfileProps) {
   return (
@@ -27,6 +28,7 @@ export default function Settings({
     >
       <DisplayForm
         api={api}
+        gcp={gcp}
         s3={s3}
       />
       <RemoteContentForm api={api} />

pkg/interface/src/views/landscape/components/GroupSettings/Admin.tsx

@@ -22,7 +22,7 @@ import { ColorInput } from "~/views/components/ColorInput";
 import { useHistory } from "react-router-dom";
 
 import { uxToHex } from "~/logic/lib/util";
-import {S3State} from "~/types";
+import {GcpState, S3State} from "~/types";
 import {ImageInput} from "~/views/components/ImageInput";
 
 interface FormSchema {
@@ -46,11 +46,12 @@ interface GroupAdminSettingsProps {
   group: Group;
   association: Association;
   api: GlobalApi;
+  gcp: GcpState;
   s3: S3State;
 }
 
 export function GroupAdminSettings(props: GroupAdminSettingsProps) {
-  const { group, association, s3 } = props;
+  const { group, association, gcp, s3 } = props;
   const { metadata } = association;
   const history = useHistory();
   const currentPrivate = "invite" in props.group.policy;
@@ -132,6 +133,7 @@ export function GroupAdminSettings(props: GroupAdminSettingsProps) {
             caption="A picture for your group"
             placeholder="Enter URL"
             disabled={disabled}
+            gcp={gcp}
             s3={s3}
           />
           <Checkbox

pkg/interface/src/views/landscape/components/GroupSettings/GroupSettings.tsx

@@ -6,7 +6,7 @@ import GlobalApi from "~/logic/api/global";
 
 import { GroupAdminSettings } from "./Admin";
 import { GroupPersonalSettings } from "./Personal";
-import { GroupNotificationsConfig, S3State } from "~/types";
+import { GroupNotificationsConfig, GcpState, S3State } from "~/types";
 import { GroupChannelSettings } from "./Channels";
 import { useHistory } from "react-router-dom";
 import {resourceFromPath, roleForShip} from "~/logic/lib/group";
@@ -21,6 +21,7 @@ interface GroupSettingsProps {
   associations: Associations;
   api: GlobalApi;
   notificationsGroupConfig: GroupNotificationsConfig;
+  gcp: GcpState;
   s3: S3State;
   baseUrl: string;
 }

pkg/interface/src/views/landscape/components/GroupsPane.tsx

@@ -71,6 +71,7 @@ export function GroupsPane(props: GroupsPaneProps) {
           association={groupAssociation!}
           group={group!}
           api={api}
+          gcp={props.gcp}
           s3={props.s3}
           notificationsGroupConfig={props.notificationsGroupConfig}
           associations={associations}

pkg/interface/src/views/landscape/components/PopoverRoutes.tsx

@@ -6,7 +6,12 @@ import { Contacts, Contact } from "~/types/contact-update";
 import { Group } from "~/types/group-update";
 import { Association } from "~/types/metadata-update";
 import GlobalApi from "~/logic/api/global";
-import { GroupNotificationsConfig, S3State, Associations } from "~/types";
+import {
+  GroupNotificationsConfig,
+  GcpState,
+  S3State,
+  Associations
+} from "~/types";
 
 import { GroupSettings } from "./GroupSettings/GroupSettings";
 import { Participants } from "./Participants";
@@ -23,6 +28,7 @@ export function PopoverRoutes(
     group: Group;
     association: Association;
     associations: Associations;
+    gcp: GcpState;
     s3: S3State;
     api: GlobalApi;
     notificationsGroupConfig: GroupNotificationsConfig;
@@ -127,6 +133,7 @@ export function PopoverRoutes(
                       api={props.api}
                       notificationsGroupConfig={props.notificationsGroupConfig}
                       associations={props.associations}
+                      gcp={props.gcp}
                       s3={props.s3}
                     />
                   )}