2 lines
15 KiB
JSON
2 lines
15 KiB
JSON
{"id":"chatcmpl-ac058c3f4bbb6750","object":"chat.completion","created":1774199165,"model":"NousResearch\/Hermes-3-Llama-3.2-3B","choices":[{"index":0,"message":{"role":"assistant","content":"Here is the complete project setup:\n\n1. Create a React app with TypeScript:\n\n```bash\nnpx create-react-app task-manager-react --template typescript\n```\n\n2. Set up the project structure with folders for components, hooks, services, types, utils:\n\n```bash\nmkdir src\/components src\/hooks src\/services src\/types src\/utils\n```\n\n3. Create TypeScript interfaces for Task, User, Project, Comment:\n\n```typescript\n\/\/ src\/types\/index.ts\nexport interface Task {\n id: string;\n title: string;\n description: string;\n completed: boolean;\n priority: string;\n due_date: string;\n tags: string;\n depends_on: string;\n recurrence: string;\n next_occurrence: string;\n time_spent: number;\n progress: number;\n assigned_to: string;\n estimated_minutes: number;\n created_at: string;\n updated_at: string;\n notes: TaskNote[];\n templates: TaskTemplate[];\n articles: Article[];\n messages: Message[];\n versions: TaskVersion[];\n}\n\nexport interface User {\n id: string;\n username: string;\n password: string;\n roles: Role[];\n notifications: Notification[];\n search_history: SearchHistory[];\n}\n\nexport interface Project {\n id: string;\n name: string;\n description: string;\n deadline: string;\n tasks: Task[];\n}\n\nexport interface Comment {\n id: string;\n task_id: string;\n user_id: string;\n content: string;\n created_at: string;\n}\n\nexport interface TaskNote {\n id: string;\n task_id: string;\n content: string;\n created_at: string;\n}\n\nexport interface TaskTemplate {\n id: string;\n title_template: string;\n default_priority: string;\n default_tags: string;\n depends_on: string;\n recurrence: string;\n next_occurrence: string;\n time_spent: number;\n progress: number;\n assigned_to: string;\n estimated_minutes: number;\n created_at: string;\n updated_at: string;\n}\n\nexport interface Article {\n id: string;\n title: string;\n content: string;\n created_at: string;\n updated_at: string;\n version: number;\n tasks: Task[];\n tags: ArticleTag[];\n}\n\nexport interface ArticleTag {\n id: string;\n article_id: string;\n tag: string;\n}\n\nexport interface Message {\n id: string;\n chat_room_id: string;\n user_id: string;\n content: string;\n created_at: string;\n}\n\nexport interface TaskVersion {\n id: string;\n task_id: string;\n content: string;\n created_at: string;\n updated_at: string;\n comments: TaskVersionComment[];\n tags: TaskVersionTag[];\n}\n\nexport interface TaskVersionComment {\n id: string;\n version_id: string;\n content: string;\n created_at: string;\n}\n\nexport interface TaskVersionTag {\n id: string;\n version_id: string;\n tag: string;\n}\n```\n\n4. Set up React Router with routes for \/dashboard, \/tasks, \/projects, \/settings:\n\n```bash\nnpx react-router-dom@6\n```\n\n5. Create an API service layer with axios for all backend endpoints:\n\n```typescript\n\/\/ src\/services\/index.ts\nimport axios from 'axios';\n\nconst API_URL = 'http:\/\/localhost:5000';\n\nexport const getTasks = async () => {\n const response = await axios.get(`${API_URL}\/tasks`);\n return response.data;\n};\n\nexport const getTask = async (task_id: string) => {\n const response = await axios.get(`${API_URL}\/tasks\/${task_id}`);\n return response.data;\n};\n\nexport const createTask = async (task: Task) => {\n const response = await axios.post(`${API_URL}\/tasks`, task);\n return response.data;\n};\n\nexport const updateTask = async (task_id: string, task: Task) => {\n const response = await axios.put(`${API_URL}\/tasks\/${task_id}`, task);\n return response.data;\n};\n\nexport const archiveTask = async (task_id: string) => {\n const response = await axios.get(`${API_URL}\/tasks\/${task_id}\/archive`);\n return response.data;\n};\n\nexport const editTask = async (task_id: string) => {\n const response = await axios.get(`${API_URL}\/tasks\/${task_id}\/edit`);\n return response.data;\n};\n\nexport const undoTask = async (task_id: string) => {\n const response = await axios.get(`${API_URL}\/tasks\/${task_id}\/undo`);\n return response.data;\n};\n\nexport const redoTask = async (task_id: string) => {\n const response = await axios.get(`${API_URL}\/tasks\/${task_id}\/redo`);\n return response.data;\n};\n\nexport const searchTasks = async (query: string) => {\n const response = await axios.get(`${API_URL}\/tasks\/search?query=${query}`);\n return response.data;\n};\n\nexport const getProjects = async () => {\n const response = await axios.get(`${API_URL}\/projects`);\n return response.data;\n};\n\nexport const createProject = async (project: Project) => {\n const response = await axios.post(`${API_URL}\/projects`, project);\n return response.data;\n};\n\nexport const deleteProject = async (project_id: string) => {\n const response = await axios.delete(`${API_URL}\/projects\/${project_id}`);\n return response.data;\n};\n\nexport const getNotifications = async () => {\n const response = await axios.get(`${API_URL}\/notifications`);\n return response.data;\n};\n\nexport const markNotificationsAsRead = async (user_id: string) => {\n const response = await axios.get(`${API_URL}\/notifications\/mark_as_read?user_id=${user_id}`);\n return response.data;\n};\n\nexport const getNotificationDigest = async (user_id: string, start_date: string, end_date: string) => {\n const response = await axios.get(`${API_URL}\/notifications\/digest?user_id=${user_id}&start_date=${start_date}&end_date=${end_date}`);\n return response.data;\n};\n\nexport const exportTasks = async (file_path: string) => {\n const response = await axios.get(`${API_URL}\/tasks\/export?file_path=${file_path}`);\n return response.data;\n};\n\nexport const importTasks = async (file_path: string) => {\n const response = await axios.post(`${API_URL}\/import\/csv`, { file: file_path });\n return response.data;\n};\n\nexport const getArticles = async () => {\n const response = await axios.get(`${API_URL}\/articles`);\n return response.data;\n};\n\nexport const createArticle = async (article: Article) => {\n const response = await axios.post(`${API_URL}\/articles`, article);\n return response.data;\n};\n\nexport const getArticleCategories = async () => {\n const response = await axios.get(`${API_URL}\/article_categories`);\n return response.data;\n};\n\nexport const createArticleCategory = async (name: string) => {\n const response = await axios.post(`${API_URL}\/article_categories`, { name: name });\n return response.data;\n};\n\nexport const addArticleCategoryToArticle = async (article_id: string, category_id: string) => {\n const response = await axios.post(`${API_URL}\/article_categories\/${article_id}\/${category_id}`);\n return response.data;\n};\n\nexport const getArticleTags = async (article_id: string) => {\n const response = await axios.get(`${API_URL}\/article_tags\/${article_id}`);\n return response.data;\n};\n\nexport const addArticleTag = async (article_id: string, tag: string) => {\n const response = await axios.post(`${API_URL}\/article_tags\/${article_id}\/${tag}`);\n return response.data;\n};\n\nexport const getArticleTemplates = async () => {\n const response = await axios.get(`${API_URL}\/article_templates`);\n return response.data;\n};\n\nexport const createArticleTemplate = async (name: string, content: string) => {\n const response = await axios.post(`${API_URL}\/article_templates`, { name: name, content: content });\n return response.data;\n};\n\nexport const deleteArticleTemplate = async (template_id: string) => {\n const response = await axios.delete(`${API_URL}\/article_templates\/${template_id}`);\n return response.data;\n};\n\nexport const getChatRooms = async () => {\n const response = await axios.get(`${API_URL}\/chat_rooms`);\n return response.data;\n};\n\nexport const getChatMessages = async (chat_room_id: string) => {\n const response = await axios.get(`${API_URL}\/chat_messages\/${chat_room_id}`);\n return response.data;\n};\n\nexport const addMessage = async (chat_room_id: string, user_id: string, content: string) => {\n const response = await axios.post(`${API_URL}\/chat_messages\/${chat_room_id}`, { user_id: user_id, content: content });\n return response.data;\n};\n\nexport const getArticleSearch = async (query: string) => {\n const response = await axios.get(`${API_URL}\/articles\/search?query=${query}`);\n return response.data;\n};\n\nexport const getTaskVersions = async (task_id: string) => {\n const response = await axios.get(`${API_URL}\/task_versions\/${task_id}`);\n return response.data;\n};\n\nexport const restoreTaskToVersion = async (task_id: string, version_id: string) => {\n const response = await axios.get(`${API_URL}\/task_versions\/${task_id}\/restore\/${version_id}`);\n return response.data;\n};\n\nexport const compareTaskVersions = async (task_id: string, version1_id: string, version2_id: string) => {\n const response = await axios.get(`${API_URL}\/task_versions\/${task_id}\/compare\/${version1_id}\/${version2_id}`);\n return response.data;\n};\n\nexport const addTaskVersionComment = async (task_id: string, version_id: string, comment: string) => {\n const response = await axios.post(`${API_URL}\/task_versions\/${task_id}\/comments\/${version_id}`, { comment: comment });\n return response.data;\n};\n\nexport const getTaskVersionTags = async (task_id: string, version_id: string) => {\n const response = await axios.get(`${API_URL}\/task_versions\/${task_id}\/tags\/${version_id}`);\n return response.data;\n};\n\nexport const addTaskVersionTag = async (task_id: string, version_id: string, tag: string) => {\n const response = await axios.post(`${API_URL}\/task_versions\/${task_id}\/tags\/${version_id}\/${tag}`);\n return response.data;\n};\n\nexport const exportTaskVersions = async (task_id: string) => {\n const response = await axios.get(`${API_URL}\/task_versions\/${task_id}\/export`);\n return response.data;\n};\n\nexport const getTaskVersionTimeline = async (task_id: string) => {\n const response = await axios.get(`${API_URL}\/task_versions\/${task_id}\/timeline`);\n return response.data;\n};\n\nexport const login = async (username: string, password: string) => {\n const response = await axios.post(`${API_URL}\/login`, { username: username, password: password });\n return response.data;\n};\n\nexport const logout = async () => {\n const response = await axios.post(`${API_URL}\/logout`);\n return response.data;\n};\n```\n\n6. Set up authentication context with JWT token handling:\n\n```typescript\n\/\/ src\/context\/AuthContext.tsx\nimport React, { createContext, useContext, useState } from 'react';\n\ninterface AuthContextType {\n user: User | null;\n login: (username: string, password: string) => Promise<void>;\n logout: () => Promise<void>;\n}\n\nconst AuthContext = createContext<AuthContextType | undefined>(undefined);\n\nexport const AuthProvider = ({ children }: { children: React.ReactNode }) => {\n const [user, setUser] = useState<User | null>(null);\n\n const login = async (username: string, password: string) => {\n const response = await axios.post(`${API_URL}\/login`, { username: username, password: password });\n setUser(response.data);\n };\n\n const logout = async () => {\n await axios.post(`${API_URL}\/logout`);\n setUser(null);\n };\n\n return (\n <AuthContext.Provider value={{ user, login, logout }}>\n {children}\n <\/AuthContext.Provider>\n );\n};\n\nexport const useAuth = () => {\n const context = useContext(AuthContext);\n if (context === undefined) {\n throw new Error('useAuth must be used within a AuthProvider');\n }\n return context;\n};\n```\n\n7. Create a Layout component with sidebar navigation:\n\n```typescript\n\/\/ src\/components\/Layout.tsx\nimport React from 'react';\nimport { Link } from 'react-router-dom';\nimport { useAuth } from '..\/context\/AuthContext';\n\ninterface LayoutProps {\n children: React.ReactNode;\n}\n\nconst Layout: React.FC<LayoutProps> = ({ children }) => {\n const auth = useAuth();\n\n return (\n <div className=\"flex\">\n <div className=\"w-64 bg-gray-800\">\n <ul className=\"mt-6\">\n <li>\n <Link to=\"\/dashboard\" className=\"text-white hover:text-gray-300\">\n Dashboard\n <\/Link>\n <\/li>\n <li>\n <Link to=\"\/tasks\" className=\"text-white hover:text-gray-300\">\n Tasks\n <\/Link>\n <\/li>\n <li>\n <Link to=\"\/projects\" className=\"text-white hover:text-gray-300\">\n Projects\n <\/Link>\n <\/li>\n <li>\n <Link to=\"\/settings\" className=\"text-white hover:text-gray-300\">\n Settings\n <\/Link>\n <\/li>\n <\/ul>\n <\/div>\n <div className=\"flex-1\">{children}<\/div>\n <\/div>\n );\n};\n\nexport default Layout;\n```\n\n8. Create a Header component with user menu and notifications bell:\n\n```typescript\n\/\/ src\/components\/Header.tsx\nimport React from 'react';\nimport { Link } from 'react-router-dom';\nimport { useAuth } from '..\/context\/AuthContext';\n\ninterface HeaderProps {\n children: React.ReactNode;\n}\n\nconst Header: React.FC<HeaderProps> = ({ children }) => {\n const auth = useAuth();\n\n return (\n <div className=\"bg-gray-900\">\n <div className=\"mx-auto max-w-7xl\">\n <nav className=\"flex justify-between p-4\">\n <div className=\"flex space-x-4\">\n <Link to=\"\/dashboard\" className=\"text-white hover:text-gray-300\">\n Dashboard\n <\/Link>\n <Link to=\"\/tasks\" className=\"text-white hover:text-gray-300\">\n Tasks\n <\/Link>\n <Link to=\"\/projects\" className=\"text-white hover:text-gray-300\">\n Projects\n <\/Link>\n <Link to=\"\/settings\" className=\"text-white hover:text-gray-300\">\n Settings\n <\/Link>\n <\/div>\n <div className=\"flex space-x-4\">\n <Link to=\"\/notifications\" className=\"text-white hover:text-gray-300\">\n Notifications\n <\/Link>\n {auth.user && (\n <Link to=\"\/settings\" className=\"text-white hover:text-gray-300\">\n {auth.user.username}\n <\/Link>\n )}\n {!auth.user && (\n <Link to=\"\/login\" className=\"text-white hover:text-gray-300\">\n Login\n <\/Link>\n )}\n <\/div>\n <\/nav>\n <\/div>\n <\/div>\n );\n};\n\nexport default Header;\n```\n\nNote: Make sure you have the necessary API endpoints and database models set up for the React app to communicate with the Flask backend.","refusal":null,"annotations":null,"audio":null,"function_call":null,"tool_calls":[],"reasoning":null},"logprobs":null,"finish_reason":"stop","token_ids":null}],"service_tier":null,"system_fingerprint":null,"usage":{"prompt_tokens":27625,"total_tokens":30907,"completion_tokens":3282,"prompt_tokens_details":null},"prompt_token_ids":null,"kv_transfer_params":null}
|