{ip}{port}
for debugging*/} -
+
+ );
+};
+
+export default FileTable;
diff --git a/src/Components/FindServiceScreen.tsx b/src/Components/FindServiceScreen.tsx
index 15d165e..b092371 100644
--- a/src/Components/FindServiceScreen.tsx
+++ b/src/Components/FindServiceScreen.tsx
@@ -1,45 +1,52 @@
-
-import React, { useContext, useState } from 'react';
-import { TextField, Button, Box, Typography, Alert, CircularProgress} from '@mui/material';
-import { Check } from '@mui/icons-material';
-import { discoverBackendServer } from '../Utils/ServerFinder';
-
-import { portContext, ipContext } from '../App';
+import React, { useContext, useState } from "react";
+import {
+ TextField,
+ Button,
+ Box,
+ Typography,
+ Alert,
+ CircularProgress,
+} from "@mui/material";
+import { discoverBackendServer } from "../Utils/ServerFinder";
+import { ServiceLocatorContext } from "../Contexts/ServiceLocatorContext";
+import { Navigate, useNavigate } from "react-router-dom";
const FindServiceScreen: React.FC = () => {
+ const { ip, setIp, port, setPort, url } = useContext(ServiceLocatorContext)!;
+ const [loading, setLoading] = useStateFiles
+
+
+
+
+
+ | Name | +Location | +Last modified | +
|---|---|---|
|
+ |
+
+
+
+ |
+ {file.modified_at.toString()} | +
+
+ );
+};
+
+export default FolderSection;
diff --git a/src/Components/TypingText.tsx b/src/Components/TypingText.tsx
new file mode 100644
index 0000000..2f400eb
--- /dev/null
+++ b/src/Components/TypingText.tsx
@@ -0,0 +1,46 @@
+import { Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+
+const TypingText = ({
+ text,
+ onFinish,
+}: {
+ text: string;
+ onFinish: () => void;
+}) => {
+ const [displayed, setDisplayed] = useStateFolders
+
+ {folders.map(({ folder_name, folder_id }) => (
+
+
+ upload form
, + file_browser: () =>file browser
, + search_bar: () =>search bar
, +} + +const ChatbotPage = () => { + const { url } = useContext(ServiceLocatorContext)! + + const [messages, setMessages] = useState
+
+ );
+};
+
+export default DrivePage;
diff --git a/src/Pages/LoginPage.tsx b/src/Pages/LoginPage.tsx
new file mode 100644
index 0000000..502d73d
--- /dev/null
+++ b/src/Pages/LoginPage.tsx
@@ -0,0 +1,98 @@
+import { useState, useContext, useEffect } from 'react'
+import { TextField, Button, Box, Typography } from '@mui/material'
+import UserLoginService from '../Services/UserLoginService'
+import { AuthContext } from '../Contexts/AuthContext'
+import { useNavigate } from 'react-router-dom'
+import { ServiceLocatorContext } from '../Contexts/ServiceLocatorContext'
+
+const LoginForm: React.FC = () => {
+ const { url } = useContext(ServiceLocatorContext)
+ const { setIsAuthenticated, isAuthenticated } = useContext(AuthContext)!
+
+ const [username, setUsername] = useState
+ {loading ? (
+
+
+
+ Invalid folder ID. Please provide a valid numeric ID.
+
+ )}
+
-
-
-
Welcome to Pandora Home Drive!
-
+
+ ;
+ createFile: (data: {
+ file_name: string;
+ folder_id: number;
+ size_bytes: number;
+ mime_type: MimeType;
+ }) => void;
+ getFile: (file_id: FileId) => Promise;
+ getFolder: (folder_id: FolderId) => Promise;
+ getSubFolders: (folder_id: FolderId) => Promise;
+ getSubFiles: (folder_id: FolderId) => Promise;
+}
+
+const FileMetadataService = (
+ backend_url: string,
+ handleError: (err: Error) => void,
+): IFileMetadataService => {
+ const gateway_client = createHTTPClient(
+ [
+ (data) => {
+ return data;
+ },
+ ],
+ [
+ (resp) => {
+ console.log(resp);
+ return resp;
+ },
+ ],
+ );
+
+ const transformFolderMetadataBody = ({
+ created_at,
+ ...rest
+ }: FolderMetadataBody): FolderMetadata => ({
+ ...rest,
+ created_at: new Date(created_at),
+ });
+ const transformFileMetadataBody = ({
+ created_at,
+ modified_at,
+ ...rest
+ }: FileMetadataBody): FileMetadata => ({
+ ...rest,
+ created_at: new Date(created_at),
+ modified_at: new Date(modified_at),
+ });
+
+ return {
+ getRootFolder: () => {
+ return gateway_client
+ .get(`${backend_url}/api/v1/files/folder/root`)
+ .then(({ created_at, ...rest }) => ({
+ ...rest,
+ created_at: new Date(created_at),
+ }))
+ .catch((err: Error) => {
+ handleError(err);
+ return null;
+ });
+ },
+ createFile: (data: {
+ file_name: string;
+ folder_id: number;
+ size_bytes: number;
+ mime_type: MimeType;
+ }) => {
+ gateway_client
+ .post(`${backend_url}/api/v1/files/upload`, {}, data)
+ .catch((err: Error) => handleError(err));
+ },
+ getFile: (id: FileId) => {
+ return gateway_client
+ .get(`${backend_url}/api/v1/files?file_id=${id}`)
+ .then(({ created_at, modified_at, ...rest }) => ({
+ ...rest,
+ created_at: new Date(created_at),
+ modified_at: new Date(modified_at),
+ }))
+ .catch((err: Error) => {
+ handleError(err);
+ return null;
+ });
+ },
+ getFolder: (id: FolderId) => {
+ return gateway_client
+ .get(
+ `${backend_url}/api/v1/files/folder?folder_id=${id}`,
+ )
+ .then(transformFolderMetadataBody)
+ .catch((err) => {
+ handleError(err);
+ return null;
+ });
+ },
+ getSubFolders: (id: FolderId): Promise => {
+ return gateway_client
+ .get(
+ `${backend_url}/api/v1/files/folder?parent_folder_id=${id}`,
+ )
+ .then((folders) => folders.map(transformFolderMetadataBody))
+ .catch((err) => {
+ handleError(err);
+ return null;
+ });
+ },
+ getSubFiles: (id: FolderId): Promise => {
+ return gateway_client
+ .get(`${backend_url}/api/v1/files?folder_id=${id}`)
+ .then((files) => files.map(transformFileMetadataBody))
+ .catch((err) => {
+ handleError(err);
+ return null;
+ });
+ },
+ };
+};
+export default FileMetadataService;
diff --git a/src/Services/UploadService.ts b/src/Services/UploadService.ts
new file mode 100644
index 0000000..974494f
--- /dev/null
+++ b/src/Services/UploadService.ts
@@ -0,0 +1,116 @@
+import { createHTTPClient } from "../Clients/HTTPClient";
+import type {
+ FileCompletionMetadata,
+ FileMetadataInsertedDTO,
+ FileUpsertionDTO,
+ FolderCompletionMetadata,
+} from "../DTOS";
+import type { FolderId } from "../types";
+
+export interface IUploadService {
+ uploadFile: (
+ file: File,
+ target_folder_id: FolderId,
+ ) => Promise;
+ uploadFolder: (
+ folder_name: string,
+ target_folder_id: FolderId,
+ ) => Promise;
+}
+const UploadService = (
+ backend_url: string,
+ handle_error: (err: Error) => void,
+): IUploadService => {
+ const gateway_client = createHTTPClient();
+ const gatherStats = (
+ file: File,
+ target_folder_id: FolderId,
+ ): FileUpsertionDTO => {
+ return {
+ file_name: file.name,
+ folder_id: target_folder_id,
+ mime_type: file.type,
+ size_bytes: file.size,
+ };
+ };
+
+ const uploadFile = async (file: File, target_folder_id: FolderId) => {
+ const uploadBody = gatherStats(file, target_folder_id);
+ return gateway_client
+ .post(
+ `${backend_url}/api/v1/files/upload`,
+ {},
+ uploadBody,
+ )
+ .then((data) => {
+ if (!data) return Promise.reject(Error("Failed to insert metadat"));
+ const { upload_link, token, complete_link, chunk_size } = data;
+
+ const totalChunks = Math.ceil(file.size / chunk_size);
+
+ const uploadChunk = async (chunkIndex: number) => {
+ const start = chunkIndex * chunk_size;
+ const end = Math.min(file.size, start + chunk_size);
+ const chunk = file.slice(start, end);
+
+ const metadata = {
+ chunk_sequence: chunkIndex,
+ chunk_size: end - start,
+ token,
+ };
+ const formData = new FormData();
+ formData.append(
+ "metadata",
+ new Blob([JSON.stringify(metadata)], { type: "application/json" }),
+ );
+ formData.append("chunk", chunk);
+ return gateway_client
+ .post(
+ upload_link,
+ {
+ "Content-Type": "multipart/form-data",
+ },
+ formData,
+ )
+ .catch(handle_error);
+ };
+
+ let promises = [];
+ for (let i = 0; i < totalChunks; i++) promises.push(uploadChunk(i));
+
+ return Promise.all(promises).then((_) =>
+ gateway_client
+ .post(complete_link, {}, { token })
+ .catch((err) => {
+ handle_error(err);
+ return null;
+ }),
+ );
+ })
+ .catch((err: Error) => {
+ handle_error(err);
+ return null;
+ });
+ };
+
+ const uploadFolder = (
+ folder_name: string,
+ target_folder_id: FolderId,
+ ): Promise =>
+ gateway_client
+ .post(
+ `${backend_url}/api/v1/files/folder/upload`,
+ {},
+ { folder_name, parent_folder_id: target_folder_id },
+ )
+ .catch((err) => {
+ handle_error(err);
+ return null;
+ });
+
+ return {
+ uploadFile,
+ uploadFolder,
+ };
+};
+export default UploadService;
diff --git a/src/Services/UserDataService.ts b/src/Services/UserDataService.ts
new file mode 100644
index 0000000..ec3f29c
--- /dev/null
+++ b/src/Services/UserDataService.ts
@@ -0,0 +1,12 @@
+import Cookies from "js-cookie";
+
+export interface UserDataService {
+ is_authenticated: () => boolean;
+}
+const UserDataService = () => {
+ const is_authenticated = () => {
+ return !!Cookies.get("session"); // Returns `true` if cookie exists
+ };
+ return { is_authenticated };
+};
+export default UserDataService;
diff --git a/src/Services/UserLoginService.ts b/src/Services/UserLoginService.ts
new file mode 100644
index 0000000..bfe5da3
--- /dev/null
+++ b/src/Services/UserLoginService.ts
@@ -0,0 +1,45 @@
+import { createHTTPClient } from "../Clients/HTTPClient";
+
+export interface UserService {
+ login: (data: { username: string; password: string }) => Promise;
+}
+
+const UserLoginService = (
+ backend_url: string,
+ handle_login_success: () => void,
+ handle_error: (err: Error) => void,
+) => {
+ const gateway_client = createHTTPClient([
+ (data) => {
+ console.log(data);
+ return data;
+ },
+ ]);
+
+ const login = ({
+ username,
+ password,
+ }: {
+ username: string;
+ password: string;
+ }): Promise => {
+ const formData = new URLSearchParams();
+ formData.append("username", username);
+ formData.append("password", password);
+
+ return gateway_client
+ .post(
+ `${backend_url}/api/v1/auth/login`,
+ {
+ "Content-Type": "application/x-www-form-urlencoded",
+ },
+ formData,
+ )
+ .then(handle_login_success)
+ .catch((err: Error) => {
+ handle_error(err);
+ });
+ };
+ return { login };
+};
+export default UserLoginService;
diff --git a/src/Utils/ServerFinder.ts b/src/Utils/ServerFinder.ts
index 63c6ff8..7ca50f4 100644
--- a/src/Utils/ServerFinder.ts
+++ b/src/Utils/ServerFinder.ts
@@ -2,54 +2,51 @@
* Discovers backend server IP on local network
* @returns {Promise} IP address if found, null otherwise
*/
-async function discoverBackendServer(port : number): Promise {
-
- const lastKnownIP: string | null = localStorage.getItem('lastKnownServerIP');
-
- if (lastKnownIP && await testServer(lastKnownIP)) {
- return lastKnownIP;
- }
-
-
- const ipPromises = Array.from({length: 255}, (_, i) => {
- const currentIP = `192.168.1.${i+1}`;
- const url = `http://${currentIP}:${port}/ping`;
- return testServer(url).then(success => success ? currentIP : null);
- });
-
- // Race all promises - first success wins
- const results = await Promise.all(ipPromises);
- const foundIP = results.find(ip => ip !== null);
-
- if (foundIP) {
- localStorage.setItem('lastKnownServerIP', foundIP);
- return foundIP;
- }
-
- return null; // No server found
- }
-
- /**
- * Tests if a server is reachable at the given URL
- * @param {string} url
- * @returns {Promise}
- */
- async function testServer(url: string): Promise {
- try {
-
- // timeout after 500ms
- const controller: AbortController = new AbortController();
- const timeout: NodeJS.Timeout = setTimeout(() => controller.abort(), 200);
-
- const response: Response = await fetch(url, {method: 'GET'});
-
- clearTimeout(timeout);
-
- return response.ok;
-
- } catch (error) {
- return false;
- }
+async function discoverBackendServer(port: number): Promise {
+ const lastKnownIP: string | null = localStorage.getItem("lastKnownServerIP");
+
+ if (lastKnownIP) {
+ const url = `http://${lastKnownIP}:${port}/ping`;
+ if (await testServer(url)) return lastKnownIP;
+ }
+
+ const ipPromises = Array.from({ length: 255 }, (_, i) => {
+ const currentIP = `192.168.1.${i + 1}`;
+ const url = `http://${currentIP}:${port}/ping`;
+ return testServer(url).then((success) => (success ? currentIP : null));
+ });
+
+ // Race all promises - first success wins
+ const results = await Promise.all(ipPromises);
+ const foundIP = results.find((ip) => ip !== null);
+
+ if (foundIP) {
+ localStorage.setItem("lastKnownServerIP", foundIP);
+ return foundIP;
+ }
+
+ return null; // No server found
+}
+
+/**
+ * Tests if a server is reachable at the given URL
+ * @param {string} url
+ * @returns {Promise}
+ */
+async function testServer(url: string): Promise {
+ try {
+ // timeout after 500ms
+ const controller: AbortController = new AbortController();
+ const timeout: NodeJS.Timeout = setTimeout(() => controller.abort(), 200);
+
+ const response: Response = await fetch(url, { method: "GET" });
+
+ clearTimeout(timeout);
+
+ return response.ok;
+ } catch (error) {
+ return false;
}
+}
export { discoverBackendServer };
diff --git a/src/Wrappers/ProtectedRoute.tsx b/src/Wrappers/ProtectedRoute.tsx
new file mode 100644
index 0000000..8e47278
--- /dev/null
+++ b/src/Wrappers/ProtectedRoute.tsx
@@ -0,0 +1,15 @@
+import { useContext, type ReactNode } from 'react'
+import { AuthContext } from '../Contexts/AuthContext'
+import { Navigate } from 'react-router-dom'
+
+export default function ({ children }: { children: ReactNode }) {
+ const { isAuthenticated } = useContext(AuthContext)
+ return isAuthenticated ? (
+ children
+ ) : (
+
-
-);
-
-
-// If you want to start measuring performance in your app, pass a function
-// // to log results (for example: reportWebVitals(console.log))
-// // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-// reportWebVitals();
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..e8096d2
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,19 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+import { ServiceLocatorProvider } from "./Contexts/ServiceLocatorContext.tsx";
+import { AuthProvider } from "./Contexts/AuthContext.tsx";
+import { FSCacheProvider } from "./Contexts/FSCacheContext";
+
+createRoot(document.getElementById("root")!).render(
+
+
+
+
+
+
+
+ ,
+);
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
deleted file mode 100644
index 6431bc5..0000000
--- a/src/react-app-env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// & {
+ created_at: string;
+};
+
+export interface User {
+ username: string;
+}
diff --git a/src/types.ts:Zone.Identifier b/src/types.ts:Zone.Identifier
new file mode 100644
index 0000000..5083922
--- /dev/null
+++ b/src/types.ts:Zone.Identifier
@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=C:\Users\pc\Downloads\PandoraDrive-client-development (1).zip
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
+
- Welcome to Pandora Home Drive!
+
+
- 
-
diff --git a/src/RegisterScreen.module.css b/src/RegisterScreen.module.css
deleted file mode 100644
index 1f4e479..0000000
--- a/src/RegisterScreen.module.css
+++ /dev/null
@@ -1,106 +0,0 @@
-.RegisterScreen {
- display: block;
- width: 100vw;
- height: 100vh;
- background-color: #282c34;
- text-align: center;
-}
-
-.Applogo {
- height: 5vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .Applogo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-/* .Appheader {
- display: flex;
- flex-direction: column;
- flex-wrap: nowrap;
- align-items: center;
- justify-content: normal;
- align-items: normal;
- align-content: normal;
- font-size: calc(10px + 2vmin);
- color: white;
-} */
-/* .framework{
- display: block;
- max-height: fit-content;
- padding: 2vh 2vh 2vh 2vh;
- border-radius: 1em;
- bottom: 0;
- background-color: #40444d;
- flex-basis: auto;
- flex-grow: 0 1 auto;
- order: 0;
-}
-
-.Clientwindow {
- display: block;
-
- background-color: #282c34;
- flex-grow: 1 1 auto;
- flex-basis: auto;
- order: 0;
-} */
-
-
-.Appheader {
- display: flex;
- flex-direction: column;
- flex-wrap: nowrap;
- justify-content: normal;
- align-items: normal;
- align-content: normal;
- height: 100vh;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.Clientwindow{
- display: flex;
-
- flex-direction: column;
- flex-wrap: nowrap;
- justify-content: normal;
- align-items: center;
- align-content: normal;
- background-color: #282c34;
- flex: 1;
- min-height: 0;
-}
-
-.framework {
- display: block;
- background-color: #40444d;
- padding: 20px;
- margin-top: auto;
-}
-
-
-.Portform{
- display: flex;
- flex-direction: column;
- flex-wrap: nowrap;
- justify-content: normal;
- align-items: normal;
- align-content: normal;
-}
-
-.Applink {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
diff --git a/src/Services/FileMetadataService.ts b/src/Services/FileMetadataService.ts
new file mode 100644
index 0000000..e7dfacd
--- /dev/null
+++ b/src/Services/FileMetadataService.ts
@@ -0,0 +1,132 @@
+import { createHTTPClient } from "../Clients/HTTPClient";
+
+import type {
+ FileId,
+ FileMetadata,
+ FileMetadataBody as FileMetadataBody,
+ FolderId,
+ FolderMetadata,
+ FolderMetadataBody,
+} from "../types";
+
+type MimeType = `${string}/${string}`;
+
+export interface IFileMetadataService {
+ getRootFolder: () => Promise- {"Written with the "} + +
+
+
+ Written with the{" "} React - - {" framework"} + {" "} + framework