Merge branch 'main' of https://github.com/sustech-cs304/team-project-…

…24spring-34
sustech-cs304 · Jun 3, 2024 · 012e1a9 · 012e1a9
2 parents 0e31200 + 4dc76b8
commit 012e1a9
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 12 deletions.
diff --git a/client/src/eventDetails/Detial_page.js b/client/src/eventDetails/Detial_page.js
@@ -28,7 +28,7 @@ function ActivityDetails() {
     id: 1,
     title: '基窝托斯偷跑大赛',
     description: sample_text,
-    poster: null,
+    poster: 'https://i.pravatar.cc/150?img=1',
     organizer_id: 10,
     publish_organization: '格赫娜学院万魔殿',
     start_time: '2024-10-10T10:00:00.000Z',
@@ -88,6 +88,7 @@ function ActivityDetails() {
           .catch((error) => {
             console.error('Error fetching activity details:', error);
           });
+        console.log(response);
         setActive(response);
       } catch (error) {
         console.error('Error fetching activity details:', error);
@@ -96,6 +97,8 @@ function ActivityDetails() {
 
     if (activeid) {
       fetchActivityDetails();
+      console.log('active');
+      console.log(active);
     }
   }, [activeid]);
 

diff --git a/client/src/eventDetails/introduction.js b/client/src/eventDetails/introduction.js
@@ -1,10 +1,37 @@
 import React, {useState, useEffect} from 'react';
+import axios from 'axios';
+
+const baseURL = 'http://10.27.41.93:5000/api';
+const fetchImage = async ({Url, authToken}) => {
+  try {
+    console.log('fetching image' + `http://10.27.41.93:5000/api/${Url}`);
+    const response = await axios.get(`http://10.27.41.93:5000/api/${Url}`, {
+      headers: {
+        Accept: 'image/*',
+        Authorization: `Bearer ${authToken}`,
+      },
+      responseType: 'blob', // Ensure response is treated as a Blob
+    });
+
+    // Create a URL for the image
+    const url = URL.createObjectURL(response.data);
+    return url;
+  } catch (error) {
+    console.error('Error fetching image:', error);
+  }
+};
 
 const Introduction = ({activityImage, activityDescription}) => {
+  const authToken = localStorage.getItem('authToken');
   return (
     <div className='introduction-container'>
       <div className='image'>
-        {activityImage && <img src={activityImage} alt='activity poster' />}
+        {activityImage && (
+          <img
+            src={fetchImage(activityImage, authToken)}
+            alt='activity poster'
+          />
+        )}
       </div>
       <div className='text'>
         <p>{activityDescription}</p>

diff --git a/client/src/logIn/Login.js b/client/src/logIn/Login.js
@@ -48,6 +48,10 @@ export default function SignInSide() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
 
+  const handleSignUP = () => {
+    navigate('/signUP');
+  };
+
   const handleEmailChange = (event) => {
     setEmail(event.target.value);
   };
@@ -182,7 +186,7 @@ export default function SignInSide() {
                   </DialogContent>
                 </Dialog>
                 <Grid item>
-                  <Link href='#' variant='body2'>
+                  <Link href='#' variant='body2' onClick={handleSignUP}>
                     {"Don't have an account? Sign Up"}
                   </Link>
                 </Grid>

diff --git a/client/src/publish/components/ImageUploader.js b/client/src/publish/components/ImageUploader.js
@@ -0,0 +1,91 @@
+import React, {useState} from 'react';
+import axios from 'axios';
+
+const ImageUploader = ({addPoster}) => {
+  const authToken = localStorage.getItem('authToken');
+  const [name, setName] = useState('');
+  const [avatar, setAvatar] = useState(null);
+  const [imageUrl, setImageUrl] = useState('');
+
+  const handleNameChange = (e) => setName(e.target.value);
+  const handleAvatarChange = (e) => setAvatar(e.target.files[0]);
+
+  const uploadImage = async (file) => {
+    try {
+      const formData = new FormData();
+      formData.append('image', file);
+
+      const response = await axios.post(
+        'http://10.27.41.93:5000/api/images',
+        formData,
+        {
+          headers: {
+            Accept: 'application/json',
+            'Content-Type': 'multipart/form-data',
+            Authorization: `Bearer ${authToken}`,
+          },
+        },
+        {
+          withCredentials: true,
+        },
+      );
+      console.log(response.data.url);
+      return response.data.url;
+    } catch (error) {
+      console.error('Error uploading image:', error);
+      throw error;
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!authToken) {
+      console.error('No auth token available');
+      return;
+    }
+    if (!avatar) {
+      console.error('No file selected');
+      return;
+    }
+    try {
+      const avatarUrl = await uploadImage(avatar);
+      setImageUrl(avatarUrl);
+      addPoster({avatarUrl});
+    } catch (error) {
+      console.error('Error uploading avatar:', error);
+    }
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <input
+          type='text'
+          value={name}
+          onChange={handleNameChange}
+          placeholder='Name'
+          required
+        />
+        <input
+          type='file'
+          onChange={handleAvatarChange}
+          accept='image/*'
+          required
+        />
+        <button type='submit'>Add Poster</button>
+      </form>
+      {imageUrl && (
+        <div>
+          <p>Uploaded Image:</p>
+          <img
+            src={imageUrl}
+            alt='Uploaded Avatar'
+            style={{maxWidth: '300px'}}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ImageUploader;
diff --git a/client/src/publish/components/formInput.js b/client/src/publish/components/formInput.js
@@ -3,6 +3,7 @@ import styled, {ThemeProvider} from 'styled-components';
 import {Modal} from 'antd';
 import axios from 'axios';
 import {useNavigate} from 'react-router-dom';
+import ImageUploader from './ImageUploader';
 
 import TextInput from './textInput';
 import NumInput from './numInput';
@@ -92,10 +93,14 @@ function FormInput(props) {
     return dateTime;
   };
 
+  const handelPoseterchange = (url) => {
+    setPics(url);
+  };
+
   const requestBody = {
     title: eventTitle.trim(),
     description: eventIntro.trim(),
-    poster: pics.length === 1 && typeof pics[0] === 'object' ? pics[0].uid : '',
+    poster: pics.avatarUrl,
     publish_organization: eventOrganizer.trim(),
     participants: cast,
     start_time: getDateTime({dateProp: startDate, timeProp: startTime}),
@@ -261,7 +266,7 @@ function FormInput(props) {
               height='600px'
               msg='Type your detailed event description here...'
             />
-            <ThemeUpload onPicsChange={updatePicsChange} />
+            <ThemeUpload handelPoseterchange={handelPoseterchange} />
             <ThemeNumInput cap={updateEventCap} />
             <ThemeButton onClick={handleClick} />
           </div>

diff --git a/client/src/publish/components/themeUpload.js b/client/src/publish/components/themeUpload.js
@@ -5,7 +5,7 @@ import DatePicker from 'react-datepicker';
 import 'react-time-picker/dist/TimePicker.css';
 import 'react-clock/dist/Clock.css';
 import TimePicker from 'react-time-picker';
-import AddPics from './addPics';
+import ImageUploader from './ImageUploader';
 
 // 定义主题
 const theme = {
@@ -108,22 +108,18 @@ const StyledDatePicker = styled(DatePicker)`
   }
 `;
 
-function ThemeBox({onPicsChange}) {
+function ThemeBox({handelPoseterchange}) {
   const [pics, setPics] = useState('');
   const HandlePicsChange = (changePics) => {
     setPics(changePics);
   };
 
-  useEffect(() => {
-    onPicsChange(pics);
-  }, [pics, onPicsChange]);
-
   return (
     <ThemeProvider theme={theme}>
       <Container>
         <Card>
           <Paragraph>Upload Pictures Here.</Paragraph>
-          <AddPics onPicsChange={HandlePicsChange} />
+          <ImageUploader addPoster={handelPoseterchange} />
         </Card>
       </Container>
     </ThemeProvider>