interface: storage prop unifying gcp and s3

N.B. this boldly assumes that store state will always contain a valid
storage element that will contain gcp and s3 elements. This seems like a
fair assumption.
This commit is contained in:
J 2021-03-01 21:58:03 +00:00
parent ce1c69e0d1
commit f85ef9fcb4
33 changed files with 105 additions and 136 deletions

View File

@ -64,7 +64,7 @@ class GcpManager {
#consecutiveFailures: number = 0;
private isConfigured() {
return this.#store.state.gcp.configured;
return this.#store.state.storage.gcp.configured;
}
private refreshLoop() {
@ -88,7 +88,7 @@ class GcpManager {
}
this.#api.gcp.getToken()
.then(() => {
const token = this.#store.state.gcp?.token;
const token = this.#store.state.storage.gcp?.token;
if (token) {
this.#consecutiveFailures = 0;
const interval = this.refreshInterval(token.expiresIn);

View File

@ -1,6 +1,9 @@
import {useCallback, useMemo, useEffect, useRef, useState} from 'react';
import {S3State} from '../../types/s3-update';
import {GcpState} from '../../types/gcp-state';
import {
GcpState,
S3State,
StorageState
} from '../../types';
import S3 from "aws-sdk/clients/s3";
import GcpClient from './GcpClient';
import {StorageClient, StorageAcl} from './StorageClient';
@ -15,7 +18,7 @@ export interface IuseStorage {
promptUpload: () => Promise<string | undefined>;
}
const useStorage = (s3: S3State, gcp: GcpState,
const useStorage = ({gcp, s3}: StorageState,
{ accept = '*' } = { accept: '*' }): IuseStorage => {
const [uploading, setUploading] = useState(false);

View File

@ -13,7 +13,7 @@ export default class GcpReducer<S extends GcpState>{
reduceConfigured(json, state) {
let data = json['gcp-configured'];
if (data !== undefined) {
state.gcp.configured = data;
state.storage.gcp.configured = data;
}
}
@ -26,7 +26,7 @@ export default class GcpReducer<S extends GcpState>{
setToken(data: any, state: S) {
if (this.isToken(data)) {
state.gcp.token = data;
state.storage.gcp.token = data;
}
}

View File

@ -23,14 +23,14 @@ export default class S3Reducer<S extends S3State> {
credentials(json: S3Update, state: S) {
const data = _.get(json, 'credentials', false);
if (data) {
state.s3.credentials = data;
state.storage.s3.credentials = data;
}
}
configuration(json: S3Update, state: S) {
const data = _.get(json, 'configuration', false);
if (data) {
state.s3.configuration = {
state.storage.s3.configuration = {
buckets: new Set(data.buckets),
currentBucket: data.currentBucket
};
@ -39,44 +39,44 @@ export default class S3Reducer<S extends S3State> {
currentBucket(json: S3Update, state: S) {
const data = _.get(json, 'setCurrentBucket', false);
if (data && state.s3) {
state.s3.configuration.currentBucket = data;
if (data && state.storage.s3) {
state.storage.s3.configuration.currentBucket = data;
}
}
addBucket(json: S3Update, state: S) {
const data = _.get(json, 'addBucket', false);
if (data) {
state.s3.configuration.buckets =
state.s3.configuration.buckets.add(data);
state.storage.s3.configuration.buckets =
state.storage.s3.configuration.buckets.add(data);
}
}
removeBucket(json: S3Update, state: S) {
const data = _.get(json, 'removeBucket', false);
if (data) {
state.s3.configuration.buckets.delete(data);
state.storage.s3.configuration.buckets.delete(data);
}
}
endpoint(json: S3Update, state: S) {
const data = _.get(json, 'setEndpoint', false);
if (data && state.s3.credentials) {
state.s3.credentials.endpoint = data;
if (data && state.storage.s3.credentials) {
state.storage.s3.credentials.endpoint = data;
}
}
accessKeyId(json: S3Update , state: S) {
const data = _.get(json, 'setAccessKeyId', false);
if (data && state.s3.credentials) {
state.s3.credentials.accessKeyId = data;
if (data && state.storage.s3.credentials) {
state.storage.s3.credentials.accessKeyId = data;
}
}
secretAccessKey(json: S3Update, state: S) {
const data = _.get(json, 'setSecretAccessKey', false);
if (data && state.s3.credentials) {
state.s3.credentials.secretAccessKey = data;
if (data && state.storage.s3.credentials) {
state.storage.s3.credentials.secretAccessKey = data;
}
}
}

View File

@ -73,13 +73,15 @@ export default class GlobalStore extends BaseStore<StoreState> {
},
weather: {},
userLocation: null,
gcp: {},
s3: {
configuration: {
buckets: new Set(),
currentBucket: ''
storage: {
gcp: {},
s3: {
configuration: {
buckets: new Set(),
currentBucket: ''
},
credentials: null
},
credentials: null
},
isContactPublic: false,
contacts: {},

View File

@ -3,8 +3,7 @@ import { Invites } from '~/types/invite-update';
import { Associations } from '~/types/metadata-update';
import { Rolodex } from '~/types/contact-update';
import { Groups } from '~/types/group-update';
import { GcpState } from '~/types/gcp-state';
import { S3State } from '~/types/s3-update';
import { StorageState } from '~/types/storage-state';
import { LaunchState, WeatherState } from '~/types/launch-update';
import { ConnectionStatus } from '~/types/connection';
import {Graphs} from '~/types/graph-update';
@ -32,8 +31,7 @@ export interface StoreState {
groups: Groups;
groupKeys: Set<Path>;
nackedContacts: Set<Patp>
s3: S3State;
gcp: GcpState;
storage: StorageState;
graphs: Graphs;
graphKeys: Set<string>;

View File

@ -11,6 +11,7 @@ export * from './launch-update';
export * from './local-update';
export * from './metadata-update';
export * from './noun';
export * from './storage-state';
export * from './gcp-state';
export * from './s3-update';
export * from './workspace';

View File

@ -0,0 +1,8 @@
import {GcpState} from './gcp-state';
import {S3State} from './s3-update';
export interface StorageState {
gcp: GcpState;
s3: S3State;
};

View File

@ -179,8 +179,7 @@ export function ChatResource(props: ChatResourceProps) {
(!showBanner && hasLoadedAllowed) ? contacts : modifiedContacts
}
onUnmount={appendUnsent}
gcp={props.gcp}
s3={props.s3}
storage={props.storage}
placeholder="Message..."
message={unsent[station] || ''}
deleteMessage={clearUnsent}

View File

@ -7,7 +7,7 @@ import { createPost } from '~/logic/api/graph';
import tokenizeMessage, { isUrl } from '~/logic/lib/tokenizeMessage';
import GlobalApi from '~/logic/api/global';
import { Envelope } from '~/types/chat-update';
import { Contacts, Content } from '~/types';
import { StorageState, Contacts, Content } from '~/types';
import { Row, BaseImage, Box, Icon, LoadingSpinner } from '@tlon/indigo-react';
import withStorage from '~/views/components/withStorage';
import { withLocalState } from '~/logic/state/local';
@ -20,8 +20,7 @@ type ChatInputProps = IuseStorage & {
envelopes: Envelope[];
contacts: Contacts;
onUnmount(msg: string): void;
gcp: any;
s3: any;
storage: StorageState;
placeholder: string;
message: string;
deleteMessage(): void;

View File

@ -34,8 +34,7 @@ export function LinkResource(props: LinkResourceProps) {
associations,
graphKeys,
unreads,
gcp,
s3,
storage,
history
} = props;
@ -71,8 +70,7 @@ export function LinkResource(props: LinkResourceProps) {
render={(props) => {
return (
<LinkWindow
gcp={gcp}
s3={s3}
storage={storage}
association={resource}
contacts={contacts}
resource={resourcePath}

View File

@ -30,8 +30,7 @@ interface LinkWindowProps {
group: Group;
path: string;
api: GlobalApi;
gcp: GcpState;
s3: S3State;
storage: StorageState;
}
export function LinkWindow(props: LinkWindowProps) {
const { graph, api, association } = props;
@ -67,7 +66,7 @@ export function LinkWindow(props: LinkWindowProps) {
return (
<Col key={0} mx="auto" mt="4" maxWidth="768px" width="100%" flexShrink={0} px={3}>
{ canWrite ? (
<LinkSubmit gcp={props.gcp} s3={props.s3} name={name} ship={ship.slice(1)} api={api} />
<LinkSubmit storage={props.storage} name={name} ship={ship.slice(1)} api={api} />
) : (
<Text>There are no links here yet. You do not have permission to post to this collection.</Text>
)
@ -98,7 +97,7 @@ export function LinkWindow(props: LinkWindowProps) {
return (
<React.Fragment key={index.toString()}>
<Col key={index.toString()} mx="auto" mt="4" maxWidth="768px" width="100%" flexShrink={0} px={3}>
<LinkSubmit gcp={props.gcp} s3={props.s3} name={name} ship={ship.slice(1)} api={api} />
<LinkSubmit storage={props.storage} name={name} ship={ship.slice(1)} api={api} />
</Col>
<LinkItem {...linkProps} />
</React.Fragment>

View File

@ -3,22 +3,21 @@ import React, { useCallback, useState } from "react";
import GlobalApi from "~/logic/api/global";
import { useFileDrag } from "~/logic/lib/useDrag";
import useStorage from "~/logic/lib/useStorage";
import { GcpState, S3State } from "~/types";
import { StorageState } from "~/types";
import SubmitDragger from "~/views/components/SubmitDragger";
import { createPost } from "~/logic/api/graph";
import { hasProvider } from "oembed-parser";
interface LinkSubmitProps {
api: GlobalApi;
gcp: GcpState;
s3: S3State;
storage: StorageState;
name: string;
ship: string;
};
const LinkSubmit = (props: LinkSubmitProps) => {
let { canUpload, uploadDefault, uploading, promptUpload } =
useStorage(props.s3, props.gcp);
useStorage(props.storage);
const [submitFocused, setSubmitFocused] = useState(false);
const [urlFocused, setUrlFocused] = useState(false);

View File

@ -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} gcp={props.gcp} s3={props.s3} />
<MarkdownField id="bio" mb={3} storage={props.storage} />
</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" gcp={props.gcp} s3={props.s3} />
<ImageInput id="cover" label="Cover Image" storage={props.storage} />
</Col>
<Col pl={2} width="50%">
<ImageInput id="avatar" label="Profile Image" gcp={props.gcp} s3={props.s3} />
<ImageInput id="avatar" label="Profile Image" storage={props.storage} />
</Col>
</Row>
<Checkbox mb={3} id="isPublic" label="Public Profile" />

View File

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

View File

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

View File

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

View File

@ -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, GcpState, S3State } from "~/types";
import { GraphNode, TextContent, Association, StorageState } from "~/types";
import { getLatestRevision, editPost } from "~/logic/lib/publish";
import {useWaitForProps} from "~/logic/lib/useWaitForProps";
interface EditPostProps {
@ -13,12 +13,11 @@ interface EditPostProps {
note: GraphNode;
api: GlobalApi;
book: string;
gcp: GcpState;
s3: S3State;
storage: StorageState;
}
export function EditPost(props: EditPostProps & RouteComponentProps) {
const { note, book, noteId, api, ship, history, gcp, s3 } = props;
const { note, book, noteId, api, ship, history, storage } = props;
const [revNum, title, body] = getLatestRevision(note);
const location = useLocation();
@ -55,8 +54,7 @@ export function EditPost(props: EditPostProps & RouteComponentProps) {
cancel
history={history}
onSubmit={onSubmit}
gcp={gcp}
s3={s3}
storage={storage}
submitLabel="Update"
loadingText="Updating..."
/>

View File

@ -17,7 +17,7 @@ import { Box } from "@tlon/indigo-react";
import { useFileDrag } from "~/logic/lib/useDrag";
import SubmitDragger from "~/views/components/SubmitDragger";
import useStorage from "~/logic/lib/useStorage";
import { GcpState, S3State } from "~/types";
import { StorageState } from "~/types";
const MARKDOWN_CONFIG = {
name: "markdown",
@ -28,8 +28,7 @@ interface MarkdownEditorProps {
value: string;
onChange: (s: string) => void;
onBlur?: (e: any) => void;
gcp: GcpState;
s3: S3State;
storage: StorageState;
}
const PromptIfDirty = () => {
@ -75,7 +74,7 @@ export function MarkdownEditor(
[onBlur]
);
const { uploadDefault, canUpload } = useStorage(props.s3, props.gcp);
const { uploadDefault, canUpload } = useStorage(props.storage);
const onFileDrag = useCallback(
async (files: FileList | File[], e: DragEvent) => {

View File

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

View File

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

View File

@ -11,8 +11,7 @@ import {
Graph,
Contacts,
Association,
GcpState,
S3State,
StorageState,
Group
} from "~/types";
@ -28,8 +27,7 @@ interface NoteRoutesProps {
baseUrl?: string;
rootUrl?: string;
group: Group;
gcp: GcpState;
s3: S3State;
storage: StorageState;
}
export function NoteRoutes(props: NoteRoutesProps & RouteComponentProps) {

View File

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

View File

@ -16,8 +16,7 @@ interface NewPostProps {
graph: Graph;
association: Association;
baseUrl: string;
gcp: GcpState;
s3: S3State;
storage: StorageState;
}
export default function NewPost(props: NewPostProps & RouteComponentProps) {
@ -54,8 +53,7 @@ export default function NewPost(props: NewPostProps & RouteComponentProps) {
onSubmit={onSubmit}
submitLabel="Publish"
loadingText="Posting..."
gcp={props.gcp}
s3={props.s3}
storage={props.storage}
/>
);
}

View File

@ -9,7 +9,7 @@ import {
} from "@tlon/indigo-react";
import GlobalApi from "~/logic/api/global";
import { GcpState, S3State } from "~/types";
import { StorageState, } from "~/types";
import { ImageInput } from "~/views/components/ImageInput";
import {ColorInput} from "~/views/components/ColorInput";
@ -19,14 +19,12 @@ export function BackgroundPicker({
bgType,
bgUrl,
api,
gcp,
s3,
storage,
}: {
bgType: BgType;
bgUrl?: string;
api: GlobalApi;
gcp: GcpState;
s3: S3State;
storage: StorageState;
}) {
const rowSpace = { my: 0, alignItems: 'center' };
@ -40,8 +38,7 @@ export function BackgroundPicker({
<ImageInput
ml="3"
api={api}
gcp={gcp}
s3={s3}
storage={storage}
id="bgUrl"
name="bgUrl"
label="URL"

View File

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

View File

@ -13,8 +13,7 @@ type ProfileProps = StoreState & { api: GlobalApi; ship: string };
export default function Settings({
api,
gcp,
s3
storage,
}: ProfileProps) {
return (
<Box
@ -28,11 +27,10 @@ export default function Settings({
>
<DisplayForm
api={api}
gcp={gcp}
s3={s3}
storage={storage}
/>
<RemoteContentForm api={api} />
<S3Form api={api} s3={s3} />
<S3Form api={api} s3={storage.s3} />
<SecuritySettings api={api} />
</Box>
);

View File

@ -10,22 +10,20 @@ import {
BaseInput
} from "@tlon/indigo-react";
import { useField } from "formik";
import { S3State } from "~/types/s3-update";
import { GcpState } from "~/types/gcp-state";
import { StorageState } from "~/types/storage-state";
import useStorage from "~/logic/lib/useStorage";
type ImageInputProps = Parameters<typeof Box>[0] & {
id: string;
label: string;
s3: S3State;
gcp: GcpState;
storage: StorageState;
placeholder?: string;
};
export function ImageInput(props: ImageInputProps) {
const { id, label, s3, gcp, caption, placeholder, ...rest } = props;
const { id, label, storage, caption, placeholder, ...rest } = props;
const { uploadDefault, canUpload, uploading } = useStorage(s3, gcp);
const { uploadDefault, canUpload, uploading } = useStorage(storage);
const [field, meta, { setValue, setError }] = useField(id);

View File

@ -3,7 +3,7 @@ import useStorage from "~/logic/lib/useStorage";
const withStorage = (Component, params = {}) => {
return React.forwardRef((props: any, ref) => {
const storage = useStorage(props.s3, props.gcp, params);
const storage = useStorage(props.storage, params);
return <Component ref={ref} {...storage} {...props} />;
});

View File

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

View File

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

View File

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

View File

@ -6,12 +6,7 @@ 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,
GcpState,
S3State,
Associations
} from "~/types";
import { GroupNotificationsConfig, StorageState, Associations } from "~/types";
import { GroupSettings } from "./GroupSettings/GroupSettings";
import { Participants } from "./Participants";
@ -28,8 +23,7 @@ export function PopoverRoutes(
group: Group;
association: Association;
associations: Associations;
gcp: GcpState;
s3: S3State;
storage: StorageState;
api: GlobalApi;
notificationsGroupConfig: GroupNotificationsConfig;
rootIdentity: Contact;
@ -133,8 +127,7 @@ export function PopoverRoutes(
api={props.api}
notificationsGroupConfig={props.notificationsGroupConfig}
associations={props.associations}
gcp={props.gcp}
s3={props.s3}
storage={props.storage}
/>
)}
{view === "participants" && (