Skip to content

Commit

Permalink
Merge pull request #52 from GDSC-KNU/Feat/issue-51
Browse files Browse the repository at this point in the history
Feat/issue 51
  • Loading branch information
DingX2 authored Feb 25, 2024
2 parents 272833c + 3c343a1 commit ff96355
Show file tree
Hide file tree
Showing 7 changed files with 161 additions and 13 deletions.
7 changes: 3 additions & 4 deletions BlueMosaic/src/components/FrameSVG.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,9 @@ export const Frame = ({ imageUrl, text="plastic bag", point="150" }) => {

const FrameWrapper = styled.div`
display: flex;
width: 45vh;
height: 50vh;
width: 65vh;
height: 70vh;
padding: 1.25rem 1.875rem;
margin-bottom: 10rem;
flex-direction: column;
justify-content: center;
align-items: center;
Expand All @@ -38,7 +37,7 @@ img {
}
span {
font-size: 1.5rem;
font-size: 1.25rem;
margin: 0;
}
Expand Down
6 changes: 4 additions & 2 deletions BlueMosaic/src/hooks/useFriendQuery.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ export const FriendApis = {
console.log(res);
return res.data;
} catch (error) {
console.error('Error fetching rooms:', error);
// 이미 친구가 되어있는 경우
console.error(' :', error);
throw error;
}
},
Expand All @@ -30,7 +31,8 @@ export const FriendApis = {
console.log(res);
return res.data;
} catch (error) {
console.error('Error fetching rooms:', error);
//
console.error('해당하는 유저가 없습니다 :', error);
throw error;
}
},
Expand Down
68 changes: 68 additions & 0 deletions BlueMosaic/src/hooks/useMarineQuery.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import axios from 'axios';
import { UserInfoStore } from '../stores/UserInfoStore';

export const MarineApis = {
instance: axios.create({
baseURL: 'http://localhost:8080/marinelife',
withCredentials: true,
}),

// 쓰레기 데이터 임시 생성하기
create: async () => {
try {
const res = await MarineApis.instance.post('/temp-data', {
"marineLifeId": 0,
"userId": 0,
"name": "string",
"latitude": 0,
"longitude": 0
});
console.log(res);
return res.data;
} catch (error) {
console.error('Error fetching wastes:', error);
}
},

// 업로드하고 획득한 점수 확인하기
upload: async (formData: FormData) => {
try {
const res = await MarineApis.instance.post('', formData);
console.log(res);
return res.data;
} catch (error) {
alert(`[Can't recognize] Please add a clearer picture`)
throw error;
}
},

// 주어진 ID의 해양 생물 정보를 수정
update: async () => {
try {
const res = await MarineApis.instance.put('',{
"marineLifeId": 0,
"userId": 0,
"name": "string",
"latitude": 0,
"longitude": 0
});
console.log(res);
return res.data;
} catch (error) {
console.error(error);
throw error;
}
},

// 사용자가 모은 해양 생물 정보를 조회
getCollection: async () => {
try {
const res = await MarineApis.instance.get(`/retrieve${UserInfoStore.getState().userId}`);
console.log(res);
return res.data;
} catch (error) {
alert(`[Can't recognize] Please add `)
throw error;
}
},
};
2 changes: 1 addition & 1 deletion BlueMosaic/src/hooks/useWasteQuery.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const WasteApis = {
get: async (formData: FormData) => {
try {
const res = await WasteApis.instance.post('', formData);
console.log(res);
console.log("check",res);
return res.data;
} catch (error) {
alert(`[Can't recognize] Please add a clearer picture`)
Expand Down
4 changes: 2 additions & 2 deletions BlueMosaic/src/pages/Ocean.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { SmartphoneSVG } from "../components/SmartphoneSVG";
import { useState, ChangeEvent, FormEvent, useRef } from "react"
import { useNavigate } from "react-router-dom";
import { Toast } from "../components/Toast";
import { MediaApis } from "../hooks/useMediaQuery";
import { MarineApis } from "../hooks/useMarineQuery";
import imageUrl from "../assets/UploadBackground.jpg"

export const Ocean = () => {
Expand Down Expand Up @@ -47,7 +47,7 @@ export const Ocean = () => {
}

try {
const response = await MediaApis.upload(formData);
const response = await MarineApis.upload(formData);
console.log("Upload Response:", response);
setShowSmartphone(true);
} catch (error) {
Expand Down
28 changes: 24 additions & 4 deletions BlueMosaic/src/pages/Trash.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ import { Frame } from "../components/FrameSVG";
import { Toast } from "../components/Toast";
import { useNavigate } from 'react-router-dom';
import { WasteApis } from '../hooks/useWasteQuery';
WasteApis
import { useStore } from 'zustand';
import { TrashInfo, TrashInfoStore } from '../stores/TrashStore';

export const Trash = () => {
const [showFrame, setShowFrame] = useState(false);
Expand All @@ -17,6 +18,7 @@ export const Trash = () => {
const [selectedImageUrl, setSelectedImageUrl] = useState<string | null>(null);
const fileInputRef = useRef<HTMLInputElement | null>(null); // Ref for the file input
const navigate = useNavigate();
const trashinfo = useStore(TrashInfoStore);

// 파일 선택 핸들러
const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
Expand Down Expand Up @@ -50,7 +52,24 @@ export const Trash = () => {
const response = await WasteApis.get(formData);
//test
//WasteApis.create();
console.log("Upload Response:", response);
// console.log("Upload Response:", response);

trashinfo.setPlastic(response.plastic);
trashinfo.setStyrofoam(response.styrofoam);
trashinfo.setFiber(response.fiber);
trashinfo.setVinyl(response.vinyl);
trashinfo.setGeneralWaste(response.generalWaste);
trashinfo.setTotalScore(response.total);
trashinfo.setScore(response.score);

const nonZeroProperties = Object.keys(response)
.filter(key => key !== "userId" && key !== "score" && key !== "total" && response[key] !== 0);

const classes = nonZeroProperties.join(', ');

console.log(classes); // 결과: "plastic, styrofoam"
trashinfo.setClasses(classes);

setShowFrame(true);
} catch (error) {
console.error('Error uploading file:', error);
Expand Down Expand Up @@ -82,7 +101,7 @@ export const Trash = () => {
<Container>
<PolaroidWrapper>
{showFrame || <img src={PolaroidSVG} alt="PolaroidSVG" onClick={handleClick} />}
{showFrame && <Frame imageUrl={selectedImageUrl || ''} text="plastic bag" point='100'/>}
{showFrame && <Frame imageUrl={selectedImageUrl || ''} text={TrashInfoStore.getState().classes} point={TrashInfoStore.getState().score.toString()}/>}
<form onSubmit={handleUpload}>
<input
id='image'
Expand All @@ -96,7 +115,7 @@ export const Trash = () => {
</form>
{ showToast && !showFrame && <Toast found={'Information'} points={"Click the red button to upload the picture and get score points"} button1={"No thanks"} button2={"got it"} handleClickUpload={handleClickToast} handleGoto={handleClickToast}/> }

{ showFrame && <Toast found={`I found ${"plastic bag"}`} points={`My total score is ${100}`} handleClickUpload={handleClickUpload} handleGoto={handleGoto} button1={"Reupload"} button2={"Collection"} />}
{ showFrame && <Toast found={`I found ${TrashInfoStore.getState().classes}`} points={`My total score is ${TrashInfoStore.getState().totalScore}`} handleClickUpload={handleClickUpload} handleGoto={handleGoto} button1={"Reupload"} button2={"Collection"} />}
</PolaroidWrapper>
</Container>
</Wrapper>
Expand Down Expand Up @@ -126,6 +145,7 @@ const StyledButton = styled.button`
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 1rem;
&:hover {
filter: brightness(70%);
Expand Down
59 changes: 59 additions & 0 deletions BlueMosaic/src/stores/TrashStore.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { create } from "zustand";
import { devtools } from "zustand/middleware";

export interface TrashInfo {
plastic: number;
styrofoam: number;
fiber: number;
vinyl: number;
generalWaste: number;

score: number;
totalScore: number;

classes: string;

setPlastic: (plastic: TrashInfo['plastic']) => void;
setStyrofoam: (styrofoam: TrashInfo['styrofoam']) => void;
setFiber: (fiber: TrashInfo['fiber']) => void;
setVinyl: (vinyl: TrashInfo['vinyl']) => void;
setGeneralWaste: (generalWaste: TrashInfo['generalWaste']) => void;
setScore: (score: TrashInfo['score']) => void;
setTotalScore: (totalScore: TrashInfo['totalScore']) => void;
setClasses: (classes: TrashInfo['classes']) => void;

update: (field: string, value: string) => void;
}

const createTrashInfoStore = (set) => ({
plastic: 0,
styrofoam: 0,
fiber: 0,
vinyl: 0,
generalWaste: 0,
score: 0,
totalScore: 0,
classes: '',

setPlastic: (plastic: TrashInfo['plastic']) => set({ plastic }),
setStyrofoam: (styrofoam: TrashInfo['styrofoam']) => set({ styrofoam }),
setFiber: (fiber: TrashInfo['fiber']) => set({ fiber }),
setVinyl: (vinyl: TrashInfo['vinyl']) => set({ vinyl }),
setGeneralWaste: (generalWaste: TrashInfo['generalWaste']) => set({ generalWaste }),
setScore: (score: TrashInfo['score']) => set({ score }),
setTotalScore: (totalScore: TrashInfo['totalScore']) => set({ totalScore }),
setClasses: (classes: string) => set({ classes }),

update: (field, value) => set({ [field]: value }),
});

let TrashInfoStoreTemp;

// devtools
if (import.meta.env.DEV) {
TrashInfoStoreTemp = create<TrashInfo>()(devtools(createTrashInfoStore, { name: 'TrashInfo' }));
} else {
TrashInfoStoreTemp = create<TrashInfo>()(createTrashInfoStore);
}

export const TrashInfoStore = TrashInfoStoreTemp;

0 comments on commit ff96355

Please sign in to comment.