Skip to content

Commit

Permalink
ops: 411k and updating storage state
Browse files Browse the repository at this point in the history
  • Loading branch information
arthyn committed Feb 5, 2024
1 parent ee34806 commit f50c1c0
Show file tree
Hide file tree
Showing 17 changed files with 338 additions and 119 deletions.
1 change: 1 addition & 0 deletions desk/sys.kelvin
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
[%zuse 412]
[%zuse 411]
8 changes: 4 additions & 4 deletions ui/src/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ import { Details } from "./pages/Details";
import { Empty } from "./pages/Empty";
import { Settings } from "./pages/Settings";
import { api } from "./state/api";
import useStorageState from "./state/storage";
import { useStorage } from "./state/storage";
import { useFileStore } from "./state/useFileStore";
import { useMedia } from "./lib/useMedia";
import { isDev } from "./lib/util";

export function App() {
const { s3 } = useStorageState();
const { s3 } = useStorage();
const credentials = s3.credentials;
const configuration = s3.configuration;
const { client, createClient, getFiles } = useFileStore();
Expand All @@ -31,7 +31,7 @@ export function App() {

useEffect(() => {
async function init() {
useStorageState.getState().initialize(api);
useStorage.getState().initialize(api);
}

init();
Expand All @@ -45,7 +45,7 @@ export function App() {
if (hasCredentials) {
createClient(credentials, configuration.region);

useStorageState.setState({ hasCredentials: true });
useStorage.setState({ hasCredentials: true });
isDev && console.log("client initialized");
}
}, [credentials, configuration]);
Expand Down
4 changes: 2 additions & 2 deletions ui/src/components/FileActions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { DownloadIcon, LinkIcon, TrashIcon } from "@heroicons/react/solid";
import classNames from "classnames";
import copy from 'copy-to-clipboard';
import React, { useCallback, useState } from "react";
import useStorageState from "../state/storage";
import { useStorage } from "../state/storage";
import { File, getFileUrl, useFileStore } from "../state/useFileStore";

interface FileActionsProps {
Expand Down Expand Up @@ -39,7 +39,7 @@ function downloadResource(url: string, filename: string) {
}

export const FileActions = ({ file, className }: FileActionsProps) => {
const { s3 } = useStorageState();
const { s3 } = useStorage();
const { deleteFile } = useFileStore();
const url = getFileUrl(file.data.Key || '', s3);
const [copied, setCopied] = useState<string | null>(null);
Expand Down
4 changes: 2 additions & 2 deletions ui/src/components/FolderEdit.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { FolderIcon, XIcon } from "@heroicons/react/solid";
import React, { useCallback } from "react";
import { useForm } from "react-hook-form";
import useStorageState from "../state/storage";
import { useStorage } from "../state/storage";
import { FileStore } from "../state/useFileStore";

interface FolderEditForm {
Expand All @@ -17,7 +17,7 @@ export const FolderEdit = ({
makeFolder,
removeEditingFolder,
}: FolderEditProps) => {
const { s3 } = useStorageState();
const { s3 } = useStorage();
const { handleSubmit, register } = useForm<FolderEditForm>();

const onSubmit = useCallback(
Expand Down
4 changes: 2 additions & 2 deletions ui/src/components/FolderTree.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import React, { useCallback } from "react";
import { useDrop } from "react-dnd";
import { Link } from "react-router-dom";
import { dragTypes } from "../pages/Catalog";
import useStorageState from "../state/storage";
import { useStorage } from "../state/storage";
import {
File,
FolderTree as FolderTreeType,
Expand Down Expand Up @@ -120,7 +120,7 @@ export const FolderTree = ({
topLevelAccordion = false,
onClick,
}: FolderProps) => {
const { s3 } = useStorageState();
const { s3 } = useStorage();
const {
addFolder,
hasFiles,
Expand Down
4 changes: 2 additions & 2 deletions ui/src/components/Refresh.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { RefreshIcon } from '@heroicons/react/solid';
import classNames from 'classnames';
import React from 'react';
import useStorageState from '../state/storage';
import { useStorage } from "../state/storage";
import { useFileStore } from '../state/useFileStore';

export const Refresh = ({ className }: { className?: string }) => {
const { s3 } = useStorageState();
const { s3 } = useStorage();
const { getFiles } = useFileStore();

return (
Expand Down
4 changes: 2 additions & 2 deletions ui/src/lib/useS3Redirect.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import useStorageState from "../state/storage";
import { useStorage } from "../state/storage";

export function useS3Redirect() {
const navigate = useNavigate();
const { loaded, hasCredentials, s3 } = useStorageState();
const { loaded, hasCredentials, s3 } = useStorage();

useEffect(() => {
if (loaded && (!hasCredentials || !s3.configuration.currentBucket)) {
Expand Down
4 changes: 2 additions & 2 deletions ui/src/pages/Catalog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { FileActions } from "../components/FileActions";
import { Folder } from "../components/Folder";
import { Spinner } from "../components/Spinner";
import { useS3Redirect } from "../lib/useS3Redirect";
import useStorageState, { StorageState } from "../state/storage";
import { useStorage, StorageState } from "../state/storage";
import {
File as FileType,
FolderTree,
Expand Down Expand Up @@ -80,7 +80,7 @@ export function Catalog() {
const { pathname } = useLocation();
const match = pathname.replace(/\/page\/\d+/, '').match(/^\/folder\/(.*)/);
const page = pathname.match(/\/page\/(\d+)/)?.[1];
const { s3 } = useStorageState();
const { s3 } = useStorage();
const isMobile = useMedia('(max-width: 639px), (pointer: coarse)');
const { files, folders, currentFolder, status } = useFileStore();
const { pageSize } = useCatalog();
Expand Down
4 changes: 2 additions & 2 deletions ui/src/pages/Details.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { isImage, isVideo } from '../lib/file';
import { useS3Redirect } from '../lib/useS3Redirect';
import { getFileInfo, traverseTree, useFileStore } from '../state/useFileStore';
import { FolderTree } from '../components/FolderTree';
import useStorageState from '../state/storage';
import { useStorage } from "../state/storage";
import { Header } from '../components/Header';

function formatBytes(bytes: number, decimals = 2) {
Expand All @@ -27,7 +27,7 @@ export const Details = () => {
useS3Redirect();
const navigate = useNavigate();
const { pathname } = useLocation();
const { s3 } = useStorageState();
const { s3 } = useStorage();
const {
currentFile,
currentFolder,
Expand Down
12 changes: 5 additions & 7 deletions ui/src/pages/Empty.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import React, { useCallback, useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { Navigate } from 'react-router-dom';
import { addBucket, setAccessKeyId, setCurrentBucket, setEndpoint, setSecretAccessKey } from '@urbit/api';
import { addBucket, setAccessKeyId, setCurrentBucket, setEndpoint, setSecretAccessKey } from '../state/storage/lib';
import { api } from '../state/api';
import useStorageState from '../state/storage';
import { useStorage } from "../state/storage";
import { useAsyncCall } from '../lib/useAsyncCall';
import { useFileStore } from '../state/useFileStore';
import { Bucket, ListBucketsCommand } from '@aws-sdk/client-s3';
import { Spinner } from '../components/Spinner';

interface CredentialsSubmit {
Expand All @@ -18,7 +16,7 @@ interface CredentialsSubmit {
}

export const Empty = () => {
const { hasCredentials, s3, loaded } = useStorageState();
const { hasCredentials, s3, loaded } = useStorage();
// const credentials = s3.credentials;
// const { client } = useFileStore();
// const [buckets, setBuckets] = useState<Bucket[]>();
Expand All @@ -32,8 +30,8 @@ export const Empty = () => {
api.poke(addBucket(data.bucket));
api.poke(setCurrentBucket(data.bucket))
api.poke({
app: 's3-store',
mark: 's3-action',
app: 'storage',
mark: 'storage-action',
json: { 'set-region': data.region },
});
}, []));
Expand Down
28 changes: 21 additions & 7 deletions ui/src/pages/Settings.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { useCallback } from 'react';
import React, { useCallback, useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { addBucket, setAccessKeyId, setCurrentBucket, setEndpoint, setSecretAccessKey } from '@urbit/api';
import { addBucket, setAccessKeyId, setCurrentBucket, setEndpoint, setSecretAccessKey } from '../state/storage/lib';
import { api } from '../state/api';
import useStorageState from '../state/storage';
import { useStorage } from "../state/storage";
import { useAsyncCall } from '../lib/useAsyncCall';

interface CredentialsSubmit {
Expand All @@ -14,8 +14,22 @@ interface CredentialsSubmit {
}

export const Settings = () => {
const { s3 } = useStorageState();
const { register, handleSubmit, formState: { errors } } = useForm<CredentialsSubmit>();
const { s3 } = useStorage();
debugger;
const { register, handleSubmit, reset } = useForm<CredentialsSubmit>();

useEffect(() => {
if (s3.credentials && s3.configuration) {
reset({
endpoint: s3.credentials?.endpoint || '',
accessId: s3.credentials?.accessKeyId || '',
accessSecret: s3.credentials?.secretAccessKey || '',
bucket: s3.configuration.currentBucket,
region: s3.configuration?.region || '',
})
}

}, [s3]);

const { call: addS3Credentials, status } = useAsyncCall(useCallback(async (data: CredentialsSubmit) => {
api.poke(setEndpoint(data.endpoint))
Expand All @@ -24,8 +38,8 @@ export const Settings = () => {
api.poke(addBucket(data.bucket));
api.poke(setCurrentBucket(data.bucket))
api.poke({
app: 's3-store',
mark: 's3-action',
app: 'storage',
mark: 'storage-action',
json: { 'set-region': data.region },
});
}, []));
Expand Down
100 changes: 32 additions & 68 deletions ui/src/state/storage/index.ts
Original file line number Diff line number Diff line change
@@ -1,89 +1,53 @@
import _ from 'lodash';
import { api } from '../api';
import { reduce } from './reducer';
import { enableMapSet } from 'immer';
import { createState, createSubscription, reduceStateN } from '../base';
import { S3Credentials } from '@urbit/api';
import { BaseStorageState, StorageUpdate } from './types';
import reduce from './reducer';
import {
createState,
createSubscription,
reduceStateN,
BaseState,
} from '../base';

enableMapSet();

export interface GcpToken {
accessKey: string;
expiresIn: number;
}

export interface StorageState {
loaded: boolean;
hasCredentials: boolean;
gcp: {
configured?: boolean;
token?: GcpToken;
isConfigured: () => Promise<boolean>;
getToken: () => Promise<void>;
};
s3: {
configuration: {
buckets: Set<string>;
currentBucket: string;
region: string;
};
credentials: S3Credentials | null;
};
}

let numLoads = 0;

// @ts-ignore investigate zustand types
const useStorageState = createState<StorageState>(
export type StorageState = BaseStorageState & BaseState<BaseStorageState>;

export const useStorage = createState<BaseStorageState>(
'Storage',
(set, get) => ({
() => ({
loaded: false,
hasCredentials: false,
gcp: {
isConfigured: () => {
return api.thread({
inputMark: 'noun',
outputMark: 'json',
threadName: 'gcp-is-configured',
body: {}
});
},
getToken: async () => {
const token = await api.thread<GcpToken>({
inputMark: 'noun',
outputMark: 'gcp-token',
threadName: 'gcp-get-token',
body: {}
});
get().set((state) => {
state.gcp.token = token;
});
}
},
s3: {
configuration: {
buckets: new Set(),
currentBucket: '',
region: ''
region: '',
publicUrlBase: '',
presignedUrl: '',
service: 'credentials',
},
credentials: null
}
credentials: null,
},
}),
['loaded', 's3', 'gcp'],
['loaded', 'hasCredentials', 's3'],
[
(set, get) =>
createSubscription('storage', '/all', (e) => {
const d = _.get(e, 'storage-update', false);
if (d) {
reduceStateN(get(), d, reduce);
}

numLoads++;
if (numLoads === 2) {
set({ loaded: true });
createSubscription(
'storage',
'/all',
(e: { 'storage-update': StorageUpdate }) => {
const data = _.get(e, 'storage-update', false);
if (data) {
reduceStateN(get(), data, reduce);
}
numLoads += 1;
if (numLoads === 2) {
set({ loaded: true });
}
}
})
),
]
);

export default useStorageState;
Loading

0 comments on commit f50c1c0

Please sign in to comment.