Skip to content

Commit

Permalink
add fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
mitagmio committed Nov 11, 2023
1 parent 699501c commit 9f7a40c
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 102 deletions.
1 change: 1 addition & 0 deletions ton-drive-backend/Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ RUN chmod +x storage-daemon-cli
WORKDIR /usr/src/base

# Create symlink for volume and remove frontend
RUN ln -s /usr/src/base/ton-drive-backend /usr/src/app/ton-drive-backend
RUN ln -s /usr/src/base/ton-drive-backend /usr/src/app \
&& rm -rf /usr/src/base/ton-drive-frontend

Expand Down
17 changes: 6 additions & 11 deletions ton-drive-frontend/src/shared/ui/ContractLink.tsx
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
export interface ContractLinkProps {
className?: string
address: string
className?: string;
address: string;
}

export default function ContractLink({className, address}: ContractLinkProps) {
export default function ContractLink({ className, address }: ContractLinkProps) {
return (
<a
href={`https://tonscan.org/address/${address}`}
target="_blank"
className={`link link-primary ${className ?? ''}`}
>
{address}
<a href={`https://tonscan.org/address/${address}`} target="_blank" className={`link link-primary ${className ?? ""}`}>
{address.substring(0, 4) + "***" + address.substring(address.length - 4, address.length)}
</a>
)

);
}
139 changes: 59 additions & 80 deletions ton-drive-frontend/src/widgets/FileUploadCard.tsx
Original file line number Diff line number Diff line change
@@ -1,120 +1,99 @@
import { useState, useMemo, useRef } from "react";
import {type FormEvent} from "react"
import {useTonClient} from "../shared/hooks/useTonClient";
import {useTonConnect} from "../shared/hooks/useTonConnect";
import {useTonAddress} from "@tonconnect/ui-react";
import { type FormEvent } from "react";
import { useTonClient } from "../shared/hooks/useTonClient";
import { useTonConnect } from "../shared/hooks/useTonConnect";
import { useTonAddress } from "@tonconnect/ui-react";
import { uploadFile } from "../features/file/api/uploadFile";
import FileTypeIcon from "../entities/file/ui/FileTypeIcon";
import { splitFileName } from "../entities/file/utils/splitFileName";
import { createFileContract } from "../features/file/api/createFileContract";

export interface FileUploadProps {
className?: string;
className?: string;
}

export default function FileUpload({className = ''}: FileUploadProps) {
const [isUploading, setIsUploading] = useState(false)
const [isCreatingContract, setIsCreatingContract] = useState(false)
const isFetching = isUploading || isCreatingContract
const tonClient = useTonClient()
const sender = useTonConnect().sender
const wallet = useTonAddress()
export default function FileUpload({ className = "" }: FileUploadProps) {
const [isUploading, setIsUploading] = useState(false);
const [isCreatingContract, setIsCreatingContract] = useState(false);
const isFetching = isUploading || isCreatingContract;
const tonClient = useTonClient();
const sender = useTonConnect().sender;
const wallet = useTonAddress();

const [fileString, setFileString] = useState<string | null>(null)
const [fileName, fileExtension] = useMemo(() => splitFileName(fileString ?? ''), [fileString])
const [isDragOver, setIsDragOver] = useState(false)
const fileInputRef = useRef<HTMLInputElement>(null)
const [fileString, setFileString] = useState<string | null>(null);
const [fileName, fileExtension] = useMemo(() => splitFileName(fileString ?? ""), [fileString]);
const [isDragOver, setIsDragOver] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null);

function handleReset(e?: FormEvent<HTMLFormElement>) {
if (fileInputRef.current == null) {
return
return;
}
fileInputRef.current.value = ''
handleFileChange()
fileInputRef.current.value = "";
handleFileChange();
}

function handleFileChange(e?: FormEvent<HTMLInputElement>) {
if (!e) {
setFileString(null)
return
setFileString(null);
return;
}
const file = e.currentTarget.files?.item(0)
const file = e.currentTarget.files?.item(0);
if (file == null) {
setFileString(null)
return
setFileString(null);
return;
}
setFileString(file.name)
setFileString(file.name);
}

async function handleFileUpload(e: FormEvent<HTMLFormElement>) {
e.preventDefault()
const formData = new FormData(e.currentTarget)
const file = formData.get('file')
e.preventDefault();
const formData = new FormData(e.currentTarget);
const file = formData.get("file");

if (file == null) {
throw new Error("File not chosen")
throw new Error("File not chosen");
}

if (!(file instanceof File)) {
throw new Error(`File is not instance of File: ${file}`)
throw new Error(`File is not instance of File: ${file}`);
}

if (file.size === 0) {
throw new Error('File is empty')
throw new Error("File is empty");
}

setIsUploading(true)
const bagId = await uploadFile(file)
setIsUploading(false)
setIsCreatingContract(true)
await createFileContract({ tonClient, bagId, sender, wallet, file })
setIsCreatingContract(false)
handleReset()
setIsUploading(true);
const bagId = await uploadFile(file);
setIsUploading(false);
setIsCreatingContract(true);
await createFileContract({ tonClient, bagId, sender, wallet, file });
setIsCreatingContract(false);
handleReset();
}

return (
<div className={`card card-compact sm:card-normal bg-base-200 ${className}`}>
<form
onSubmit={handleFileUpload}
onReset={handleReset}
encType='multipart/form-data'
className="card-body gap-y-2"
aria-disabled={isFetching}>
<h2 className="card-title">Upload File</h2>
<label htmlFor="file-input"
onDragOver={() => setIsDragOver(true)}
onDragLeave={() => setIsDragOver(false)}
onDrop={() => setIsDragOver(false)}
onDragEnd={() => setIsDragOver(false)}
onDragExit={() => setIsDragOver(false)}
className={`relative block w-full h-32 rounded-lg ${isDragOver || fileString ? 'outline-dashed outline-accent' : 'outline-dotted'}`}>
<div className="flex flex-col h-full items-center justify-center">
<FileTypeIcon extension={fileExtension} className={`w-16 h-16 ${isDragOver || fileString ? 'stroke-accent' : ''}`}/>
{
isDragOver ?
<h3 className={`text-xl font-bold text-accent`}>Drop me!</h3> :
fileString ?
<h3 className={`text-xl font-bold text-accent`}>File chosen: {fileString}</h3> :
<h3 className={`text-xl font-bold`}>Choose a file...</h3>
}
<div className="overflow-x-auto">
<div className={`card card-compact sm:card-normal bg-base-200 ${className}`}>
<form onSubmit={handleFileUpload} onReset={handleReset} encType="multipart/form-data" className="card-body gap-y-2" aria-disabled={isFetching}>
<h2 className="card-title">Upload File</h2>
<label htmlFor="file-input" onDragOver={() => setIsDragOver(true)} onDragLeave={() => setIsDragOver(false)} onDrop={() => setIsDragOver(false)} onDragEnd={() => setIsDragOver(false)} onDragExit={() => setIsDragOver(false)} className={`relative block w-full h-32 rounded-lg ${isDragOver || fileString ? "outline-dashed outline-accent" : "outline-dotted"}`}>
<div className="flex flex-col h-full items-center justify-center">
<FileTypeIcon extension={fileExtension} className={`w-16 h-16 ${isDragOver || fileString ? "stroke-accent" : ""}`} />
{isDragOver ? <h3 className={`text-xl font-bold text-accent`}>Drop me!</h3> : fileString ? <h3 className={`text-xl font-bold text-accent`}>File chosen: {fileString}</h3> : <h3 className={`text-xl font-bold`}>Choose a file...</h3>}
</div>
<input ref={fileInputRef} id="file-input" type="file" name="file" required disabled={isFetching} onChange={handleFileChange} className="opacity-0 absolute inset-0 block cursor-pointer" />
</label>
<div className="card-actions justify-end">
<button type="reset" disabled={isFetching || !fileString} className={`btn btn-error btn-outline btn-sm ${isFetching || !fileString ? "btn-disabled" : ""}`}>
Cancel
</button>
<button type="submit" disabled={isFetching || !fileString} className={`btn btn-accent btn-outline btn-sm ${isFetching || !fileString ? "btn-disabled" : ""}`}>
{isUploading ? "Uploading..." : isCreatingContract ? "Creating contract..." : "Upload"}
</button>
</div>
<input ref={fileInputRef} id="file-input" type='file' name='file' required disabled={isFetching}
onChange={handleFileChange}
className="opacity-0 absolute inset-0 block cursor-pointer"/>
</label>
<div className="card-actions justify-end">
<button type='reset' disabled={isFetching || !fileString}
className={`btn btn-error btn-outline btn-sm ${isFetching || !fileString ? 'btn-disabled' : ''}`}>
Cancel
</button>
<button type='submit' disabled={isFetching || !fileString}
className={`btn btn-accent btn-outline btn-sm ${isFetching || !fileString ? 'btn-disabled' : ''}`}>
{
isUploading ? 'Uploading...' : isCreatingContract ? 'Creating contract...' : 'Upload'
}
</button>
</div>
</form>
</form>
</div>
</div>
)
);
}
22 changes: 11 additions & 11 deletions ton-drive-frontend/src/widgets/FilesNavigationCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,19 +39,19 @@ export default function FilesNavigationCard({className = ""}: FilesNavigationPro

return (
<>
<div className={`card card-compact sm:card-normal bg-base-200 ${className}`}>
<div className="card-body">
<h2 className="card-title">Files</h2>
<div className="flex gap-2 flex-wrap flex-col sm:flex-row">
<FilesSearchBox files={dataToFilter} onSearch={onFilter}/>
<FilesSortControls files={dataToSort} onSort={onSort}/>
<div className="overflow-x-auto">
<div className={`card card-compact sm:card-normal bg-base-200 ${className}`}>
<div className="card-body">
<h2 className="card-title">Files</h2>
<div className="flex gap-2 flex-wrap flex-col sm:flex-row">
<FilesSearchBox files={dataToFilter} onSearch={onFilter} />
<FilesSortControls files={dataToSort} onSort={onSort} />
</div>
<FilesTable className="table-sm sm:table-md" files={files} onChooseFile={chooseFile} />
</div>
<FilesTable className="table-sm sm:table-md" files={files} onChooseFile={chooseFile}/>
</div>
</div>
{
<FileModalWithActions ref={modalRef} file={selectedFile}/>
}
{<FileModalWithActions ref={modalRef} file={selectedFile} />}
</>
)
);
}

0 comments on commit 9f7a40c

Please sign in to comment.