1
- import { postDetailModel , getLoggedInUserInfo , removepost } from "./postDetailModel.js"
2
- import { buildpostDetailView , buildRemovepostButton } from "./postDetailView.js"
1
+ import { postDetailModel , getLoggedInUserInfo , removePost , updatePost } from "./postDetailModel.js" ;
2
+ import { buildPostDetailEditableView , buildPostDetailReadOnlyView } from "./postDetailView.js" ;
3
+
3
4
4
- //===================================================================================================================
5
5
export const postDetailController = async ( postContainer , postId ) => {
6
+ let postDetail = null ;
7
+ let user = null ;
8
+ let isEditing = false ;
9
+
10
+ try {
11
+ const event = new CustomEvent ( "load-posts-started" ) ;
12
+ postContainer . dispatchEvent ( event ) ;
13
+
14
+ try {
15
+ //===================================
16
+ postDetail = await postDetailModel ( postId ) ;
17
+ //===================================
18
+ } catch ( error ) {
19
+ dispatchNotification ( 'post-error' , error . message ) ;
20
+ }
21
+
22
+ try {
23
+ //===================================
24
+ user = await getLoggedInUserInfo ( ) ;
25
+ //===================================
26
+ } catch ( error ) {
27
+ dispatchNotification ( 'post-error' , error . message ) ;
28
+ }
6
29
7
- //-------------------------------------------------------------------------------------------------------------------
8
- const showRemovepostButton = ( postId ) => {
9
- const removeButton = buildRemovepostButton ( )
10
- postContainer . appendChild ( removeButton )
30
+ const isOwner = user . id === postDetail . userId ;
11
31
12
- removeButton . addEventListener ( "click" , async ( ) => {
13
- if ( confirm ( "Are you sure about deleting the post?" ) ) {
14
- try {
32
+ renderReadOnlyView ( postDetail , isOwner ) ;
15
33
16
- //====================================================
17
- await removepost ( postId )
18
- //====================================================
34
+ } catch ( error ) {
35
+ dispatchNotification ( 'post-error' , error . message ) ;
36
+ } finally {
37
+ const event = new CustomEvent ( "load-posts-finished" ) ;
38
+ postContainer . dispatchEvent ( event ) ;
39
+ }
19
40
20
- dispatchNotification ( 'post-success' , {
21
- message : "Post successfully deleted." ,
22
- type : 'success'
23
- } )
41
+ //===================================================================================================================
24
42
25
- setTimeout ( ( ) => window . location = '/' , 7000 )
43
+ function renderReadOnlyView ( post , isOwner ) {
44
+ isEditing = false ;
45
+ postContainer . innerHTML = buildPostDetailReadOnlyView ( post , isOwner ) ;
26
46
27
- } catch ( error ) {
28
- dispatchNotification ( 'post-error' , error . message )
29
- }
30
- }
31
- } )
47
+ if ( isOwner ) {
48
+ const editPost = postContainer . querySelector ( "#edit-post" )
49
+ editPost . addEventListener ( "click" , ( ) => renderEditableView ( post ) ) ;
50
+
51
+ const deletePost = postContainer . querySelector ( "#delete-post" )
52
+ deletePost . addEventListener ( "click" , ( ) => handleDelete ( post . id ) ) ;
53
+ }
32
54
}
33
55
34
- //-------------------------------------------------------------------------------------------------------------------
35
- try {
56
+ //------------------------------------------------------------------------
57
+ function renderEditableView ( post ) {
58
+ isEditing = true ;
59
+ postContainer . innerHTML = buildPostDetailEditableView ( post ) ;
36
60
37
- //----------------------------------------------------
38
- const event = new CustomEvent ( "load-posts-started" ) ;
39
- postContainer . dispatchEvent ( event ) ;
40
- //----------------------------------------------------
61
+ const saveEdit = postContainer . querySelector ( "#save-changes" )
62
+ saveEdit . addEventListener ( "click" , ( event ) => {
63
+ event . preventDefault ( ) ;
41
64
42
- //====================================================
43
- const postDetail = await postDetailModel ( postId )
44
- //====================================================
65
+ handleSave ( post ) ;
66
+ } ) ;
45
67
46
- postContainer . innerHTML = buildpostDetailView ( postDetail )
68
+ const cancelEdit = postContainer . querySelector ( "#cancel-edit" )
69
+ cancelEdit . addEventListener ( "click" , ( event ) => {
70
+ event . preventDefault ( ) ;
47
71
48
- try {
49
- //====================================================
50
- const user = await getLoggedInUserInfo ( )
51
- //====================================================
52
- if ( user ?. id === postDetail ?. userId ) {
53
- showRemovepostButton ( postId )
72
+ renderReadOnlyView ( postDetail , true ) ;
73
+ } ) ;
74
+ }
75
+
76
+ //------------------------------------------------------------------------
77
+ async function handleDelete ( postId ) {
78
+ if ( confirm ( "Are you sure about deleting the post?" ) ) {
79
+ try {
80
+ //===================================
81
+ await removePost ( postId ) ;
82
+ //===================================
83
+
84
+ dispatchNotification ( 'post-success' , {
85
+ message : "Post successfully deleted." ,
86
+ type : 'success'
87
+ } ) ;
88
+ } catch ( error ) {
89
+ dispatchNotification ( 'post-error' , error . message ) ;
54
90
}
55
- } catch ( error ) {
56
- dispatchNotification ( 'post-error' , error . message )
57
91
}
92
+ }
58
93
59
- } catch ( error ) {
94
+ //------------------------------------------------------------------------
95
+ async function handleSave ( post ) {
96
+ const editPostForm = postContainer . querySelector ( '#editPostForm' ) ;
60
97
61
- dispatchNotification ( 'post-error' , error . message )
98
+ const name = editPostForm . querySelector ( '#post-name' ) . value ;
99
+ const description = editPostForm . querySelector ( '#post-description' ) . value ;
100
+ const price = editPostForm . querySelector ( '#post-price' ) . value ;
101
+ const tag = editPostForm . querySelector ( '#edit-tag' ) . value ;
102
+ const isPurchase = editPostForm . querySelector ( 'input[name="transactionType"]:checked' ) . value === 'purchase' ;
62
103
63
- } finally {
104
+ const fileInput = editPostForm . querySelector ( '#post-image' ) ;
105
+ const newImage = fileInput . files [ 0 ] ;
106
+
107
+ post . name = name ;
108
+ post . description = description ;
109
+ post . price = price ;
110
+ post . tag = tag ;
111
+ post . isPurchase = isPurchase ;
112
+
113
+ if ( newImage ) {
114
+ post . photo = newImage ;
115
+ }
64
116
65
- //----------------------------------------------------
66
- const event = new CustomEvent ( "load-posts-finished" )
67
- postContainer . dispatchEvent ( event )
68
- //----------------------------------------------------
117
+ try {
118
+ //===================================
119
+ const updatedPost = await updatePost ( post . id , post ) ;
120
+ //===================================
121
+
122
+ postDetail = updatedPost ; // actualizar info local
123
+ dispatchNotification ( 'post-success' , {
124
+ message : "Post successfully updated." ,
125
+ type : 'success'
126
+ } ) ;
127
+
128
+ renderReadOnlyView ( updatedPost , true ) ;
129
+
130
+ } catch ( error ) {
131
+ dispatchNotification ( 'post-error' , error . message ) ;
132
+ }
69
133
}
70
134
71
- //-------------------------------------------------------------------------------------------------------------------
135
+ //------------------------------------------------------------------------
72
136
function dispatchNotification ( eventType , message ) {
73
- const event = new CustomEvent ( eventType , {
74
- detail : message
75
- } )
137
+ const event = new CustomEvent ( eventType , { detail : message } ) ;
76
138
77
139
if ( message . type === 'success' ) {
78
- setTimeout ( ( ) => window . location = '/' , 7000 )
140
+ setTimeout ( ( ) => window . location = '/index.html ' , 7000 ) ;
79
141
}
80
142
81
- postContainer . dispatchEvent ( event )
143
+ postContainer . dispatchEvent ( event ) ;
82
144
}
83
- }
145
+ } ;
0 commit comments