Merge pull request #39 from TeamGrabit/setting_page_api

챌린지 설정 페이지 API 연결
TeamGrabit · Jul 3, 2022 · e4d264b · e4d264b
2 parents 001b15d + fb353ef
commit e4d264b
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 73 deletions.
diff --git a/src/components/SettingChallenge.svelte b/src/components/SettingChallenge.svelte
@@ -1,91 +1,103 @@
 <script>
+	import { onMount } from 'svelte';
 	import { push, pop } from 'svelte-spa-router';
-	import { Button, Input } from '../storybook'; 
+	import { Button, Input, Loader } from '../storybook';
+
+	import { notifications } from '../store/notifications.js';
+	import Toast from '../components/Toast.svelte';
+
+	import { getChallenge, editChallenge, deleteChallenge } from '../store/challenge.js'
 
 
 	export let isActive;
+	export let params;
+
+	let challengeData = null;
+	let name = '';
+	let description = '';
+	let secure = "public";
 
-	let challengename="";
-	let description="";	//임시 데이터.
+	onMount(async() => {
+		challengeData = await getChallenge(params.id);
+		name = challengeData.name;
+		description = challengeData.description;
+		secure = challengeData.isPrivate ? 'private' : 'public';
+	})
 
-	function save(){
-		if(challengename=='')
-			alert("이름을 입력해주세요.");
-		else {												//store에 생성된 데이터 넘겨주기
-			alert(challengename + "이 생성되었습니다."); 
-			push('/');
-		}
+	const onClickSave = () => {
+		const isPrivate = secure === 'private';
+		editChallenge(params.id, { name, description, isPrivate }).then(() => {
+			notifications.send('저장되었습니다.');
+		})
 	}
-	function cancel(){
-		alert("취소되었습니다.")
-		pop();
+	const onClickDelete = () => {
+		deleteChallenge(params.id).then(() => {
+			notifications.send('삭제되었습니다.');
+		})
 	}
 </script>
 
 {#if isActive}
-<div class="page">
-	<div class="content">
-		<div class=title>Settings</div>
-		<div class=sub_content>
-			<div class=text>Challenge name</div>
-			<span>
-				<Input bind:bindvalue={challengename} maxlength=20 size=20/>
-				<Button 
-					width='8rem'
-					height='2.1rem'
-					backgroundColor='var(--main-green-color)'
-					onClick={save}
-				>	
-					<div class=button_text>Rename</div>
-				</Button>
-			</span>
-
-			<div class=text>Description</div>
+	{#if !challengeData}
+		<Loader />
+	{:else}
+		<Toast/>
+		<div class="page">
+			<div class="content">
+				<div class=title>Settings</div>
+				<div class=sub_content>
+					<div class=text>Challenge name</div>
+					<span>
+						<Input bind:bindvalue={name} maxlength=20 size=20/>
+					</span>
+
+					<div class=text>Description</div>
 
-			<Input bind:bindvalue={description} size=70/>
-		</div>
-		<hr align=left class=hr />
-		<div class=sub_content>
-			<div class=contain>
-				<input type="radio" name="secure"checked="check">
-				<img class="image" src="images/public.png" alt="public_img" />
-				<div>
-					<div class=small_text>Public</div>
-					<div class=explain_text>Anyone on the internet can see this Challenge!</div>
+					<Input bind:bindvalue={description} size=70/>
 				</div>
-			</div>
+				<hr align=left class=hr />
+				<div class=sub_content>
+					<div class=contain>
+						<input type="radio" bind:group={secure} name="secure" value="public">
+						<img class="image" src="images/public.png" alt="public_img" />
+						<div>
+							<div class=small_text>Public</div>
+							<div class=explain_text>Anyone on the internet can see this Challenge!</div>
+						</div>
+					</div>
 
-			<div class=contain>
-				<input type="radio" name="secure" align="middle">
-				<img class="image" src="images/private.png" alt="private_img" />
-				<div>
-					<div class=small_text>Private</div>
-					<div class=explain_text>You choose who can see and join to this Challenge!</div>
+					<div class=contain>
+						<input type="radio" bind:group={secure} name="secure" align="middle" value="private">
+						<img class="image" src="images/private.png" alt="private_img" />
+						<div>
+							<div class=small_text>Private</div>
+							<div class=explain_text>You choose who can see and join to this Challenge!</div>
+						</div>
+					</div>
 				</div>
-			</div>
-		</div>
-		<hr align=left class=hr />
-		<div class="sub_content button_group">
-			<Button 
-				width='8rem'
-				height='2.5rem'
-				backgroundColor='var(--main-green-color)'
-				onClick={save}
-			>	
-				<div class=button_text>Change</div>
-			</Button>
+				<hr align=left class=hr />
+				<div class="sub_content button_group">
+					<Button 
+						width='8rem'
+						height='2.5rem'
+						backgroundColor='var(--main-green-color)'
+						onClick={onClickSave}
+					>	
+						<div class=button_text>Save</div>
+					</Button>
 
-			<Button 
-				width='8rem'
-				height='2.5rem'
-				backgroundColor='#FAE5E5'
-				onClick={cancel}
-			>	
-				<div class=button_text>Delete</div>
-			</Button>
+					<Button 
+						width='8rem'
+						height='2.5rem'
+						backgroundColor='#FAE5E5'
+						onClick={onClickDelete}
+					>	
+						<div class=button_text>Delete</div>
+					</Button>
+				</div>
+			</div>
 		</div>
-	</div>
-</div>
+	{/if}
 {/if}
 
 <style lang="scss">

diff --git a/src/pages/MyChallengeList.svelte b/src/pages/MyChallengeList.svelte
@@ -10,13 +10,19 @@
 	import Profile from '../components/Profile.svelte';
 	import ChallengeBox from '../components/ChallengeBox.svelte';
 	import { Button, SearchInput } from '../storybook';
+
+	import { getUserChallenge } from '../store/challenge.js'
 	
 	function onClick() {
 		push('/createchallenge');
 	}
 	
-	onMount(() => {
+	onMount(async () => {
 		changeTab(index.MYCHALLENGE);
+		if(!challengeList) {
+			const myChallengeData = await getUserChallenge();
+			challengeList.set(myChallengeData);
+		}
 	})
 	onDestroy(() => {
 		changeTab(index.HOME);

diff --git a/src/store/challenge.js b/src/store/challenge.js
@@ -1,5 +1,5 @@
 import { writable, get } from 'svelte/store';
-import { fetchGet, fetchPatch } from '../common/fetch';
+import { fetchDelete, fetchGet, fetchPatch } from '../common/fetch';
 
 const initialState = [
     {
@@ -73,7 +73,11 @@ const initialState = [
 export const challengeList = writable(initialState);
 
 export async function getChallenge( id ) {
-	const res = await fetchGet(`challenges/${id}`)
+	let res = await fetchGet(`challenges/${id}`)
+	if(res.error) {
+		// TODO: api 연결된 후에는 에러처리 하기
+		res = {name: 'API 연결해죠', description: 'API 연결행', isPrivate: true };
+	}
 	return res;
 }
 
@@ -82,6 +86,11 @@ export async function getAllChallenge() {
 	return res;
 }
 
+export async function getUserChallenge() {
+	const res = await fetchGet(`users/challenge`);
+	return res;
+}
+
 export async function joinChallenge( challenge_id ) {
 	const res = await fetchPatch(`challenges/${challenge_id}/join`);
 	return res;
@@ -107,3 +116,13 @@ export function getApproveList(groupId) {
 		}
 	]
 }
+
+export const editChallenge = async(id, body) => {
+	const res = await fetchPatch(`challenges/${id}`, body);
+	return res;
+}
+
+export const deleteChallenge = async(id) => {
+	const res = await fetchDelete(`challenges/${id}`);
+	return res;
+}