Itaht · Itaht · Jan 26, 2025 · Jan 26, 2025 · Jan 26, 2025 · Jan 26, 2025
diff --git a/README.md b/README.md
@@ -4,5 +4,10 @@ This template is used in the [Building An Activity](https://discord.com/develope
 
 Read more about building Discord Activities with the Embedded App SDK at [https://discord.com/developers/docs/activities/overview](https://discord.com/developers/docs/activities/overview).
 
-# web-app
-# web-app
+# installation
+WIP
+
+run
+npm run dev in ./server and ./client
+cloudflared tunnel --url http://localhost:5173
+then fix the discord app and vite.config.js
diff --git a/client/App.jsx b/client/App.jsx
@@ -1,133 +1,18 @@
-import React, { useState, useEffect } from 'react';
-import { DiscordSDK } from '@discord/embedded-app-sdk';
+import React from 'react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import AppProject from './components/pages/Project';
 import './styles/sidebar.css';
 import './index.css';
-import Interface from './components/Interface.jsx';
-import Calendar from './components/Calendar.jsx';
-import Task from './components/Task.jsx';
-import Board from './components/Board.jsx';
-import SettingsPopup from './components/Settings.jsx';
-import ProjectPopup from './components/ProjectPopup.jsx';
-import ConfirmationPopup from './components/ConfirmationPopup.jsx';
-import TaskLabel from './components/TaskLabel.jsx';
-import BoardProject from './components/BoardProject.jsx';
-import List from './components/List.jsx';
-import Member from './components/Member.jsx';
-
-const App = () => {
-  const [discordSdk, setDiscordSdk] = useState(null);
-  const [user, setUser] = useState(null);
-  const [isConfirmationVisible, setIsConfirmationVisible] = useState(false);
-  const [labelPopupVisible, setLabelPopupVisible] = useState(false);
-
-  useEffect(() => {
-    const setupDiscordSdk = async () => {
-      try {
-        const discordClientId = import.meta.env.VITE_DISCORD_CLIENT_ID;
-        const discordClientSecret = import.meta.env.VITE_DISCORD_CLIENT_SECRET;
-
-        if (!discordClientId || !discordClientSecret) {
-          throw new Error('Discord Client ID or Client Secret is missing');
-        }
-
-        console.log('Setting up Discord SDK...');
-
-        // Initialize Discord SDK
-        const sdk = new DiscordSDK(discordClientId);
-        await sdk.ready();
-
-        console.log('Discord SDK Ready...');
-
-        // Authorize with Discord OAuth
-        const { code } = await sdk.commands.authorize({
-          client_id: discordClientId,
-          response_type: 'code',
-          state: '',
-          prompt: 'none',
-          scope: ['identify', 'guilds', 'applications.commands'],
-        });
-
-        console.log('Authorization code received...');
-
-        // Exchange authorization code for access token
-        const response = await fetch('/api/token', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ code }),
-        });
-
-        if (!response.ok) {
-          throw new Error('Failed to fetch access token');
-        }
-
-        const { access_token } = await response.json();
-        console.log('Access Token received...');
-
-        // Authenticate with Discord SDK using the access token
-        await sdk.commands.authenticate({ access_token });
-
-        console.log('Authentication successful...');
-
-        // Fetch the user profile
-        const userProfile = await fetchUserProfile(access_token);
-        console.log('User Profile:', userProfile);
-
-        setUser({
-          username: userProfile.username,
-          avatarUrl: `https://cdn.discordapp.com/avatars/${userProfile.id}/${userProfile.avatar}.png`,
-        });
-
-        setDiscordSdk(sdk);
-      } catch (error) {
-        console.error('Error setting up Discord SDK:', error);
-      }
-    };
-
-    const fetchUserProfile = async (token) => {
-      const response = await fetch('https://discord.com/api/users/@me', {
-        headers: { Authorization: `Bearer ${token}` },
-      });
-      if (!response.ok) {
-        throw new Error('Failed to fetch user profile');
-      }
-      return await response.json();
-    };
-
-    setupDiscordSdk();
-  }, []);
-
-  const handleConfirmation = () => {
-    setIsConfirmationVisible(false);
-  };
-
-  if (!user) {
-    console.log('User data is still loading...');
-    return <div>Loading...</div>;
-  }
-
-  return (
-    <div id="app">
-      <Interface user={user} />
-      <Calendar />
-      <Task />
-      <Board />
-      <SettingsPopup />
-      <ProjectPopup />
-      <ConfirmationPopup
-        isVisible={isConfirmationVisible}
-        onConfirm={handleConfirmation}
-        onCancel={() => setIsConfirmationVisible(false)}
-      />
-      <TaskLabel
-        isVisible={labelPopupVisible}
-        onLabelSelect={(label) => console.log('Selected label:', label)}
-        onClose={() => setLabelPopupVisible(false)}
-      />
-      <BoardProject />
-      <List />
-      <Member members={[{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]} />
+// Example components for different routes
+
+const App = () => (
+  <MemoryRouter>
+    <div>
+      <Routes>
+        <Route path="/" element={<AppProject />} />
+      </Routes>
     </div>
-  );
-};
+  </MemoryRouter>
+);
 
-export default App;
+export default App;
diff --git a/client/components/pages/Project.jsx b/client/components/pages/Project.jsx
@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from 'react';
+import { DiscordSDK } from '@discord/embedded-app-sdk';
+import Interface from '../Interface.jsx';
+import Calendar from '../Calendar.jsx';
+import Task from '../Task.jsx';
+import Board from '../Board.jsx';
+import SettingsPopup from '../Settings.jsx';
+import ProjectPopup from '../ProjectPopup.jsx';
+import ConfirmationPopup from '../ConfirmationPopup.jsx';
+import TaskLabel from '../TaskLabel.jsx';
+import BoardProject from '../BoardProject.jsx';
+import List from '../List.jsx';
+import Member from '../Member.jsx';
+
+const Project = () => {
+  const [discordSdk, setDiscordSdk] = useState(null);
+  const [user, setUser] = useState(null);
+  const [isConfirmationVisible, setIsConfirmationVisible] = useState(false);
+  const [labelPopupVisible, setLabelPopupVisible] = useState(false);
+
+  useEffect(() => {
+    const setupDiscordSdk = async () => {
+      try {
+        const discordClientId = import.meta.env.VITE_DISCORD_CLIENT_ID;
+
+        if (!discordClientId) {
+          throw new Error('Discord Client ID is missing');
+        }
+
+        console.log('Setting up Discord SDK...');
+
+        // Initialize Discord SDK
+        const sdk = new DiscordSDK(discordClientId);
+        await sdk.ready();
+
+        console.log('Discord SDK Ready...');
+
+        // Authorize with Discord OAuth
+        const { code } = await sdk.commands.authorize({
+          client_id: discordClientId,
+          response_type: 'code',
+          state: '',
+          prompt: 'none',
+          scope: ['identify', 'guilds', 'applications.commands'],
+        });
+
+        console.log('Authorization code received...');
+
+        // Exchange authorization code for access token
+        const response = await fetch('/.proxy/api/api/v1/token', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ code }),
+        });
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch access token');
+        }
+
+        const { access_token } = await response.json();
+        console.log('Access Token received...');
+
+        // Authenticate with Discord SDK using the access token
+        await sdk.commands.authenticate({ access_token });
+
+        console.log('Authentication successful...');
+
+        // Fetch the user profile
+        const userProfile = await fetchUserProfile(access_token);
+        console.log('User Profile:', userProfile);
+
+        setUser({
+          username: userProfile.username,
+          avatarUrl: `https://cdn.discordapp.com/avatars/${userProfile.id}/${userProfile.avatar}.png`,
+        });
+
+        setDiscordSdk(sdk);
+      } catch (error) {
+        console.error('Error setting up Discord SDK:', error);
+      }
+    };
+
+    const fetchUserProfile = async (token) => {
+      const response = await fetch('https://discord.com/api/users/@me', {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (!response.ok) {
+        throw new Error('Failed to fetch user profile');
+      }
+      return await response.json();
+    };
+
+    setupDiscordSdk();
+  }, []);
+
+  const handleConfirmation = () => {
+    setIsConfirmationVisible(false);
+  };
+
+  if (!user) {
+    console.log('User data is still loading...');
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div id="app">
+      <Interface user={user} />
+      <Calendar />
+      <Task />
+      <Board />
+      <SettingsPopup />
+      <ProjectPopup />
+      <ConfirmationPopup
+        isVisible={isConfirmationVisible}
+        onConfirm={handleConfirmation}
+        onCancel={() => setIsConfirmationVisible(false)}
+      />
+      <TaskLabel
+        isVisible={labelPopupVisible}
+        onLabelSelect={(label) => console.log('Selected label:', label)}
+        onClose={() => setLabelPopupVisible(false)}
+      />
+      <BoardProject />
+      <List />
+      <Member members={[{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]} />
+    </div>
+  );
+};
+
+export default Project;
diff --git a/client/index.html b/client/index.html
@@ -3,19 +3,6 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="Content-Security-Policy" content="
-  default-src 'self';
-  connect-src 'self' 
-    wss://1322956099464462358.discordsays.com/.proxy/ 
-    wss://discord.com/api/ 
-    wss://canary.discord.com/api/ 
-    wss://ptb.discord.com/api/ 
-    https://cdn.discordapp.com/ 
-    https://discordapp.com/ 
-    https://media.discordapp.net/ 
-    data: 
-    blob:;
-">
   </head>
   <body>
     <div id="root"></div>

diff --git a/client/index.jsx b/client/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';  // Correct import for React 18+
 import App from './App';
+import { MemoryRouter ,Routes ,Route} from 'react-router-dom';
 import './index.css';
 
 const root = document.getElementById('root');

diff --git a/client/vite.config.js b/client/vite.config.js
@@ -8,7 +8,7 @@ export default defineConfig({
   plugins: [react()],
   envDir: '../', // Ensure this matches the location of your environment variables file
   server: {
-    allowedHosts: ['scholars-survivor-joining-peripheral.trycloudflare.com'],
+    allowedHosts: ['lbs-field-barriers-grenada.trycloudflare.com'],
     proxy: {
       '/api': {
         target: 'http://localhost:3001', // Ensure this matches your backend API URL