mirror of
https://github.com/philipredstone/relnet.git
synced 2025-06-18 05:21:16 +02:00
ach ich weiß nicht
This commit is contained in:
philipredstone
parent
56c0867a20
commit
e60ec9248d
@ -1 +0,0 @@
|
||||
node_modules
|
||||
@ -1,16 +0,0 @@
|
||||
# Ignore build outputs
|
||||
/dist
|
||||
/build
|
||||
|
||||
# Ignore dependencies
|
||||
/node_modules
|
||||
|
||||
# Ignore coverage reports
|
||||
/coverage
|
||||
|
||||
# Ignore logs
|
||||
*.log
|
||||
|
||||
# Ignore configuration files
|
||||
.env
|
||||
.env.*
|
||||
@ -1,12 +0,0 @@
|
||||
{
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"tabWidth": 2,
|
||||
"printWidth": 100,
|
||||
"trailingComma": "es5",
|
||||
"arrowParens": "avoid",
|
||||
"endOfLine": "lf",
|
||||
"bracketSpacing": true,
|
||||
"jsxSingleQuote": false,
|
||||
"bracketSameLine": false
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"format": "prettier --write \"src/**/*.{tsx,ts,js,jsx,json,css,html}\"",
|
||||
"format:check": "prettier --check \"src/**/*.{tsx,ts,js,jsx,json,css,html}\""
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^2.2.1",
|
||||
"@tailwindcss/vite": "^4.1.4",
|
||||
"axios": "^1.8.4",
|
||||
"framer-motion": "^12.7.3",
|
||||
"react": "^19.1.0",
|
||||
"react-datepicker": "^8.3.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-force-graph-2d": "^1.27.1",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-router-dom": "^7.5.0",
|
||||
"ts-node": "^10.9.2",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.2.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/axios": "^0.14.4",
|
||||
"@types/node": "^22.14.1",
|
||||
"@types/react": "^19.1.2",
|
||||
"@types/react-dom": "^19.1.2",
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
"@vitejs/plugin-react": "^4.4.0",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"postcss": "^8.4.32",
|
||||
"prettier": "^3.5.3",
|
||||
"tailwindcss": "^4.1.4",
|
||||
"webpack": "^5.99.5",
|
||||
"webpack-cli": "^6.0.1"
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
@import 'tailwindcss';
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,113 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
/* Visit https://aka.ms/tsconfig to read more about this file */
|
||||
|
||||
/* Projects */
|
||||
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
|
||||
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
|
||||
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
|
||||
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
|
||||
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
|
||||
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
|
||||
|
||||
/* Language and Environment */
|
||||
"target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
|
||||
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
|
||||
"jsx": "preserve", /* Specify what JSX code is generated. */
|
||||
// "libReplacement": true, /* Enable lib replacement. */
|
||||
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
|
||||
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
|
||||
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
|
||||
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
|
||||
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
|
||||
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
|
||||
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
|
||||
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
|
||||
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
|
||||
|
||||
/* Modules */
|
||||
"module": "commonjs", /* Specify what module code is generated. */
|
||||
"rootDir": "./src", /* Specify the root folder within your source files. */
|
||||
// "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
|
||||
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
|
||||
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
|
||||
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
|
||||
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
|
||||
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
|
||||
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
||||
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
|
||||
// "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
|
||||
// "rewriteRelativeImportExtensions": true, /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
|
||||
// "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
|
||||
// "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
|
||||
// "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
|
||||
// "noUncheckedSideEffectImports": true, /* Check side effect imports. */
|
||||
// "resolveJsonModule": true, /* Enable importing .json files. */
|
||||
// "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
|
||||
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
|
||||
|
||||
/* JavaScript Support */
|
||||
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
|
||||
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
|
||||
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
|
||||
|
||||
/* Emit */
|
||||
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
|
||||
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
|
||||
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
|
||||
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
|
||||
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
|
||||
// "noEmit": true, /* Disable emitting files from a compilation. */
|
||||
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
|
||||
"outDir": "./dist", /* Specify an output folder for all emitted files. */
|
||||
// "removeComments": true, /* Disable emitting comments. */
|
||||
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
|
||||
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
|
||||
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
|
||||
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
|
||||
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
|
||||
// "newLine": "crlf", /* Set the newline character for emitting files. */
|
||||
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
|
||||
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
|
||||
"noEmitOnError": false, /* Disable emitting files if any type checking errors are reported. */
|
||||
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
|
||||
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
|
||||
|
||||
/* Interop Constraints */
|
||||
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
|
||||
// "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
|
||||
// "isolatedDeclarations": true, /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
|
||||
// "erasableSyntaxOnly": true, /* Do not allow runtime constructs that are not part of ECMAScript. */
|
||||
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
|
||||
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
|
||||
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
|
||||
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
|
||||
|
||||
/* Type Checking */
|
||||
"strict": true, /* Enable all strict type-checking options. */
|
||||
"noImplicitAny": false, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
|
||||
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
|
||||
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
|
||||
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
|
||||
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
|
||||
// "strictBuiltinIteratorReturn": true, /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */
|
||||
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
|
||||
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
|
||||
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
|
||||
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
|
||||
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
|
||||
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
|
||||
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
|
||||
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
|
||||
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
|
||||
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
|
||||
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
|
||||
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
|
||||
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
|
||||
|
||||
/* Completeness */
|
||||
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
|
||||
"skipLibCheck": true /* Skip type checking all .d.ts files. */
|
||||
}
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
react(),
|
||||
tailwindcss(),
|
||||
],
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
},
|
||||
});
|
||||
76
package.json
76
package.json
@ -1,51 +1,53 @@
|
||||
{
|
||||
"name": "relnet",
|
||||
"version": "1.0.0",
|
||||
"main": "dist/main.js",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "node dist/server.js",
|
||||
"dev": "nodemon --exec ts-node src/server.ts",
|
||||
"build": "tsc",
|
||||
"build:all": "npm run build && cd frontend && npm run build",
|
||||
"format": "prettier --write \"src/**/*.{ts,js,json}\"",
|
||||
"format:check": "prettier --check \"src/**/*.{ts,js,json}\"",
|
||||
"format:all": "npm run format && cd frontend && npm run format"
|
||||
"dev": "vite",
|
||||
"server": "bun run server/dev.ts",
|
||||
"dev:all": "concurrently \"bun run dev\" \"bun run server\"",
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"start": "NODE_ENV=production bun run dist/server/index.js",
|
||||
"format": "prettier --write \"src/**/*.{tsx,ts,js,jsx,json,css,html}\"",
|
||||
"format:check": "prettier --check \"src/**/*.{tsx,ts,js,jsx,json,css,html}\""
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/philipredstone/relnet.git"
|
||||
},
|
||||
"author": "Tobias Hopp <tobstr02> & Philip Rothstein <philipredstone>",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/philipredstone/relnet/issues"
|
||||
},
|
||||
"homepage": "https://github.com/philipredstone/relnet#readme",
|
||||
"description": "Visualize your network among you and your friends",
|
||||
"dependencies": {
|
||||
"bcryptjs": "^3.0.2",
|
||||
"cookie-parser": "^1.4.7",
|
||||
"@headlessui/react": "^2.2.1",
|
||||
"axios": "^1.8.4",
|
||||
"cookie-parser": "^1.4.6",
|
||||
"cors": "^2.8.5",
|
||||
"dotenv": "^16.5.0",
|
||||
"express": "^5.1.0",
|
||||
"express-validator": "^7.2.1",
|
||||
"helmet": "^8.1.0",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"mongoose": "^8.13.2"
|
||||
"dotenv": "^16.3.1",
|
||||
"express": "^4.18.2",
|
||||
"framer-motion": "^12.7.3",
|
||||
"helmet": "^7.1.0",
|
||||
"react": "^19.1.0",
|
||||
"react-datepicker": "^8.3.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-force-graph-2d": "^1.27.1",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-router-dom": "^7.5.0",
|
||||
"ts-node": "^10.9.2",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bcryptjs": "^3.0.0",
|
||||
"@types/cookie-parser": "^1.4.8",
|
||||
"@tailwindcss/vite": "^4.1.4",
|
||||
"@types/axios": "^0.14.4",
|
||||
"@types/cookie-parser": "^1.4.6",
|
||||
"@types/cors": "^2.8.17",
|
||||
"@types/dotenv": "^8.2.3",
|
||||
"@types/express": "^5.0.1",
|
||||
"@types/helmet": "^4.0.0",
|
||||
"@types/jsonwebtoken": "^9.0.9",
|
||||
"@types/mongoose": "^5.11.97",
|
||||
"@types/express": "^4.17.21",
|
||||
"@types/node": "^22.14.1",
|
||||
"nodemon": "^3.1.9",
|
||||
"@types/react": "^19.1.2",
|
||||
"@types/react-datepicker": "^4.19.6",
|
||||
"@types/react-dom": "^19.1.2",
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
"@vitejs/plugin-react": "^4.4.0",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"concurrently": "^8.2.2",
|
||||
"postcss": "^8.4.32",
|
||||
"prettier": "^3.5.3",
|
||||
"ts-node": "^10.9.2",
|
||||
"typescript": "^5.8.3"
|
||||
"tailwindcss": "^4.1.4",
|
||||
"vite-plugin-node": "^5.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
8
postcss.config.js
Normal file
8
postcss.config.js
Normal file
@ -0,0 +1,8 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@ -4,7 +4,7 @@ import User, { IUser } from '../models/user.model';
|
||||
import Network from '../models/network.model';
|
||||
import Person from '../models/person.model';
|
||||
import Relationship from '../models/relationship.model';
|
||||
import { UserRequest } from '../types/express';
|
||||
import { UserRequest } from '../../frontend/types/express';
|
||||
import { validationResult } from 'express-validator';
|
||||
import mongoose from 'mongoose';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Response } from 'express';
|
||||
import Network from '../models/network.model';
|
||||
import { UserRequest } from '../types/express';
|
||||
import { UserRequest } from '../../frontend/types/express';
|
||||
import { validationResult } from 'express-validator';
|
||||
|
||||
// Get all networks for current user and all public networks
|
||||
@ -1,7 +1,7 @@
|
||||
import { Response } from 'express';
|
||||
import Person from '../models/person.model';
|
||||
import Relationship from '../models/relationship.model';
|
||||
import { UserRequest } from '../types/express';
|
||||
import { UserRequest } from '../../frontend/types/express';
|
||||
import { validationResult } from 'express-validator';
|
||||
|
||||
// Get all people in a network
|
||||
@ -1,7 +1,7 @@
|
||||
import { Response } from 'express';
|
||||
import Relationship from '../models/relationship.model';
|
||||
import Person from '../models/person.model';
|
||||
import { UserRequest } from '../types/express';
|
||||
import { UserRequest } from '../../frontend/types/express';
|
||||
import { validationResult } from 'express-validator';
|
||||
|
||||
// Get all relationships in a network
|
||||
7
server/dev.ts
Normal file
7
server/dev.ts
Normal file
@ -0,0 +1,7 @@
|
||||
// This file is used for starting the server in development mode
|
||||
import app from './index';
|
||||
|
||||
const PORT = process.env.PORT || 3001;
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Server running on port ${PORT}`);
|
||||
});
|
||||
@ -8,9 +8,12 @@ import peopleRoutes from './routes/people.routes';
|
||||
import relationshipRoutes from './routes/relationship.routes';
|
||||
import path from 'node:path';
|
||||
import helmet from 'helmet';
|
||||
import connectDB from './config/db';
|
||||
|
||||
dotenv.config();
|
||||
|
||||
connectDB();
|
||||
|
||||
const app: Application = express();
|
||||
|
||||
// Middleware
|
||||
@ -40,7 +43,7 @@ app.use(express.json());
|
||||
app.use(cookieParser());
|
||||
app.use(
|
||||
cors({
|
||||
origin: process.env.APP_URL || 'http://localhost:3000',
|
||||
origin: 'http://0.0.0.0:3000',
|
||||
credentials: true,
|
||||
})
|
||||
);
|
||||
@ -56,10 +59,25 @@ app.get('/api/health', (req, res) => {
|
||||
res.send('OK');
|
||||
});
|
||||
|
||||
app.use(express.static(path.join(__dirname, '../frontend/dist/')));
|
||||
// In development, Vite handles static files
|
||||
// In production, we serve static files from the dist directory
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
app.use(express.static(path.resolve(__dirname, '../dist')));
|
||||
|
||||
app.use((req, res, next) => {
|
||||
res.sendFile(path.join(__dirname, '..', 'frontend/dist/index.html'));
|
||||
});
|
||||
// Always return the main index.html for any route that doesn't match an API endpoint
|
||||
app.get('*', (req, res) => {
|
||||
res.sendFile(path.resolve(__dirname, '../dist/index.html'));
|
||||
});
|
||||
} else {
|
||||
// This will be handled by the Vite dev server
|
||||
}
|
||||
|
||||
// This setup allows the server to be used both standalone and with Vite
|
||||
if (import.meta.env?.PROD) {
|
||||
const PORT = process.env.PORT || 3001;
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Server running on port ${PORT}`);
|
||||
});
|
||||
}
|
||||
|
||||
export default app;
|
||||
@ -1,7 +1,7 @@
|
||||
import { Response, NextFunction } from 'express';
|
||||
import jwt from 'jsonwebtoken';
|
||||
import User from '../models/user.model';
|
||||
import { UserRequest } from '../types/express';
|
||||
import { UserRequest } from '../../frontend/types/express';
|
||||
|
||||
// JWT secret from environment variables
|
||||
const JWT_SECRET = process.env.JWT_SECRET || 'your_jwt_secret_key_change_this';
|
||||
@ -1,6 +1,6 @@
|
||||
import { Response, NextFunction } from 'express';
|
||||
import Network from '../models/network.model';
|
||||
import { UserRequest } from '../types/express';
|
||||
import { UserRequest } from '../../frontend/types/express';
|
||||
|
||||
export const checkNetworkAccess = async (
|
||||
req: UserRequest,
|
||||
@ -5,7 +5,7 @@ import { NetworkProvider } from './context/NetworkContext';
|
||||
import Login from './components/auth/Login';
|
||||
import Register from './components/auth/Register';
|
||||
import NetworkList from './components/networks/NetworkList';
|
||||
import FriendshipNetwork from './components/FriendshipNetwork';
|
||||
import FriendshipNetwork from './pages/FriendshipNetwork';
|
||||
import Header from './components/layout/Header';
|
||||
|
||||
// Protected route component
|
||||
@ -28,13 +28,14 @@ const App: React.FC = () => {
|
||||
<AuthProvider>
|
||||
<NetworkProvider>
|
||||
<Router>
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<Header />
|
||||
<main className="flex-grow">
|
||||
<div className="flex flex-col h-screen">
|
||||
<header className="header-height">
|
||||
<Header />
|
||||
</header>
|
||||
<main className="flex-1 overflow-hidden">
|
||||
<Routes>
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/register" element={<Register />} />
|
||||
|
||||
<Route
|
||||
path="/networks"
|
||||
element={
|
||||
@ -43,16 +44,16 @@ const App: React.FC = () => {
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route
|
||||
path="/networks/:id"
|
||||
element={
|
||||
<ProtectedRoute>
|
||||
<FriendshipNetwork />
|
||||
<div className="h-full">
|
||||
<FriendshipNetwork />
|
||||
</div>
|
||||
</ProtectedRoute>
|
||||
}
|
||||
/>
|
||||
|
||||
<Route path="/" element={<Navigate to="/networks" />} />
|
||||
<Route path="*" element={<Navigate to="/networks" />} />
|
||||
</Routes>
|
||||
14
src/api/api.ts
Normal file
14
src/api/api.ts
Normal file
@ -0,0 +1,14 @@
|
||||
export const getApiUrl = (): string => {
|
||||
// const protocol = window.location.protocol;
|
||||
// const hostname = window.location.hostname;
|
||||
// const port = window.location.port;
|
||||
|
||||
// // @ts-ignore
|
||||
// if (import.meta.env.DEV) {
|
||||
// return protocol + '//' + hostname + ':5000' + '/api';
|
||||
// } else {
|
||||
// return protocol + '//' + hostname + (port ? ':' + port : '') + '/api';
|
||||
// }
|
||||
|
||||
return '/api';
|
||||
};
|
||||
@ -1,10 +1,7 @@
|
||||
import axios from 'axios';
|
||||
import { getApiUrl } from './api';
|
||||
|
||||
const protocol = window.location.protocol;
|
||||
const hostname = window.location.hostname;
|
||||
const port = window.location.port;
|
||||
|
||||
const API_URL = protocol + '//' + hostname + (port ? ':' + port : '') + '/api';
|
||||
const API_URL = getApiUrl();
|
||||
|
||||
// Configure axios
|
||||
axios.defaults.withCredentials = true;
|
||||
@ -1,10 +1,7 @@
|
||||
import axios from 'axios';
|
||||
import { getApiUrl } from './api';
|
||||
|
||||
const protocol = window.location.protocol;
|
||||
const hostname = window.location.hostname;
|
||||
const port = window.location.port;
|
||||
|
||||
const API_URL = protocol + '//' + hostname + (port ? ':' + port : '') + '/api';
|
||||
const API_URL = getApiUrl();
|
||||
|
||||
// Types
|
||||
export interface NetworkOwner {
|
||||
@ -1,10 +1,7 @@
|
||||
import axios from 'axios';
|
||||
import { getApiUrl } from './api';
|
||||
|
||||
const protocol = window.location.protocol;
|
||||
const hostname = window.location.hostname;
|
||||
const port = window.location.port;
|
||||
|
||||
const API_URL = protocol + '//' + hostname + (port ? ':' + port : '') + '/api';
|
||||
const API_URL = getApiUrl();
|
||||
|
||||
// Types
|
||||
export interface Person {
|
||||
@ -1,10 +1,7 @@
|
||||
import axios from 'axios';
|
||||
import { getApiUrl } from './api';
|
||||
|
||||
const protocol = window.location.protocol;
|
||||
const hostname = window.location.hostname;
|
||||
const port = window.location.port;
|
||||
|
||||
const API_URL = protocol + '//' + hostname + (port ? ':' + port : '') + '/api';
|
||||
const API_URL = getApiUrl();
|
||||
|
||||
// Types
|
||||
export interface Relationship {
|
||||
9
src/app.css
Normal file
9
src/app.css
Normal file
@ -0,0 +1,9 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
.header-height {
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.h-full-important {
|
||||
height: 100% !important;
|
||||
}
|
||||
575
src/components/Modals.tsx
Normal file
575
src/components/Modals.tsx
Normal file
@ -0,0 +1,575 @@
|
||||
// Modals.tsx - Modal components for the FriendshipNetwork
|
||||
|
||||
import React from 'react';
|
||||
import DatePicker from 'react-datepicker';
|
||||
import {
|
||||
FaPlus,
|
||||
FaRegCalendarAlt,
|
||||
FaSave,
|
||||
FaStar,
|
||||
FaTrash,
|
||||
FaUserFriends,
|
||||
FaUserPlus,
|
||||
} from 'react-icons/fa';
|
||||
|
||||
import { Button, FormField, Modal } from '../components/FriendshipNetworkComponents';
|
||||
|
||||
import {
|
||||
PersonNode,
|
||||
RelationshipEdge,
|
||||
RelationshipType,
|
||||
FormErrors,
|
||||
NewPersonForm,
|
||||
NewRelationshipForm,
|
||||
} from '../types/types';
|
||||
|
||||
import {
|
||||
KeyboardShortcut,
|
||||
TipItem,
|
||||
ToggleSetting,
|
||||
OptionGroup,
|
||||
ErrorMessage,
|
||||
} from './UIComponents';
|
||||
|
||||
// ==============================
|
||||
// Person Form Modal
|
||||
// ==============================
|
||||
interface PersonFormModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
formData: NewPersonForm;
|
||||
setFormData: React.Dispatch<React.SetStateAction<NewPersonForm>>;
|
||||
errors: FormErrors;
|
||||
onSubmit: (e: React.FormEvent) => void;
|
||||
isEdit?: boolean;
|
||||
}
|
||||
|
||||
export const PersonFormModal: React.FC<PersonFormModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
formData,
|
||||
setFormData,
|
||||
errors,
|
||||
onSubmit,
|
||||
isEdit = false,
|
||||
}) => {
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} title={isEdit ? 'Edit Person' : 'Add New Person'}>
|
||||
<form onSubmit={onSubmit} className="space-y-4">
|
||||
<ErrorMessage message={errors.general} />
|
||||
|
||||
<FormField label="First Name" id="firstName" required error={errors.firstName}>
|
||||
<input
|
||||
id="firstName"
|
||||
type="text"
|
||||
className={`w-full bg-slate-700 border ${errors.firstName ? 'border-red-500' : 'border-slate-600'}
|
||||
rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white`}
|
||||
placeholder="Enter first name"
|
||||
value={formData.firstName}
|
||||
onChange={e => setFormData({ ...formData, firstName: e.target.value })}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Last Name" id="lastName" required error={errors.lastName}>
|
||||
<input
|
||||
id="lastName"
|
||||
type="text"
|
||||
className={`w-full bg-slate-700 border ${errors.lastName ? 'border-red-500' : 'border-slate-600'}
|
||||
rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white`}
|
||||
placeholder="Enter last name"
|
||||
value={formData.lastName}
|
||||
onChange={e => setFormData({ ...formData, lastName: e.target.value })}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Birthday (Optional)" id="birthday">
|
||||
<div className="relative">
|
||||
<DatePicker
|
||||
id="birthday"
|
||||
selected={formData.birthday}
|
||||
onChange={(date: Date | null) => setFormData({ ...formData, birthday: date })}
|
||||
dateFormat="MMMM d, yyyy"
|
||||
placeholderText="Select birthday"
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded-md p-2
|
||||
focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"
|
||||
showYearDropdown
|
||||
dropdownMode="select"
|
||||
wrapperClassName="w-full"
|
||||
/>
|
||||
<FaRegCalendarAlt className="absolute right-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
|
||||
</div>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Notes (Optional)" id="notes">
|
||||
<textarea
|
||||
id="notes"
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded-md p-2 min-h-[80px]
|
||||
focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"
|
||||
placeholder="Add any additional information"
|
||||
value={formData.notes}
|
||||
onChange={e => setFormData({ ...formData, notes: e.target.value })}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<div className="flex justify-end space-x-2 pt-2">
|
||||
<Button variant="secondary" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" variant="primary" icon={isEdit ? <FaSave /> : <FaUserPlus />}>
|
||||
{isEdit ? 'Save Changes' : 'Add Person'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
// ==============================
|
||||
// Relationship Form Modal
|
||||
// ==============================
|
||||
interface RelationshipFormModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
formData: NewRelationshipForm;
|
||||
setFormData: React.Dispatch<React.SetStateAction<NewRelationshipForm>>;
|
||||
errors: FormErrors;
|
||||
onSubmit: (e: React.FormEvent) => void;
|
||||
people: PersonNode[];
|
||||
relationshipLabels: Record<RelationshipType, string>;
|
||||
}
|
||||
|
||||
export const RelationshipFormModal: React.FC<RelationshipFormModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
formData,
|
||||
setFormData,
|
||||
errors,
|
||||
onSubmit,
|
||||
people,
|
||||
relationshipLabels,
|
||||
}) => {
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} title="Add New Relationship">
|
||||
<form onSubmit={onSubmit} className="space-y-4">
|
||||
<ErrorMessage message={errors.general} />
|
||||
|
||||
<FormField label="Source Person" id="source" required error={errors.source}>
|
||||
<select
|
||||
id="source"
|
||||
className={`w-full bg-slate-700 border ${errors.source ? 'border-red-500' : 'border-slate-600'}
|
||||
rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white`}
|
||||
value={formData.source}
|
||||
onChange={e => setFormData({ ...formData, source: e.target.value })}
|
||||
>
|
||||
<option value="">Select person</option>
|
||||
{people.map(person => (
|
||||
<option key={`source-${person._id}`} value={person._id}>
|
||||
{person.firstName} {person.lastName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Target Person" id="target" required error={errors.target}>
|
||||
<select
|
||||
id="target"
|
||||
className={`w-full bg-slate-700 border ${errors.target ? 'border-red-500' : 'border-slate-600'}
|
||||
rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white`}
|
||||
value={formData.target}
|
||||
onChange={e => setFormData({ ...formData, target: e.target.value })}
|
||||
>
|
||||
<option value="">Select person</option>
|
||||
{people.map(person => (
|
||||
<option key={`target-${person._id}`} value={person._id}>
|
||||
{person.firstName} {person.lastName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Relationship Type" id="type" required>
|
||||
<select
|
||||
id="type"
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded-md p-2
|
||||
focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"
|
||||
value={formData.type}
|
||||
onChange={e =>
|
||||
setFormData({
|
||||
...formData,
|
||||
type: e.target.value as RelationshipType,
|
||||
})
|
||||
}
|
||||
>
|
||||
{Object.entries(relationshipLabels).map(([value, label]) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</FormField>
|
||||
|
||||
{formData.type === 'custom' && (
|
||||
<FormField label="Custom Type" id="customType" required error={errors.customType}>
|
||||
<input
|
||||
id="customType"
|
||||
type="text"
|
||||
className={`w-full bg-slate-700 border ${errors.customType ? 'border-red-500' : 'border-slate-600'}
|
||||
rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white`}
|
||||
placeholder="Enter custom relationship type"
|
||||
value={formData.customType}
|
||||
onChange={e =>
|
||||
setFormData({
|
||||
...formData,
|
||||
customType: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</FormField>
|
||||
)}
|
||||
|
||||
<FormField label="Notes (Optional)" id="relationNotes">
|
||||
<textarea
|
||||
id="relationNotes"
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded-md p-2 min-h-[60px]
|
||||
focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"
|
||||
placeholder="Add any additional information"
|
||||
value={formData.notes}
|
||||
onChange={e => setFormData({ ...formData, notes: e.target.value })}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<div className="flex items-center mt-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="bidirectional"
|
||||
className="h-4 w-4 rounded border-gray-500 text-indigo-600 focus:ring-indigo-500 bg-slate-700"
|
||||
checked={formData.bidirectional}
|
||||
onChange={e =>
|
||||
setFormData({
|
||||
...formData,
|
||||
bidirectional: e.target.checked,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<label htmlFor="bidirectional" className="ml-2 block text-sm text-gray-300">
|
||||
Create bidirectional relationship (recommended)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-2 pt-2">
|
||||
<Button variant="secondary" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" variant="primary" icon={<FaUserFriends />}>
|
||||
Add Relationship
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
// ==============================
|
||||
// Person Detail Modal
|
||||
// ==============================
|
||||
interface PersonDetailModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
person: PersonNode;
|
||||
setPerson: React.Dispatch<React.SetStateAction<PersonNode | null>>;
|
||||
errors: FormErrors;
|
||||
onSubmit: (e: React.FormEvent) => void;
|
||||
onDelete: (id: string) => void;
|
||||
relationships: RelationshipEdge[];
|
||||
people: PersonNode[];
|
||||
relationshipColors: Record<RelationshipType, string>;
|
||||
relationshipLabels: Record<RelationshipType, string>;
|
||||
onDeleteRelationship: (id: string) => void;
|
||||
onAddNewConnection: () => void;
|
||||
onNavigateToPerson: (id: string) => void;
|
||||
}
|
||||
|
||||
export const PersonDetailModal: React.FC<PersonDetailModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
person,
|
||||
setPerson,
|
||||
errors,
|
||||
onSubmit,
|
||||
onDelete,
|
||||
relationships,
|
||||
people,
|
||||
relationshipColors,
|
||||
relationshipLabels,
|
||||
onDeleteRelationship,
|
||||
onAddNewConnection,
|
||||
onNavigateToPerson,
|
||||
}) => {
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} title={`${person.firstName} ${person.lastName}`}>
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<form onSubmit={onSubmit} className="space-y-4">
|
||||
<ErrorMessage message={errors.general} />
|
||||
|
||||
<FormField label="First Name" id="editFirstName" required error={errors.firstName}>
|
||||
<input
|
||||
id="editFirstName"
|
||||
type="text"
|
||||
className={`w-full bg-slate-700 border ${errors.firstName ? 'border-red-500' : 'border-slate-600'}
|
||||
rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white`}
|
||||
value={person.firstName || ''}
|
||||
onChange={e => setPerson({ ...person, firstName: e.target.value })}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Last Name" id="editLastName" required error={errors.lastName}>
|
||||
<input
|
||||
id="editLastName"
|
||||
type="text"
|
||||
className={`w-full bg-slate-700 border ${errors.lastName ? 'border-red-500' : 'border-slate-600'}
|
||||
rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white`}
|
||||
value={person.lastName || ''}
|
||||
onChange={e => setPerson({ ...person, lastName: e.target.value })}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Birthday" id="editBirthday">
|
||||
<div className="relative">
|
||||
<DatePicker
|
||||
id="editBirthday"
|
||||
selected={person.birthday ? new Date(person.birthday) : null}
|
||||
onChange={(date: Date | null) => setPerson({ ...person, birthday: date })}
|
||||
dateFormat="MMMM d, yyyy"
|
||||
placeholderText="Select birthday"
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded-md p-2
|
||||
focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"
|
||||
showYearDropdown
|
||||
dropdownMode="select"
|
||||
wrapperClassName="w-full"
|
||||
/>
|
||||
<FaRegCalendarAlt className="absolute right-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
|
||||
</div>
|
||||
</FormField>
|
||||
|
||||
<FormField label="Notes" id="editNotes">
|
||||
<textarea
|
||||
id="editNotes"
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded-md p-2 min-h-[80px]
|
||||
focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"
|
||||
value={person.notes || ''}
|
||||
onChange={e => setPerson({ ...person, notes: e.target.value })}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<div className="flex justify-between pt-2">
|
||||
<Button variant="danger" onClick={() => onDelete(person._id)} icon={<FaTrash />}>
|
||||
Delete
|
||||
</Button>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<Button variant="secondary" onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" variant="primary" icon={<FaSave />}>
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-medium text-indigo-400 mb-2">Connections</h4>
|
||||
<div className="max-h-40 overflow-y-auto space-y-1 bg-slate-900 rounded-lg p-2">
|
||||
{relationships.filter(
|
||||
(r: RelationshipEdge) => r.source === person._id || r.target === person._id
|
||||
).length > 0 ? (
|
||||
relationships
|
||||
.filter((r: RelationshipEdge) => r.source === person._id || r.target === person._id)
|
||||
.map((rel: RelationshipEdge) => {
|
||||
const isSource = rel.source === person._id;
|
||||
const otherPersonId = isSource ? rel.target : rel.source;
|
||||
const otherPerson = people.find((p: PersonNode) => p._id === otherPersonId);
|
||||
|
||||
if (!otherPerson) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={rel._id}
|
||||
className="flex justify-between items-center py-1 px-2 hover:bg-slate-800 rounded"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mr-2"
|
||||
style={{ backgroundColor: relationshipColors[rel.type] }}
|
||||
></span>
|
||||
<span className="text-sm">
|
||||
{isSource ? 'To: ' : 'From: '}
|
||||
<span
|
||||
className="font-medium hover:text-indigo-400 cursor-pointer"
|
||||
onClick={() => onNavigateToPerson(otherPersonId)}
|
||||
>
|
||||
{otherPerson.firstName} {otherPerson.lastName}
|
||||
</span>
|
||||
{rel.type === 'custom'
|
||||
? ` (${rel.customType})`
|
||||
: ` (${relationshipLabels[rel.type]})`}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
className="text-red-400 hover:text-red-300 transition-colors"
|
||||
onClick={() => onDeleteRelationship(rel._id)}
|
||||
>
|
||||
<FaTrash size={12} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<div className="text-center py-2 text-slate-400 text-sm">No connections yet</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-3 flex justify-center">
|
||||
<Button variant="secondary" size="sm" onClick={onAddNewConnection} icon={<FaPlus />}>
|
||||
Add New Connection
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
// ==============================
|
||||
// Settings Modal
|
||||
// ==============================
|
||||
interface SettingsModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
settings: {
|
||||
darkMode: boolean;
|
||||
autoLayout: boolean;
|
||||
showLabels: boolean;
|
||||
animationSpeed: string;
|
||||
highlightConnections: boolean;
|
||||
nodeSize: string;
|
||||
};
|
||||
setSettings: React.Dispatch<
|
||||
React.SetStateAction<{
|
||||
darkMode: boolean;
|
||||
autoLayout: boolean;
|
||||
showLabels: boolean;
|
||||
animationSpeed: string;
|
||||
highlightConnections: boolean;
|
||||
nodeSize: string;
|
||||
}>
|
||||
>;
|
||||
}
|
||||
|
||||
export const SettingsModal: React.FC<SettingsModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
settings,
|
||||
setSettings,
|
||||
}) => {
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} title="Network Settings">
|
||||
<div className="space-y-4">
|
||||
{/* Toggle settings */}
|
||||
<ToggleSetting
|
||||
label="Show Labels"
|
||||
id="showLabels"
|
||||
checked={settings.showLabels}
|
||||
onChange={() => setSettings({ ...settings, showLabels: !settings.showLabels })}
|
||||
/>
|
||||
|
||||
<ToggleSetting
|
||||
label="Auto Layout"
|
||||
id="autoLayout"
|
||||
checked={settings.autoLayout}
|
||||
onChange={() => setSettings({ ...settings, autoLayout: !settings.autoLayout })}
|
||||
/>
|
||||
|
||||
<ToggleSetting
|
||||
label="Highlight Connections"
|
||||
id="highlightConnections"
|
||||
checked={settings.highlightConnections}
|
||||
onChange={() =>
|
||||
setSettings({
|
||||
...settings,
|
||||
highlightConnections: !settings.highlightConnections,
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Option groups */}
|
||||
<OptionGroup
|
||||
label="Animation Speed"
|
||||
options={['slow', 'medium', 'fast']}
|
||||
currentValue={settings.animationSpeed}
|
||||
onChange={value => setSettings({ ...settings, animationSpeed: value })}
|
||||
/>
|
||||
|
||||
<OptionGroup
|
||||
label="Node Size"
|
||||
options={['small', 'medium', 'large']}
|
||||
currentValue={settings.nodeSize}
|
||||
onChange={value => setSettings({ ...settings, nodeSize: value })}
|
||||
/>
|
||||
|
||||
<div className="pt-4 flex justify-end">
|
||||
<Button variant="primary" onClick={onClose} icon={<FaSave />}>
|
||||
Save Settings
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
// ==============================
|
||||
// Help Modal
|
||||
// ==============================
|
||||
interface HelpModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const HelpModal: React.FC<HelpModalProps> = ({ isOpen, onClose }) => {
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} title="Keyboard Shortcuts & Help" size="lg">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-md font-semibold text-indigo-400 mb-2">Keyboard Shortcuts</h3>
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<KeyboardShortcut shortcut="n" description="Add new person" />
|
||||
<KeyboardShortcut shortcut="r" description="Add new relationship" />
|
||||
<KeyboardShortcut shortcut="s" description="Toggle sidebar" />
|
||||
<KeyboardShortcut shortcut="+" description="Zoom in" />
|
||||
<KeyboardShortcut shortcut="-" description="Zoom out" />
|
||||
<KeyboardShortcut shortcut="0" description="Reset zoom" />
|
||||
<KeyboardShortcut shortcut="Ctrl+/" description="Show this help" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-md font-semibold text-indigo-400 mb-2">Tips & Tricks</h3>
|
||||
<ul className="space-y-2 text-sm text-slate-300">
|
||||
<TipItem text="Click on a person in the graph to see their details and edit their information" />
|
||||
<TipItem text="Drag people around in the graph to organize your network visually" />
|
||||
<TipItem text="Use the sidebar to filter and manage your network's people and relationships" />
|
||||
<TipItem text="Create bidirectional relationships to show mutual connections (recommended)" />
|
||||
<TipItem text="Customize the appearance and behavior in Settings" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="text-center pt-2">
|
||||
<Button variant="primary" onClick={onClose} icon={<FaStar />}>
|
||||
Got it
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
460
src/components/NetworkSidebar.tsx
Normal file
460
src/components/NetworkSidebar.tsx
Normal file
@ -0,0 +1,460 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
FaEdit,
|
||||
FaHome,
|
||||
FaSearch,
|
||||
FaTrash,
|
||||
FaUserCircle,
|
||||
FaUserFriends,
|
||||
FaUserPlus,
|
||||
} from 'react-icons/fa';
|
||||
|
||||
// Import custom UI components
|
||||
import { Button, EmptyState, Tooltip, NetworkStats } from './FriendshipNetworkComponents';
|
||||
|
||||
// Types
|
||||
type RelationshipType = 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
|
||||
|
||||
interface PersonNode {
|
||||
_id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
birthday?: Date | string | null;
|
||||
notes?: string;
|
||||
position?: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
}
|
||||
|
||||
interface RelationshipEdge {
|
||||
_id: string;
|
||||
source: string;
|
||||
target: string;
|
||||
type: RelationshipType;
|
||||
customType?: string;
|
||||
notes?: string;
|
||||
}
|
||||
|
||||
// Graph appearance constants
|
||||
const RELATIONSHIP_COLORS = {
|
||||
freund: '#60A5FA', // Light blue
|
||||
partner: '#F472B6', // Pink
|
||||
familie: '#34D399', // Green
|
||||
arbeitskolleg: '#FBBF24', // Yellow
|
||||
custom: '#9CA3AF', // Gray
|
||||
};
|
||||
|
||||
const RELATIONSHIP_LABELS = {
|
||||
freund: 'Friend',
|
||||
partner: 'Partner',
|
||||
familie: 'Family',
|
||||
arbeitskolleg: 'Colleague',
|
||||
custom: 'Custom',
|
||||
};
|
||||
|
||||
// NetworkSidebar component props
|
||||
interface NetworkSidebarProps {
|
||||
isOpen: boolean;
|
||||
currentNetwork: any;
|
||||
sidebarTab: string;
|
||||
people: PersonNode[];
|
||||
relationships: RelationshipEdge[];
|
||||
selectedPersonId: string | null;
|
||||
peopleFilter: string;
|
||||
relationshipFilter: string;
|
||||
relationshipTypeFilter: string;
|
||||
|
||||
onTabChange: (tab: string) => void;
|
||||
onPeopleFilterChange: (filter: string) => void;
|
||||
onRelationshipFilterChange: (filter: string) => void;
|
||||
onRelationshipTypeFilterChange: (type: string) => void;
|
||||
onAddPerson: () => void;
|
||||
onAddRelationship: () => void;
|
||||
onOpenSettings: () => void;
|
||||
onOpenHelp: () => void;
|
||||
onPersonDelete: (id: string) => void;
|
||||
onRelationshipDelete: (id: string) => void;
|
||||
onOpenPersonDetail: (person: PersonNode) => void;
|
||||
onNavigateBack: () => void;
|
||||
}
|
||||
|
||||
const NetworkSidebar: React.FC<NetworkSidebarProps> = ({
|
||||
isOpen,
|
||||
currentNetwork,
|
||||
sidebarTab,
|
||||
people,
|
||||
relationships,
|
||||
selectedPersonId,
|
||||
peopleFilter,
|
||||
relationshipFilter,
|
||||
relationshipTypeFilter,
|
||||
|
||||
onTabChange,
|
||||
onPeopleFilterChange,
|
||||
onRelationshipFilterChange,
|
||||
onRelationshipTypeFilterChange,
|
||||
onAddPerson,
|
||||
onAddRelationship,
|
||||
onPersonDelete,
|
||||
onRelationshipDelete,
|
||||
onOpenPersonDetail,
|
||||
onNavigateBack,
|
||||
}) => {
|
||||
// Filter logic for people and relationships
|
||||
const filteredPeople = people.filter(person =>
|
||||
`${person.firstName} ${person.lastName}`.toLowerCase().includes(peopleFilter.toLowerCase())
|
||||
);
|
||||
|
||||
const filteredRelationships = relationships.filter(rel => {
|
||||
const source = people.find(p => p._id === rel.source);
|
||||
const target = people.find(p => p._id === rel.target);
|
||||
|
||||
if (!source || !target) return false;
|
||||
|
||||
const matchesFilter =
|
||||
`${source.firstName} ${source.lastName} ${target.firstName} ${target.lastName}`
|
||||
.toLowerCase()
|
||||
.includes(relationshipFilter.toLowerCase());
|
||||
|
||||
const matchesType = relationshipTypeFilter === 'all' || rel.type === relationshipTypeFilter;
|
||||
|
||||
return matchesFilter && matchesType;
|
||||
});
|
||||
|
||||
// Sort people alphabetically
|
||||
const sortedPeople = [...filteredPeople].sort((a, b) => {
|
||||
const nameA = `${a.firstName} ${a.lastName}`.toLowerCase();
|
||||
const nameB = `${b.firstName} ${b.lastName}`.toLowerCase();
|
||||
return nameA.localeCompare(nameB);
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`bg-slate-800 border-r border-slate-700 h-full transition-all duration-300
|
||||
ease-in-out z-30 ${isOpen ? 'w-100' : 'w-0'}`}
|
||||
>
|
||||
<div className="h-full overflow-y-auto p-4">
|
||||
{/* Network Header */}
|
||||
<div className="mb-6 mt-8">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<h2 className="text-2xl font-bold text-white flex items-center">
|
||||
<span className="truncate">{currentNetwork?.name || 'Relationship Network'}</span>
|
||||
</h2>
|
||||
<Tooltip text="Back to networks">
|
||||
<button
|
||||
onClick={onNavigateBack}
|
||||
className="p-2 text-slate-400 hover:text-indigo-400 transition-colors"
|
||||
>
|
||||
<FaHome />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<p className="text-slate-400 text-sm">Visualize your connections</p>
|
||||
</div>
|
||||
|
||||
{/* Network Stats */}
|
||||
<NetworkStats people={people} relationships={relationships} />
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex space-x-2 mb-6">
|
||||
<Button variant="primary" fullWidth onClick={onAddPerson} icon={<FaUserPlus />}>
|
||||
Add Person
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
fullWidth
|
||||
onClick={onAddRelationship}
|
||||
icon={<FaUserFriends />}
|
||||
>
|
||||
Add Relation
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Sidebar Tabs */}
|
||||
<div className="flex border-b border-slate-700 mb-4">
|
||||
<button
|
||||
className={`flex-1 py-2 font-medium flex items-center justify-center ${
|
||||
sidebarTab === 'people'
|
||||
? 'text-indigo-400 border-b-2 border-indigo-400'
|
||||
: 'text-slate-400 hover:text-slate-300'
|
||||
}`}
|
||||
onClick={() => onTabChange('people')}
|
||||
>
|
||||
<FaUserCircle className="mr-2" /> People
|
||||
</button>
|
||||
<button
|
||||
className={`flex-1 py-2 font-medium flex items-center justify-center ${
|
||||
sidebarTab === 'relations'
|
||||
? 'text-indigo-400 border-b-2 border-indigo-400'
|
||||
: 'text-slate-400 hover:text-slate-300'
|
||||
}`}
|
||||
onClick={() => onTabChange('relations')}
|
||||
>
|
||||
<FaUserFriends className="mr-2" /> Relations
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
|
||||
{sidebarTab === 'people' && (
|
||||
<div>
|
||||
<div className="flex items-center mb-3">
|
||||
<div className="relative flex-1">
|
||||
<input
|
||||
type="text"
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded-md py-2 pl-8 pr-3
|
||||
text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"
|
||||
placeholder="Search people..."
|
||||
value={peopleFilter}
|
||||
onChange={e => onPeopleFilterChange(e.target.value)}
|
||||
/>
|
||||
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 max-h-[calc(100vh-350px)] overflow-y-auto pr-1">
|
||||
{sortedPeople.length > 0 ? (
|
||||
sortedPeople.map(person => {
|
||||
const connectionCount = relationships.filter(
|
||||
r => r.source === person._id || r.target === person._id
|
||||
).length;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={person._id}
|
||||
className={`bg-slate-700 rounded-lg p-3 group hover:bg-slate-600 transition-colors
|
||||
cursor-pointer border-l-4 ${
|
||||
selectedPersonId === person._id
|
||||
? 'border-l-pink-500'
|
||||
: connectionCount > 0
|
||||
? 'border-l-indigo-500'
|
||||
: 'border-l-slate-700'
|
||||
}`}
|
||||
onClick={() => {
|
||||
onOpenPersonDetail(person);
|
||||
}}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h4 className="font-medium">
|
||||
{person.firstName} {person.lastName}
|
||||
</h4>
|
||||
<div className="flex items-center text-xs text-slate-400 mt-1">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mr-1"
|
||||
style={{
|
||||
backgroundColor: connectionCount > 0 ? '#60A5FA' : '#94A3B8',
|
||||
}}
|
||||
></span>
|
||||
{connectionCount} connection{connectionCount !== 1 ? 's' : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Tooltip text="Edit">
|
||||
<button
|
||||
className="p-1 text-slate-400 hover:text-indigo-400 transition-colors"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
onOpenPersonDetail(person);
|
||||
}}
|
||||
>
|
||||
<FaEdit size={14} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<Tooltip text="Delete">
|
||||
<button
|
||||
className="p-1 text-slate-400 hover:text-red-400 transition-colors"
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
onPersonDelete(person._id);
|
||||
}}
|
||||
>
|
||||
<FaTrash size={14} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<EmptyState
|
||||
title={peopleFilter ? 'No matches found' : 'No people yet'}
|
||||
description={
|
||||
peopleFilter
|
||||
? 'Try adjusting your search criteria'
|
||||
: 'Add people to start building your network'
|
||||
}
|
||||
icon={<FaUserCircle className="text-2xl text-slate-400" />}
|
||||
action={
|
||||
!peopleFilter && (
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={onAddPerson}
|
||||
icon={<FaUserPlus />}
|
||||
>
|
||||
Add Person
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sidebarTab === 'relations' && (
|
||||
<div>
|
||||
<div className="flex items-center mb-3">
|
||||
<div className="relative flex-1">
|
||||
<input
|
||||
type="text"
|
||||
className="w-full bg-slate-700 border border-slate-600 rounded-md py-2 pl-8 pr-3
|
||||
text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white"
|
||||
placeholder="Search relationships..."
|
||||
value={relationshipFilter}
|
||||
onChange={e => onRelationshipFilterChange(e.target.value)}
|
||||
/>
|
||||
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex mb-3 overflow-x-auto pb-2 space-x-1">
|
||||
<button
|
||||
className={`px-3 py-1 text-xs rounded-full whitespace-nowrap ${
|
||||
relationshipTypeFilter === 'all'
|
||||
? 'bg-indigo-600 text-white'
|
||||
: 'bg-slate-700 text-slate-300 hover:bg-slate-600'
|
||||
}`}
|
||||
onClick={() => onRelationshipTypeFilterChange('all')}
|
||||
>
|
||||
All Types
|
||||
</button>
|
||||
{Object.entries(RELATIONSHIP_COLORS).map(([type, color]) => (
|
||||
<button
|
||||
key={type}
|
||||
className={`px-3 py-1 text-xs rounded-full whitespace-nowrap flex items-center ${
|
||||
relationshipTypeFilter === type
|
||||
? 'bg-indigo-600 text-white'
|
||||
: 'bg-slate-700 text-slate-300 hover:bg-slate-600'
|
||||
}`}
|
||||
onClick={() => onRelationshipTypeFilterChange(type as RelationshipType)}
|
||||
>
|
||||
<span
|
||||
className="w-2 h-2 rounded-full mr-1"
|
||||
style={{ backgroundColor: color }}
|
||||
></span>
|
||||
<span className="capitalize">
|
||||
{RELATIONSHIP_LABELS[type as RelationshipType]}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 max-h-[calc(100vh-390px)] overflow-y-auto pr-1">
|
||||
{filteredRelationships.length > 0 ? (
|
||||
filteredRelationships.map(rel => {
|
||||
const source = people.find(p => p._id === rel.source);
|
||||
const target = people.find(p => p._id === rel.target);
|
||||
if (!source || !target) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={rel._id}
|
||||
className={`bg-slate-700 rounded-lg p-3 group hover:bg-slate-600 transition-colors
|
||||
border-l-4 ${
|
||||
selectedPersonId === rel.source || selectedPersonId === rel.target
|
||||
? 'border-l-pink-500'
|
||||
: 'border-l-slate-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<div className="flex items-center">
|
||||
<span
|
||||
className={`font-medium ${selectedPersonId === rel.source ? 'text-pink-400' : ''}`}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
const sourcePerson = people.find(p => p._id === rel.source);
|
||||
if (sourcePerson) onOpenPersonDetail(sourcePerson);
|
||||
}}
|
||||
>
|
||||
{source.firstName} {source.lastName}
|
||||
</span>
|
||||
<span className="mx-2 text-slate-400">→</span>
|
||||
<span
|
||||
className={`font-medium ${selectedPersonId === rel.target ? 'text-pink-400' : ''}`}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
const targetPerson = people.find(p => p._id === rel.target);
|
||||
if (targetPerson) onOpenPersonDetail(targetPerson);
|
||||
}}
|
||||
>
|
||||
{target.firstName} {target.lastName}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center text-xs text-slate-400 mt-1">
|
||||
<span
|
||||
className="inline-block w-2 h-2 rounded-full mr-1"
|
||||
style={{ backgroundColor: RELATIONSHIP_COLORS[rel.type] }}
|
||||
></span>
|
||||
<span className="capitalize">
|
||||
{rel.type === 'custom'
|
||||
? rel.customType
|
||||
: RELATIONSHIP_LABELS[rel.type]}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<Tooltip text="Delete">
|
||||
<button
|
||||
className="p-1 text-slate-400 hover:text-red-400 transition-colors"
|
||||
onClick={() => onRelationshipDelete(rel._id)}
|
||||
>
|
||||
<FaTrash size={14} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<EmptyState
|
||||
title={
|
||||
relationshipFilter || relationshipTypeFilter !== 'all'
|
||||
? 'No matches found'
|
||||
: 'No relationships yet'
|
||||
}
|
||||
description={
|
||||
relationshipFilter || relationshipTypeFilter !== 'all'
|
||||
? 'Try adjusting your search criteria'
|
||||
: 'Create relationships between people to visualize connections'
|
||||
}
|
||||
icon={<FaUserFriends className="text-2xl text-slate-400" />}
|
||||
action={
|
||||
!relationshipFilter &&
|
||||
relationshipTypeFilter === 'all' && (
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={onAddRelationship}
|
||||
icon={<FaUserFriends />}
|
||||
>
|
||||
Add Relationship
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NetworkSidebar;
|
||||
230
src/components/UIComponents.tsx
Normal file
230
src/components/UIComponents.tsx
Normal file
@ -0,0 +1,230 @@
|
||||
// UIComponents.tsx - Small UI components used in the FriendshipNetwork
|
||||
|
||||
import React from 'react';
|
||||
import { FormErrors } from '../types/types';
|
||||
|
||||
/**
|
||||
* Toggle setting component with a switch-style toggle
|
||||
*/
|
||||
export interface ToggleSettingProps {
|
||||
label: string;
|
||||
id: string;
|
||||
checked: boolean;
|
||||
onChange: () => void;
|
||||
}
|
||||
|
||||
export const ToggleSetting: React.FC<ToggleSettingProps> = ({ label, id, checked, onChange }) => {
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium text-gray-300">{label}</label>
|
||||
<div className="relative inline-block w-12 align-middle select-none">
|
||||
<input
|
||||
type="checkbox"
|
||||
id={id}
|
||||
name={id}
|
||||
className="sr-only"
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<div className="block h-6 bg-slate-700 rounded-full w-12"></div>
|
||||
<div
|
||||
className={`absolute left-1 top-1 w-4 h-4 rounded-full transition-transform ${
|
||||
checked ? 'transform translate-x-6 bg-indigo-500' : 'bg-gray-400'
|
||||
}`}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Option group component for selecting from a group of options
|
||||
*/
|
||||
export interface OptionGroupProps {
|
||||
label: string;
|
||||
options: string[];
|
||||
currentValue: string;
|
||||
onChange: (value: string) => void;
|
||||
}
|
||||
|
||||
export const OptionGroup: React.FC<OptionGroupProps> = ({
|
||||
label,
|
||||
options,
|
||||
currentValue,
|
||||
onChange,
|
||||
}) => {
|
||||
return (
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-300 mb-2">{label}</label>
|
||||
<div className="flex space-x-2">
|
||||
{options.map(option => (
|
||||
<button
|
||||
key={option}
|
||||
className={`flex-1 py-2 px-3 rounded-md text-sm ${
|
||||
currentValue === option
|
||||
? 'bg-indigo-600 text-white'
|
||||
: 'bg-slate-700 text-gray-300 hover:bg-slate-600'
|
||||
}`}
|
||||
onClick={() => onChange(option)}
|
||||
>
|
||||
{option.charAt(0).toUpperCase() + option.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Keyboard shortcut item component for the help modal
|
||||
*/
|
||||
export interface KeyboardShortcutProps {
|
||||
shortcut: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
export const KeyboardShortcut: React.FC<KeyboardShortcutProps> = ({ shortcut, description }) => {
|
||||
return (
|
||||
<div className="bg-slate-900 p-2 rounded">
|
||||
<span className="inline-block bg-slate-700 px-2 py-1 rounded mr-2 text-xs font-mono">
|
||||
{shortcut}
|
||||
</span>
|
||||
{description}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Tip item component for the help modal
|
||||
*/
|
||||
export interface TipItemProps {
|
||||
text: string;
|
||||
}
|
||||
|
||||
export const TipItem: React.FC<TipItemProps> = ({ text }) => {
|
||||
return (
|
||||
<li className="flex items-start">
|
||||
<span className="text-indigo-400 mr-2">•</span>
|
||||
<span>{text}</span>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Error message display component
|
||||
*/
|
||||
export interface ErrorMessageProps {
|
||||
message: string;
|
||||
}
|
||||
|
||||
export const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => {
|
||||
return message ? (
|
||||
<div className="bg-red-500/20 border border-red-500 text-white p-3 rounded-lg text-sm mb-4">
|
||||
{message}
|
||||
</div>
|
||||
) : null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Loading spinner component
|
||||
*/
|
||||
export const LoadingSpinner: React.FC<{ message?: string }> = ({ message = 'Loading...' }) => {
|
||||
return (
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
<div className="w-16 h-16 border-t-4 border-b-4 border-indigo-500 border-solid rounded-full animate-spin"></div>
|
||||
<p className="text-white text-lg">{message}</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Form field group with validation
|
||||
*/
|
||||
export interface FormGroupProps {
|
||||
id: string;
|
||||
label: string;
|
||||
required?: boolean;
|
||||
error?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const FormGroup: React.FC<FormGroupProps> = ({
|
||||
id,
|
||||
label,
|
||||
required = false,
|
||||
error,
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
<div className="mb-4">
|
||||
<label htmlFor={id} className="block text-sm font-medium text-gray-300 mb-1">
|
||||
{label} {required && <span className="text-red-500">*</span>}
|
||||
</label>
|
||||
{children}
|
||||
{error && <p className="mt-1 text-sm text-red-500">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Form validation helpers
|
||||
*/
|
||||
export const validatePersonForm = (person: { firstName: string; lastName: string }): FormErrors => {
|
||||
const errors: FormErrors = {};
|
||||
|
||||
if (!person.firstName.trim()) {
|
||||
errors.firstName = 'First name is required';
|
||||
}
|
||||
|
||||
if (!person.lastName.trim()) {
|
||||
errors.lastName = 'Last name is required';
|
||||
}
|
||||
|
||||
return errors;
|
||||
};
|
||||
|
||||
export const validateRelationshipForm = (
|
||||
relationship: {
|
||||
source: string;
|
||||
target: string;
|
||||
type: string;
|
||||
customType: string;
|
||||
bidirectional: boolean;
|
||||
},
|
||||
existingRelationships: any[]
|
||||
): FormErrors => {
|
||||
const errors: FormErrors = {};
|
||||
|
||||
if (!relationship.source) {
|
||||
errors.source = 'Source person is required';
|
||||
}
|
||||
|
||||
if (!relationship.target) {
|
||||
errors.target = 'Target person is required';
|
||||
}
|
||||
|
||||
if (relationship.source === relationship.target) {
|
||||
errors.target = 'Source and target cannot be the same person';
|
||||
}
|
||||
|
||||
if (relationship.type === 'custom' && !relationship.customType.trim()) {
|
||||
errors.customType = 'Custom relationship type is required';
|
||||
}
|
||||
|
||||
// Check if relationship already exists
|
||||
if (relationship.source && relationship.target) {
|
||||
const existingRelationship = existingRelationships.find(
|
||||
r =>
|
||||
(r.source === relationship.source && r.target === relationship.target) ||
|
||||
(relationship.bidirectional &&
|
||||
r.source === relationship.target &&
|
||||
r.target === relationship.source)
|
||||
);
|
||||
|
||||
if (existingRelationship) {
|
||||
errors.general = 'This relationship already exists';
|
||||
}
|
||||
}
|
||||
|
||||
return errors;
|
||||
};
|
||||
@ -17,11 +17,9 @@ const Header: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// Check if we're on the login or register page
|
||||
const isAuthPage = location.pathname === '/login' || location.pathname === '/register';
|
||||
|
||||
if (isAuthPage) {
|
||||
return null; // Don't show header on auth pages
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
@ -29,11 +27,10 @@ const Header: React.FC = () => {
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between h-16">
|
||||
<div className="flex items-center">
|
||||
<Link to="/" className="flex-shrink-0 flex items-center">
|
||||
<Link to="/" className="flex-shrink-0 flex items-center -ml-2">
|
||||
<FaNetworkWired className="h-6 w-6 text-indigo-400" />
|
||||
<span className="ml-2 text-white font-bold text-xl">RelNet</span>
|
||||
</Link>
|
||||
|
||||
{user && (
|
||||
<nav className="ml-8 flex space-x-4">
|
||||
<Link
|
||||
@ -49,7 +46,6 @@ const Header: React.FC = () => {
|
||||
</nav>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
{user ? (
|
||||
<div className="flex items-center space-x-4">
|
||||
@ -62,9 +58,7 @@ const Header: React.FC = () => {
|
||||
<FaUser />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div
|
||||
className="absolute right-0 mt-2 w-48 bg-slate-800 rounded-md shadow-lg py-1 z-10 border border-slate-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
|
||||
<div className="absolute right-0 mt-2 w-48 bg-slate-800 rounded-md shadow-lg py-1 z-10 border border-slate-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-full text-left px-4 py-2 text-sm text-slate-300 hover:bg-slate-700 flex items-center"
|
||||
63
src/hooks/useGraphDimensions.ts
Normal file
63
src/hooks/useGraphDimensions.ts
Normal file
@ -0,0 +1,63 @@
|
||||
import { useState, useEffect, useCallback, RefObject } from 'react';
|
||||
import { ToastItem } from '../types/types';
|
||||
|
||||
/**
|
||||
* Hook for managing graph container dimensions and handling resize events
|
||||
*/
|
||||
export const useGraphDimensions = (
|
||||
graphContainerRef: RefObject<HTMLDivElement>,
|
||||
sidebarOpen: boolean
|
||||
) => {
|
||||
const [graphDimensions, setGraphDimensions] = useState({ width: 0, height: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
if (!graphContainerRef.current) return;
|
||||
|
||||
const updateDimensions = () => {
|
||||
if (graphContainerRef.current) {
|
||||
const { width, height } = graphContainerRef.current.getBoundingClientRect();
|
||||
|
||||
setGraphDimensions(prev => {
|
||||
if (prev.width !== width || prev.height !== height) {
|
||||
return { width, height };
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Initial measurement
|
||||
updateDimensions();
|
||||
|
||||
// Set up resize observer
|
||||
const resizeObserver = new ResizeObserver(updateDimensions);
|
||||
if (graphContainerRef.current) {
|
||||
resizeObserver.observe(graphContainerRef.current);
|
||||
}
|
||||
|
||||
// Set up window resize listener
|
||||
window.addEventListener('resize', updateDimensions);
|
||||
|
||||
// Clean up
|
||||
return () => {
|
||||
if (graphContainerRef.current) {
|
||||
resizeObserver.unobserve(graphContainerRef.current);
|
||||
}
|
||||
window.removeEventListener('resize', updateDimensions);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Update dimensions when sidebar is toggled
|
||||
useEffect(() => {
|
||||
const timeoutId = setTimeout(() => {
|
||||
if (graphContainerRef.current) {
|
||||
const { width, height } = graphContainerRef.current.getBoundingClientRect();
|
||||
setGraphDimensions({ width, height });
|
||||
}
|
||||
}, 300);
|
||||
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [sidebarOpen]);
|
||||
|
||||
return graphDimensions;
|
||||
};
|
||||
78
src/hooks/useKeyboardShortcuts.ts
Normal file
78
src/hooks/useKeyboardShortcuts.ts
Normal file
@ -0,0 +1,78 @@
|
||||
import { useState, useEffect, useCallback, RefObject } from 'react';
|
||||
import { ToastItem } from '../types/types';
|
||||
|
||||
/**
|
||||
* Hook for setting up keyboard shortcuts
|
||||
*/
|
||||
export const useKeyboardShortcuts = (handlers: {
|
||||
handleZoomIn: () => void;
|
||||
handleZoomOut: () => void;
|
||||
handleResetZoom: () => void;
|
||||
toggleSidebar: () => void;
|
||||
setPersonModalOpen: (open: boolean) => void;
|
||||
setRelationshipModalOpen: (open: boolean) => void;
|
||||
setHelpModalOpen: (open: boolean) => void;
|
||||
}) => {
|
||||
useEffect(() => {
|
||||
const {
|
||||
handleZoomIn,
|
||||
handleZoomOut,
|
||||
handleResetZoom,
|
||||
toggleSidebar,
|
||||
setPersonModalOpen,
|
||||
setRelationshipModalOpen,
|
||||
setHelpModalOpen,
|
||||
} = handlers;
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
// Only apply shortcuts when not in an input field
|
||||
const target = e.target as HTMLElement;
|
||||
if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return;
|
||||
|
||||
// Ctrl/Cmd + / to open help modal
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === '/') {
|
||||
e.preventDefault();
|
||||
setHelpModalOpen(true);
|
||||
}
|
||||
|
||||
// + for zoom in
|
||||
if (e.key === '+' || e.key === '=') {
|
||||
e.preventDefault();
|
||||
handleZoomIn();
|
||||
}
|
||||
|
||||
// - for zoom out
|
||||
if (e.key === '-' || e.key === '_') {
|
||||
e.preventDefault();
|
||||
handleZoomOut();
|
||||
}
|
||||
|
||||
// 0 for reset zoom
|
||||
if (e.key === '0') {
|
||||
e.preventDefault();
|
||||
handleResetZoom();
|
||||
}
|
||||
|
||||
// n for new person
|
||||
if (e.key === 'n' && !e.ctrlKey && !e.metaKey) {
|
||||
e.preventDefault();
|
||||
setPersonModalOpen(true);
|
||||
}
|
||||
|
||||
// r for new relationship
|
||||
if (e.key === 'r' && !e.ctrlKey && !e.metaKey) {
|
||||
e.preventDefault();
|
||||
setRelationshipModalOpen(true);
|
||||
}
|
||||
|
||||
// s for toggle sidebar
|
||||
if (e.key === 's' && !e.ctrlKey && !e.metaKey) {
|
||||
e.preventDefault();
|
||||
toggleSidebar();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [handlers]);
|
||||
};
|
||||
60
src/hooks/useSmartNodePositioning.ts
Normal file
60
src/hooks/useSmartNodePositioning.ts
Normal file
@ -0,0 +1,60 @@
|
||||
import { useState, useEffect, useCallback, RefObject } from 'react';
|
||||
import { ToastItem } from '../types/types';
|
||||
|
||||
/**
|
||||
* Hook to manage node positions in the graph
|
||||
*/
|
||||
export const useSmartNodePositioning = (
|
||||
graphWidth: number,
|
||||
graphHeight: number,
|
||||
peopleCount: number
|
||||
) => {
|
||||
return useCallback(() => {
|
||||
const centerX = graphWidth / 2;
|
||||
const centerY = graphHeight / 2;
|
||||
const maxRadius = Math.min(graphWidth, graphHeight) * 0.4;
|
||||
const totalNodes = peopleCount;
|
||||
const index = totalNodes;
|
||||
|
||||
if (totalNodes <= 0) {
|
||||
return { x: centerX, y: centerY };
|
||||
} else if (totalNodes <= 4) {
|
||||
const theta = index * 2.399;
|
||||
const radius = maxRadius * 0.5 * Math.sqrt(index / (totalNodes + 1));
|
||||
return {
|
||||
x: centerX + radius * Math.cos(theta),
|
||||
y: centerY + radius * Math.sin(theta),
|
||||
};
|
||||
} else if (totalNodes <= 11) {
|
||||
const isOuterRing = index >= Math.floor(totalNodes / 2);
|
||||
const ringIndex = isOuterRing ? index - Math.floor(totalNodes / 2) : index;
|
||||
const ringTotal = isOuterRing
|
||||
? totalNodes - Math.floor(totalNodes / 2) + 1
|
||||
: Math.floor(totalNodes / 2);
|
||||
const ringRadius = isOuterRing ? maxRadius * 0.8 : maxRadius * 0.4;
|
||||
|
||||
const angle = (ringIndex / ringTotal) * 2 * Math.PI + (isOuterRing ? 0 : Math.PI / ringTotal);
|
||||
return {
|
||||
x: centerX + ringRadius * Math.cos(angle),
|
||||
y: centerY + ringRadius * Math.sin(angle),
|
||||
};
|
||||
} else {
|
||||
const clusterCount = Math.max(3, Math.floor(Math.sqrt(totalNodes)));
|
||||
const clusterIndex = index % clusterCount;
|
||||
|
||||
const clusterAngle = (clusterIndex / clusterCount) * 2 * Math.PI;
|
||||
const clusterDistance = maxRadius * 0.6;
|
||||
const clusterX = centerX + clusterDistance * Math.cos(clusterAngle);
|
||||
const clusterY = centerY + clusterDistance * Math.sin(clusterAngle);
|
||||
|
||||
const clusterRadius = maxRadius * 0.3;
|
||||
const randomAngle = Math.random() * 2 * Math.PI;
|
||||
const randomDistance = Math.random() * clusterRadius;
|
||||
|
||||
return {
|
||||
x: clusterX + randomDistance * Math.cos(randomAngle),
|
||||
y: clusterY + randomDistance * Math.sin(randomAngle),
|
||||
};
|
||||
}
|
||||
}, [graphWidth, graphHeight, peopleCount]);
|
||||
};
|
||||
30
src/hooks/useToastNotifications.ts
Normal file
30
src/hooks/useToastNotifications.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { useState, useEffect, useCallback, RefObject } from 'react';
|
||||
import { ToastItem } from '../types/types';
|
||||
|
||||
export const useToastNotifications = () => {
|
||||
const [toasts, setToasts] = useState<ToastItem[]>([]);
|
||||
|
||||
const addToast = useCallback(
|
||||
(message: string, type: 'error' | 'success' | 'warning' | 'info' = 'success') => {
|
||||
const id = Date.now();
|
||||
const newToast = {
|
||||
id,
|
||||
message,
|
||||
type,
|
||||
onClose: () => removeToast(id),
|
||||
};
|
||||
|
||||
setToasts(prevToasts => [...prevToasts, newToast]);
|
||||
|
||||
// Auto-remove after 3 seconds
|
||||
setTimeout(() => removeToast(id), 3000);
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const removeToast = useCallback((id: number) => {
|
||||
setToasts(prevToasts => prevToasts.filter(toast => toast.id !== id));
|
||||
}, []);
|
||||
|
||||
return { toasts, addToast, removeToast };
|
||||
};
|
||||
729
src/pages/FriendshipNetwork.tsx
Normal file
729
src/pages/FriendshipNetwork.tsx
Normal file
@ -0,0 +1,729 @@
|
||||
// FriendshipNetwork.tsx - Main component for the friendship network visualization
|
||||
|
||||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { useFriendshipNetwork } from '../hooks/useFriendshipNetwork';
|
||||
import { useNetworks } from '../context/NetworkContext';
|
||||
import {
|
||||
FaArrowLeft,
|
||||
FaChevronLeft,
|
||||
FaChevronRight,
|
||||
FaExclamationTriangle,
|
||||
FaInfo,
|
||||
FaTimes,
|
||||
FaUserFriends,
|
||||
FaUserPlus,
|
||||
} from 'react-icons/fa';
|
||||
|
||||
// Import components
|
||||
import { Button, ConfirmDialog, Toast } from '../components/FriendshipNetworkComponents';
|
||||
import NetworkSidebar from '../components/NetworkSidebar';
|
||||
import CanvasGraph from '../components/CanvasGraph';
|
||||
|
||||
// Import types and constants
|
||||
import {
|
||||
PersonNode,
|
||||
RelationshipEdge,
|
||||
FormErrors,
|
||||
NewPersonForm,
|
||||
NewRelationshipForm,
|
||||
RelationshipType,
|
||||
} from '../types/types';
|
||||
|
||||
const RELATIONSHIP_COLORS: Record<RelationshipType, string> = {
|
||||
freund: '#60A5FA', // Light blue
|
||||
partner: '#F472B6', // Pink
|
||||
familie: '#34D399', // Green
|
||||
arbeitskolleg: '#FBBF24', // Yellow
|
||||
custom: '#9CA3AF', // Gray
|
||||
};
|
||||
|
||||
const RELATIONSHIP_LABELS: Record<RelationshipType, string> = {
|
||||
freund: 'Friend',
|
||||
partner: 'Partner',
|
||||
familie: 'Family',
|
||||
arbeitskolleg: 'Colleague',
|
||||
custom: 'Custom',
|
||||
};
|
||||
|
||||
const DEFAULT_SETTINGS = {
|
||||
darkMode: true,
|
||||
autoLayout: true,
|
||||
showLabels: true,
|
||||
animationSpeed: 'medium',
|
||||
highlightConnections: true,
|
||||
nodeSize: 'medium',
|
||||
};
|
||||
|
||||
import { useToastNotifications } from '../hooks/useToastNotifications';
|
||||
import { useGraphDimensions } from '../hooks/useGraphDimensions';
|
||||
import { useKeyboardShortcuts } from '../hooks/useKeyboardShortcuts';
|
||||
import { useSmartNodePositioning } from '../hooks/useSmartNodePositioning';
|
||||
|
||||
// Import modals
|
||||
import {
|
||||
PersonFormModal,
|
||||
RelationshipFormModal,
|
||||
PersonDetailModal,
|
||||
SettingsModal,
|
||||
HelpModal,
|
||||
} from '../components/Modals';
|
||||
|
||||
// Import UI components
|
||||
import { LoadingSpinner } from '../components/UIComponents';
|
||||
|
||||
/**
|
||||
* Main FriendshipNetwork component
|
||||
*/
|
||||
const FriendshipNetwork: React.FC = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const { networks } = useNetworks();
|
||||
const navigate = useNavigate();
|
||||
const graphContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Network data state from custom hook
|
||||
const {
|
||||
people,
|
||||
relationships,
|
||||
loading,
|
||||
error,
|
||||
createPerson,
|
||||
updatePerson,
|
||||
deletePerson,
|
||||
createRelationship,
|
||||
deleteRelationship,
|
||||
refreshNetwork,
|
||||
updatePersonPosition: updatePersonPositionImpl = (
|
||||
id: string,
|
||||
position: { x: number; y: number }
|
||||
) => {
|
||||
console.warn('updatePersonPosition not implemented');
|
||||
return Promise.resolve();
|
||||
},
|
||||
} = useFriendshipNetwork(id || null) as any;
|
||||
|
||||
// Create a type-safe wrapper for updatePersonPosition
|
||||
const updatePersonPosition = (id: string, position: { x: number; y: number }) => {
|
||||
return updatePersonPositionImpl(id, position);
|
||||
};
|
||||
|
||||
// UI state
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
const [sidebarTab, setSidebarTab] = useState('people');
|
||||
const [zoomLevel, setZoomLevel] = useState(1);
|
||||
const [interactionHint, setInteractionHint] = useState(true);
|
||||
const [selectedPersonId, setSelectedPersonId] = useState<string | null>(null);
|
||||
|
||||
// Custom hooks
|
||||
const { toasts, addToast, removeToast } = useToastNotifications();
|
||||
const graphDimensions = useGraphDimensions(graphContainerRef, sidebarOpen);
|
||||
const getSmartNodePosition = useSmartNodePositioning(
|
||||
graphDimensions.width,
|
||||
graphDimensions.height,
|
||||
people.length
|
||||
);
|
||||
|
||||
// Modal states
|
||||
const [personModalOpen, setPersonModalOpen] = useState(false);
|
||||
const [relationshipModalOpen, setRelationshipModalOpen] = useState(false);
|
||||
const [personDetailModalOpen, setPersonDetailModalOpen] = useState(false);
|
||||
const [settingsModalOpen, setSettingsModalOpen] = useState(false);
|
||||
const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
|
||||
const [helpModalOpen, setHelpModalOpen] = useState(false);
|
||||
const [itemToDelete, setItemToDelete] = useState<{ type: string; id: string }>({
|
||||
type: '',
|
||||
id: '',
|
||||
});
|
||||
|
||||
// Form errors
|
||||
const [personFormErrors, setPersonFormErrors] = useState<FormErrors>({});
|
||||
const [relationshipFormErrors, setRelationshipFormErrors] = useState<FormErrors>({});
|
||||
|
||||
// Form states
|
||||
const [newPerson, setNewPerson] = useState<NewPersonForm>({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
birthday: null,
|
||||
notes: '',
|
||||
});
|
||||
|
||||
const [editPerson, setEditPerson] = useState<PersonNode | null>(null);
|
||||
|
||||
const [newRelationship, setNewRelationship] = useState<NewRelationshipForm>({
|
||||
source: '',
|
||||
target: '',
|
||||
type: 'freund',
|
||||
customType: '',
|
||||
notes: '',
|
||||
bidirectional: true,
|
||||
});
|
||||
|
||||
// Filter states
|
||||
const [peopleFilter, setPeopleFilter] = useState('');
|
||||
const [relationshipFilter, setRelationshipFilter] = useState('');
|
||||
const [relationshipTypeFilter, setRelationshipTypeFilter] = useState('all');
|
||||
|
||||
// Settings state
|
||||
const [settings, setSettings] = useState(DEFAULT_SETTINGS);
|
||||
|
||||
// Get current network info
|
||||
const currentNetwork = networks.find(network => network._id === id);
|
||||
|
||||
// Dismiss interaction hint after 10 seconds
|
||||
React.useEffect(() => {
|
||||
if (interactionHint) {
|
||||
const timer = setTimeout(() => {
|
||||
setInteractionHint(false);
|
||||
}, 10000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [interactionHint]);
|
||||
|
||||
// Register keyboard shortcuts
|
||||
const handleZoomIn = () => setZoomLevel(prev => Math.min(prev + 0.2, 2.5));
|
||||
const handleZoomOut = () => setZoomLevel(prev => Math.max(prev - 0.2, 0.5));
|
||||
const handleResetZoom = () => setZoomLevel(1);
|
||||
const toggleSidebar = () => setSidebarOpen(!sidebarOpen);
|
||||
|
||||
useKeyboardShortcuts({
|
||||
handleZoomIn,
|
||||
handleZoomOut,
|
||||
handleResetZoom,
|
||||
toggleSidebar,
|
||||
setPersonModalOpen,
|
||||
setRelationshipModalOpen,
|
||||
setHelpModalOpen,
|
||||
});
|
||||
|
||||
// Transform API data to graph format
|
||||
const getGraphData = useCallback(() => {
|
||||
if (!people || !relationships) {
|
||||
return { nodes: [], edges: [], links: [] };
|
||||
}
|
||||
|
||||
// Create nodes
|
||||
const graphNodes = people.map((person: PersonNode) => {
|
||||
const connectionCount = relationships.filter(
|
||||
(r: RelationshipEdge) => r.source === person._id || r.target === person._id
|
||||
).length;
|
||||
|
||||
// Determine if node should be highlighted
|
||||
const isSelected = person._id === selectedPersonId;
|
||||
const isConnected = selectedPersonId
|
||||
? relationships.some(
|
||||
(r: RelationshipEdge) =>
|
||||
(r.source === selectedPersonId && r.target === person._id) ||
|
||||
(r.target === selectedPersonId && r.source === person._id)
|
||||
)
|
||||
: false;
|
||||
|
||||
// Determine background color based on connection count or highlight state
|
||||
let bgColor;
|
||||
if (isSelected) {
|
||||
bgColor = '#F472B6'; // Pink-400 for selected
|
||||
} else if (isConnected && settings.highlightConnections) {
|
||||
bgColor = '#A78BFA'; // Violet-400 for connected
|
||||
} else if (connectionCount === 0) {
|
||||
bgColor = '#94A3B8'; // Slate-400
|
||||
} else if (connectionCount === 1) {
|
||||
bgColor = '#38BDF8'; // Sky-400
|
||||
} else if (connectionCount <= 3) {
|
||||
bgColor = '#818CF8'; // Indigo-400
|
||||
} else if (connectionCount <= 5) {
|
||||
bgColor = '#A78BFA'; // Violet-400
|
||||
} else {
|
||||
bgColor = '#F472B6'; // Pink-400
|
||||
}
|
||||
|
||||
return {
|
||||
id: person._id,
|
||||
firstName: person.firstName,
|
||||
lastName: person.lastName,
|
||||
connectionCount,
|
||||
bgColor,
|
||||
x: person.position?.x || 0,
|
||||
y: person.position?.y || 0,
|
||||
showLabel: settings.showLabels,
|
||||
};
|
||||
});
|
||||
|
||||
// Create edges
|
||||
const graphEdges = relationships.map((rel: RelationshipEdge) => {
|
||||
const color = RELATIONSHIP_COLORS[rel.type] || RELATIONSHIP_COLORS.custom;
|
||||
const width = rel.type === 'partner' ? 4 : rel.type === 'familie' ? 3 : 2;
|
||||
|
||||
// Highlight edges connected to selected node
|
||||
const isHighlighted =
|
||||
selectedPersonId &&
|
||||
settings.highlightConnections &&
|
||||
(rel.source === selectedPersonId || rel.target === selectedPersonId);
|
||||
|
||||
return {
|
||||
id: rel._id,
|
||||
source: rel.source,
|
||||
target: rel.target,
|
||||
color: isHighlighted ? '#F472B6' : color, // Pink color for highlighted edges
|
||||
width: isHighlighted ? width + 1 : width, // Slightly thicker for highlighted
|
||||
type: rel.type,
|
||||
customType: rel.customType,
|
||||
};
|
||||
});
|
||||
|
||||
// For compatibility with CustomGraphData
|
||||
return {
|
||||
nodes: graphNodes,
|
||||
edges: graphEdges,
|
||||
links: graphEdges, // Duplicate edges as links for compatibility
|
||||
};
|
||||
}, [people, relationships, settings.showLabels, settings.highlightConnections, selectedPersonId]);
|
||||
|
||||
// Form validation functions
|
||||
const validatePersonForm = (person: typeof newPerson): FormErrors => {
|
||||
const errors: FormErrors = {};
|
||||
|
||||
if (!person.firstName.trim()) {
|
||||
errors.firstName = 'First name is required';
|
||||
}
|
||||
|
||||
if (!person.lastName.trim()) {
|
||||
errors.lastName = 'Last name is required';
|
||||
}
|
||||
|
||||
return errors;
|
||||
};
|
||||
|
||||
const validateRelationshipForm = (relationship: typeof newRelationship): FormErrors => {
|
||||
const errors: FormErrors = {};
|
||||
|
||||
if (!relationship.source) {
|
||||
errors.source = 'Source person is required';
|
||||
}
|
||||
|
||||
if (!relationship.target) {
|
||||
errors.target = 'Target person is required';
|
||||
}
|
||||
|
||||
if (relationship.source === relationship.target) {
|
||||
errors.target = 'Source and target cannot be the same person';
|
||||
}
|
||||
|
||||
if (relationship.type === 'custom' && !relationship.customType.trim()) {
|
||||
errors.customType = 'Custom relationship type is required';
|
||||
}
|
||||
|
||||
// Check if relationship already exists
|
||||
if (relationship.source && relationship.target) {
|
||||
const existingRelationship = relationships.find(
|
||||
(r: RelationshipEdge) =>
|
||||
(r.source === relationship.source && r.target === relationship.target) ||
|
||||
(relationship.bidirectional &&
|
||||
r.source === relationship.target &&
|
||||
r.target === relationship.source)
|
||||
);
|
||||
|
||||
if (existingRelationship) {
|
||||
errors.general = 'This relationship already exists';
|
||||
}
|
||||
}
|
||||
|
||||
return errors;
|
||||
};
|
||||
|
||||
// Event handlers
|
||||
const handlePersonSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
const errors = validatePersonForm(newPerson);
|
||||
setPersonFormErrors(errors);
|
||||
|
||||
if (Object.keys(errors).length > 0) return;
|
||||
|
||||
// Create person with smart positioning
|
||||
const position = getSmartNodePosition();
|
||||
|
||||
createPerson({
|
||||
firstName: newPerson.firstName.trim(),
|
||||
lastName: newPerson.lastName.trim(),
|
||||
birthday: newPerson.birthday?.toISOString() || undefined,
|
||||
notes: newPerson.notes,
|
||||
position,
|
||||
});
|
||||
|
||||
// Reset form and close modal
|
||||
setNewPerson({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
birthday: null,
|
||||
notes: '',
|
||||
});
|
||||
|
||||
setPersonModalOpen(false);
|
||||
addToast('Person added successfully');
|
||||
};
|
||||
|
||||
const handleUpdatePerson = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!editPerson) return;
|
||||
|
||||
const errors = validatePersonForm(editPerson as any);
|
||||
setPersonFormErrors(errors);
|
||||
|
||||
if (Object.keys(errors).length > 0) return;
|
||||
|
||||
updatePerson(editPerson._id, {
|
||||
firstName: editPerson.firstName,
|
||||
lastName: editPerson.lastName,
|
||||
birthday: editPerson.birthday ? new Date(editPerson.birthday).toISOString() : undefined,
|
||||
notes: editPerson.notes,
|
||||
});
|
||||
|
||||
setEditPerson(null);
|
||||
setPersonDetailModalOpen(false);
|
||||
addToast('Person updated successfully');
|
||||
};
|
||||
|
||||
const handleRelationshipSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
const errors = validateRelationshipForm(newRelationship);
|
||||
setRelationshipFormErrors(errors);
|
||||
|
||||
if (Object.keys(errors).length > 0) return;
|
||||
|
||||
const { source, target, type, customType, notes, bidirectional } = newRelationship;
|
||||
|
||||
// Create the relationship
|
||||
createRelationship({
|
||||
source,
|
||||
target,
|
||||
type,
|
||||
customType: type === 'custom' ? customType : undefined,
|
||||
notes,
|
||||
});
|
||||
|
||||
// Create bidirectional relationship if selected
|
||||
if (bidirectional && source !== target) {
|
||||
createRelationship({
|
||||
source: target,
|
||||
target: source,
|
||||
type,
|
||||
customType: type === 'custom' ? customType : undefined,
|
||||
notes,
|
||||
});
|
||||
}
|
||||
|
||||
// Reset form and close modal
|
||||
setNewRelationship({
|
||||
source: '',
|
||||
target: '',
|
||||
type: 'freund',
|
||||
customType: '',
|
||||
notes: '',
|
||||
bidirectional: true,
|
||||
});
|
||||
|
||||
setRelationshipModalOpen(false);
|
||||
addToast(`Relationship${bidirectional ? 's' : ''} created successfully`);
|
||||
};
|
||||
|
||||
// Common actions
|
||||
const confirmDelete = (type: string, id: string) => {
|
||||
setItemToDelete({ type, id });
|
||||
setDeleteConfirmOpen(true);
|
||||
};
|
||||
|
||||
const executeDelete = () => {
|
||||
const { type, id } = itemToDelete;
|
||||
|
||||
if (type === 'person') {
|
||||
deletePerson(id);
|
||||
addToast('Person deleted');
|
||||
} else if (type === 'relationship') {
|
||||
deleteRelationship(id);
|
||||
addToast('Relationship deleted');
|
||||
}
|
||||
};
|
||||
|
||||
const openPersonDetail = (person: PersonNode) => {
|
||||
setEditPerson({ ...person });
|
||||
setPersonDetailModalOpen(true);
|
||||
};
|
||||
|
||||
const handleRefreshNetwork = () => {
|
||||
refreshNetwork();
|
||||
addToast('Network refreshed');
|
||||
};
|
||||
|
||||
const handleNodeClick = (nodeId: string) => {
|
||||
// Toggle selection
|
||||
if (selectedPersonId === nodeId) {
|
||||
setSelectedPersonId(null);
|
||||
} else {
|
||||
setSelectedPersonId(nodeId);
|
||||
}
|
||||
|
||||
// Open person details
|
||||
const person = people.find((p: PersonNode) => p._id === nodeId);
|
||||
if (person) {
|
||||
openPersonDetail(person);
|
||||
}
|
||||
};
|
||||
|
||||
// Sort people alphabetically
|
||||
const sortedPeople = [...people].sort((a: PersonNode, b: PersonNode) => {
|
||||
const nameA = `${a.firstName} ${a.lastName}`.toLowerCase();
|
||||
const nameB = `${b.firstName} ${b.lastName}`.toLowerCase();
|
||||
return nameA.localeCompare(nameB);
|
||||
});
|
||||
|
||||
// Loading state
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-screen bg-slate-900">
|
||||
<LoadingSpinner message="Loading your network..." />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Error state
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-screen bg-slate-900">
|
||||
<div className="bg-red-500/20 border border-red-500 text-white p-6 rounded-lg shadow-lg max-w-md">
|
||||
<h3 className="text-lg font-bold mb-3 flex items-center">
|
||||
<FaExclamationTriangle className="mr-2 text-red-500" /> Error
|
||||
</h3>
|
||||
<p className="mb-4">{error}</p>
|
||||
<Button
|
||||
variant="primary"
|
||||
fullWidth
|
||||
onClick={() => navigate('/networks')}
|
||||
icon={<FaArrowLeft />}
|
||||
>
|
||||
Back to Networks
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Generate graph data
|
||||
const graphData = getGraphData();
|
||||
|
||||
return (
|
||||
<div className="flex h-full h-full-important bg-slate-900 text-white overflow-hidden">
|
||||
{/* Network Sidebar Component */}
|
||||
<NetworkSidebar
|
||||
isOpen={sidebarOpen}
|
||||
currentNetwork={currentNetwork}
|
||||
sidebarTab={sidebarTab}
|
||||
people={people}
|
||||
relationships={relationships}
|
||||
selectedPersonId={selectedPersonId}
|
||||
peopleFilter={peopleFilter}
|
||||
relationshipFilter={relationshipFilter}
|
||||
relationshipTypeFilter={relationshipTypeFilter}
|
||||
onTabChange={setSidebarTab}
|
||||
onPeopleFilterChange={setPeopleFilter}
|
||||
onRelationshipFilterChange={setRelationshipFilter}
|
||||
onRelationshipTypeFilterChange={setRelationshipTypeFilter}
|
||||
onAddPerson={() => setPersonModalOpen(true)}
|
||||
onAddRelationship={() => setRelationshipModalOpen(true)}
|
||||
onOpenSettings={() => setSettingsModalOpen(true)}
|
||||
onOpenHelp={() => setHelpModalOpen(true)}
|
||||
onPersonDelete={id => confirmDelete('person', id)}
|
||||
onRelationshipDelete={id => confirmDelete('relationship', id)}
|
||||
onOpenPersonDetail={person => {
|
||||
openPersonDetail(person);
|
||||
setSelectedPersonId(person._id);
|
||||
}}
|
||||
onNavigateBack={() => navigate('/networks')}
|
||||
/>
|
||||
|
||||
{/* Main Graph Area */}
|
||||
<div ref={graphContainerRef} className="flex-1 bg-slate-900 relative overflow-hidden">
|
||||
{graphDimensions.width <= 0 || graphDimensions.height <= 0 ? (
|
||||
<div className="w-full h-full flex justify-center items-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500"></div>
|
||||
</div>
|
||||
) : (
|
||||
<CanvasGraph
|
||||
data={graphData}
|
||||
width={graphDimensions.width}
|
||||
height={graphDimensions.height}
|
||||
zoomLevel={zoomLevel}
|
||||
onNodeClick={handleNodeClick}
|
||||
onNodeDrag={(nodeId, x, y) => {
|
||||
updatePersonPosition(nodeId, { x, y }).then();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Empty state overlay */}
|
||||
{people.length === 0 && (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center bg-slate-900/80 backdrop-blur-sm">
|
||||
<div className="text-center max-w-md p-6">
|
||||
<div className="inline-flex items-center justify-center p-4 bg-indigo-600/30 rounded-full mb-4">
|
||||
<FaUserPlus className="text-3xl text-indigo-400" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-white mb-2">Start Building Your Network</h2>
|
||||
<p className="text-slate-300 mb-6">
|
||||
Add people and create relationships between them to visualize your network
|
||||
</p>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => setPersonModalOpen(true)}
|
||||
icon={<FaUserPlus />}
|
||||
size="lg"
|
||||
>
|
||||
Add Your First Person
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Interaction hint */}
|
||||
{people.length > 0 && interactionHint && (
|
||||
<div
|
||||
className="absolute bottom-20 left-1/2 transform -translate-x-1/2 bg-indigo-900/90
|
||||
text-white px-4 py-2 rounded-lg shadow-lg text-sm flex items-center space-x-2 animate-pulse"
|
||||
>
|
||||
<FaInfo className="text-indigo-400" />
|
||||
<span>Click on a person to see details, drag to reposition</span>
|
||||
<button
|
||||
className="ml-2 text-indigo-400 hover:text-white"
|
||||
onClick={() => setInteractionHint(false)}
|
||||
>
|
||||
<FaTimes />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Quick action buttons */}
|
||||
<div className="absolute bottom-6 left-1/2 transform -translate-x-1/2 flex space-x-2">
|
||||
<div
|
||||
className="bg-indigo-600 hover:bg-indigo-700 text-white p-3 rounded-full shadow-lg transition-colors cursor-pointer"
|
||||
onClick={() => setPersonModalOpen(true)}
|
||||
title="Add Person (shortcut: n)"
|
||||
>
|
||||
<FaUserPlus />
|
||||
</div>
|
||||
<div
|
||||
className="bg-pink-600 hover:bg-pink-700 text-white p-3 rounded-full shadow-lg transition-colors cursor-pointer"
|
||||
onClick={() => setRelationshipModalOpen(true)}
|
||||
title="Add Relationship (shortcut: r)"
|
||||
>
|
||||
<FaUserFriends />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modals */}
|
||||
<PersonFormModal
|
||||
isOpen={personModalOpen}
|
||||
onClose={() => {
|
||||
setPersonModalOpen(false);
|
||||
setPersonFormErrors({});
|
||||
}}
|
||||
formData={newPerson}
|
||||
setFormData={setNewPerson}
|
||||
errors={personFormErrors}
|
||||
onSubmit={handlePersonSubmit}
|
||||
isEdit={false}
|
||||
/>
|
||||
|
||||
<RelationshipFormModal
|
||||
isOpen={relationshipModalOpen}
|
||||
onClose={() => {
|
||||
setRelationshipModalOpen(false);
|
||||
setRelationshipFormErrors({});
|
||||
}}
|
||||
formData={newRelationship}
|
||||
setFormData={setNewRelationship}
|
||||
errors={relationshipFormErrors}
|
||||
onSubmit={handleRelationshipSubmit}
|
||||
people={sortedPeople}
|
||||
relationshipLabels={RELATIONSHIP_LABELS}
|
||||
/>
|
||||
|
||||
{editPerson && (
|
||||
<PersonDetailModal
|
||||
isOpen={personDetailModalOpen}
|
||||
onClose={() => {
|
||||
setPersonDetailModalOpen(false);
|
||||
setEditPerson(null);
|
||||
setPersonFormErrors({});
|
||||
}}
|
||||
person={editPerson}
|
||||
setPerson={setEditPerson}
|
||||
errors={personFormErrors}
|
||||
onSubmit={handleUpdatePerson}
|
||||
onDelete={id => {
|
||||
confirmDelete('person', id);
|
||||
setPersonDetailModalOpen(false);
|
||||
}}
|
||||
relationships={relationships}
|
||||
people={people}
|
||||
relationshipColors={RELATIONSHIP_COLORS}
|
||||
relationshipLabels={RELATIONSHIP_LABELS}
|
||||
onDeleteRelationship={deleteRelationship}
|
||||
onAddNewConnection={() => {
|
||||
setNewRelationship({
|
||||
...newRelationship,
|
||||
source: editPerson._id,
|
||||
});
|
||||
setPersonDetailModalOpen(false);
|
||||
setTimeout(() => setRelationshipModalOpen(true), 100);
|
||||
}}
|
||||
onNavigateToPerson={personId => {
|
||||
setSelectedPersonId(personId);
|
||||
setPersonDetailModalOpen(false);
|
||||
setTimeout(() => {
|
||||
const targetPerson = people.find((p: PersonNode) => p._id === personId);
|
||||
if (targetPerson) openPersonDetail(targetPerson);
|
||||
}, 100);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<SettingsModal
|
||||
isOpen={settingsModalOpen}
|
||||
onClose={() => setSettingsModalOpen(false)}
|
||||
settings={settings}
|
||||
setSettings={setSettings}
|
||||
/>
|
||||
|
||||
<HelpModal isOpen={helpModalOpen} onClose={() => setHelpModalOpen(false)} />
|
||||
|
||||
{/* Confirmation Dialog */}
|
||||
<ConfirmDialog
|
||||
isOpen={deleteConfirmOpen}
|
||||
onClose={() => setDeleteConfirmOpen(false)}
|
||||
onConfirm={executeDelete}
|
||||
title="Confirm Deletion"
|
||||
message={
|
||||
itemToDelete.type === 'person'
|
||||
? 'Are you sure you want to delete this person? This will also remove all their relationships.'
|
||||
: 'Are you sure you want to delete this relationship?'
|
||||
}
|
||||
confirmText="Delete"
|
||||
variant="danger"
|
||||
/>
|
||||
|
||||
{/* Toast Notifications */}
|
||||
<div className="fixed bottom-4 right-4 z-[9900] space-y-2 pointer-events-none">
|
||||
{toasts.map(toast => (
|
||||
<Toast
|
||||
key={toast.id}
|
||||
message={toast.message}
|
||||
type={toast.type as any}
|
||||
onClose={() => removeToast(toast.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FriendshipNetwork;
|
||||
@ -1,15 +0,0 @@
|
||||
import app from './app';
|
||||
import connectDB from './config/db';
|
||||
import dotenv from 'dotenv';
|
||||
|
||||
dotenv.config();
|
||||
|
||||
const PORT = process.env.PORT || 5000;
|
||||
|
||||
// Connect to MongoDB
|
||||
connectDB();
|
||||
|
||||
// Start server
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Server running on port ${PORT}`);
|
||||
});
|
||||
8
src/types/express.d.ts
vendored
8
src/types/express.d.ts
vendored
@ -1,8 +0,0 @@
|
||||
import { Request } from 'express';
|
||||
import { IUser } from '../models/user.model';
|
||||
import { INetwork } from '../models/network.model';
|
||||
|
||||
export interface UserRequest extends Request {
|
||||
user?: IUser;
|
||||
network?: INetwork;
|
||||
}
|
||||
85
src/types/types.ts
Normal file
85
src/types/types.ts
Normal file
@ -0,0 +1,85 @@
|
||||
export type RelationshipType = 'freund' | 'partner' | 'familie' | 'arbeitskolleg' | 'custom';
|
||||
|
||||
export interface PersonNode {
|
||||
_id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
birthday?: Date | string | null;
|
||||
notes?: string;
|
||||
position?: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
}
|
||||
|
||||
export interface RelationshipEdge {
|
||||
_id: string;
|
||||
source: string;
|
||||
target: string;
|
||||
type: RelationshipType;
|
||||
customType?: string;
|
||||
notes?: string;
|
||||
}
|
||||
|
||||
export interface GraphNode {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
connectionCount: number;
|
||||
bgColor: string;
|
||||
x: number;
|
||||
y: number;
|
||||
showLabel: boolean;
|
||||
}
|
||||
|
||||
export interface GraphEdge {
|
||||
id: string;
|
||||
source: string;
|
||||
target: string;
|
||||
color: string;
|
||||
width: number;
|
||||
type: RelationshipType;
|
||||
customType?: string;
|
||||
}
|
||||
|
||||
export interface CanvasGraphData {
|
||||
nodes: GraphNode[];
|
||||
edges: GraphEdge[];
|
||||
links: GraphEdge[]; // Added for compatibility with CustomGraphData
|
||||
}
|
||||
|
||||
export interface FormErrors {
|
||||
[key: string]: string;
|
||||
}
|
||||
|
||||
export interface NetworkSettings {
|
||||
darkMode: boolean;
|
||||
autoLayout: boolean;
|
||||
showLabels: boolean;
|
||||
animationSpeed: string;
|
||||
highlightConnections: boolean;
|
||||
nodeSize: string;
|
||||
}
|
||||
|
||||
export interface NewPersonForm {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
birthday: Date | null;
|
||||
notes: string;
|
||||
}
|
||||
|
||||
export interface NewRelationshipForm {
|
||||
source: string;
|
||||
target: string;
|
||||
type: RelationshipType;
|
||||
customType: string;
|
||||
notes: string;
|
||||
bidirectional: boolean;
|
||||
}
|
||||
|
||||
export interface ToastItem {
|
||||
id: number;
|
||||
message: string;
|
||||
type: 'error' | 'success' | 'warning' | 'info';
|
||||
onClose: () => void;
|
||||
}
|
||||
8
tailwind.config.js
Normal file
8
tailwind.config.js
Normal file
@ -0,0 +1,8 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@ -1,15 +1,36 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2018",
|
||||
"module": "commonjs",
|
||||
"outDir": "./dist",
|
||||
"rootDir": "./src",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
|
||||
/* Paths */
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["frontend/*"],
|
||||
"@server/*": ["server/*"]
|
||||
},
|
||||
|
||||
/* For Node.js compatibility */
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules", "**/*.test.ts"]
|
||||
"include": ["frontend", "server", "src"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
||||
10
tsconfig.node.json
Normal file
10
tsconfig.node.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
39
vite.config.ts
Normal file
39
vite.config.ts
Normal file
@ -0,0 +1,39 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { resolve } from 'path';
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react(), tailwindcss()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, 'src'),
|
||||
'@server': resolve(__dirname, 'server'),
|
||||
},
|
||||
},
|
||||
optimizeDeps: {
|
||||
include: [
|
||||
'react',
|
||||
'react-dom',
|
||||
'react-router-dom',
|
||||
'framer-motion',
|
||||
'react-icons',
|
||||
'react-force-graph-2d',
|
||||
],
|
||||
},
|
||||
server: {
|
||||
port: 3000,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:5000',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
manifest: true,
|
||||
},
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user