1
1
import React from 'react' ;
2
2
import styled from 'styled-components' ;
3
3
import { Field , Form , Formik } from 'formik' ;
4
+ import { Link } from 'react-router-dom' ;
4
5
import Button from '../shared/button' ;
5
6
6
7
import useUser from '../../hooks/use-user' ;
@@ -18,7 +19,11 @@ const Container = styled.div`
18
19
19
20
h2 {
20
21
padding-left: 10%;
21
- margin-bottom: 50px;
22
+ /* margin-bottom: 50px; */
23
+ }
24
+
25
+ .loginNotice {
26
+ padding-left: 10%;
22
27
}
23
28
24
29
section {
@@ -62,7 +67,12 @@ const FieldContainer = styled.div`
62
67
const ValueField = ( { title, name, component, placeholder } ) => (
63
68
< FieldContainer >
64
69
< span > { title } </ span >
65
- < Field name = { name } className = "input" placeholder = { placeholder } component = { component } />
70
+ < Field
71
+ name = { name }
72
+ className = "input"
73
+ placeholder = { placeholder }
74
+ component = { component }
75
+ />
66
76
</ FieldContainer >
67
77
) ;
68
78
@@ -78,84 +88,97 @@ const SubmitProject = ({ history }) => {
78
88
admin : [ user . id ] ,
79
89
} ) ;
80
90
if ( payload ) {
81
- history . replace ( `/projects/${ payload . value . result } ` , { id : payload . value . result } ) ;
91
+ history . replace ( `/projects/${ payload . value . result } ` , {
92
+ id : payload . value . result ,
93
+ } ) ;
82
94
}
83
95
}
84
96
} ;
85
97
86
98
return (
87
99
< Container >
88
100
< h2 > Submit a Project</ h2 >
89
- < Formik
90
- initialValues = { { name : '' , description : '' , tags : [ ] } }
91
- onSubmit = { handleSubmit }
92
- render = { ( ) => (
93
- < Form >
94
- < section >
95
- < div className = "details" >
96
- < h5 > Step 1: Basic Info</ h5 >
97
- </ div >
98
- < ValueField
99
- title = "Project Name"
100
- name = "name"
101
- component = "input"
102
- placeholder = "e.g Thinkspaces"
103
- />
104
- < ValueField
105
- title = "Description"
106
- name = "description"
107
- component = "input"
108
- placeholder = "e.g. A community of creators!"
109
- />
110
- < ValueField
111
- title = "About"
112
- name = "about"
113
- component = "textarea"
114
- placeholder = "e.g. Welcome to our platform, we connect teams..."
115
- />
116
- </ section >
117
- < section >
118
- < div className = "details" >
119
- < h5 > Step 2: Project Tags</ h5 >
120
- < span > These tags will help users find your project</ span >
121
- </ div >
122
- < Field
123
- name = "tags"
124
- render = { ( { field, form } ) => (
125
- < >
126
- < FieldContainer >
127
- < span > Discipline</ span >
128
- < DisciplineSelect field = { field } form = { form } />
129
- </ FieldContainer >
130
- < FieldContainer >
131
- < span > Organization</ span >
132
- < OrganizationSelect field = { field } form = { form } />
133
- </ FieldContainer >
134
- < FieldContainer >
135
- < span > Status</ span >
136
- < StatusSelect field = { field } form = { form } />
137
- </ FieldContainer >
138
- </ >
139
- ) }
140
- />
141
- </ section >
142
- { /* <section>
143
- <div className="details">
144
- <h5>Step 3: Who you need</h5>
145
- <span>These tags will help users find your project</span>
146
- </div>
147
- <ValueField title="Role" name="role" component="input" />
148
- <ValueField
149
- title="Description of Responsibilities"
150
- name="responsibilities"
151
- component="textarea"
152
- />
153
- </section> */ }
154
- < Button type = "submit" > Submit Project</ Button >
155
- { /* <pre>{JSON.stringify(values, null, 2)}</pre> */ }
156
- </ Form >
157
- ) }
158
- />
101
+ { ! user ? (
102
+ < p className = "loginNotice" >
103
+ You need to be < Link to = "/signupin" > logged in</ Link > , in order to
104
+ submit a new project.
105
+ </ p >
106
+ ) : (
107
+ < >
108
+ < br />
109
+ < br />
110
+ < Formik
111
+ initialValues = { { name : '' , description : '' , tags : [ ] } }
112
+ onSubmit = { handleSubmit }
113
+ render = { ( ) => (
114
+ < Form >
115
+ < section >
116
+ < div className = "details" >
117
+ < h5 > Step 1: Basic Info</ h5 >
118
+ </ div >
119
+ < ValueField
120
+ title = "Project Name"
121
+ name = "name"
122
+ component = "input"
123
+ placeholder = "e.g Thinkspaces"
124
+ />
125
+ < ValueField
126
+ title = "Description"
127
+ name = "description"
128
+ component = "input"
129
+ placeholder = "e.g. A community of creators!"
130
+ />
131
+ < ValueField
132
+ title = "About"
133
+ name = "about"
134
+ component = "textarea"
135
+ placeholder = "e.g. Welcome to our platform, we connect teams..."
136
+ />
137
+ </ section >
138
+ < section >
139
+ < div className = "details" >
140
+ < h5 > Step 2: Project Tags</ h5 >
141
+ < span > These tags will help users find your project</ span >
142
+ </ div >
143
+ < Field
144
+ name = "tags"
145
+ render = { ( { field, form } ) => (
146
+ < >
147
+ < FieldContainer >
148
+ < span > Discipline</ span >
149
+ < DisciplineSelect field = { field } form = { form } />
150
+ </ FieldContainer >
151
+ < FieldContainer >
152
+ < span > Organization</ span >
153
+ < OrganizationSelect field = { field } form = { form } />
154
+ </ FieldContainer >
155
+ < FieldContainer >
156
+ < span > Status</ span >
157
+ < StatusSelect field = { field } form = { form } />
158
+ </ FieldContainer >
159
+ </ >
160
+ ) }
161
+ />
162
+ </ section >
163
+ { /* <section>
164
+ <div className="details">
165
+ <h5>Step 3: Who you need</h5>
166
+ <span>These tags will help users find your project</span>
167
+ </div>
168
+ <ValueField title="Role" name="role" component="input" />
169
+ <ValueField
170
+ title="Description of Responsibilities"
171
+ name="responsibilities"
172
+ component="textarea"
173
+ />
174
+ </section> */ }
175
+ < Button type = "submit" > Submit Project</ Button >
176
+ { /* <pre>{JSON.stringify(values, null, 2)}</pre> */ }
177
+ </ Form >
178
+ ) }
179
+ />
180
+ </ >
181
+ ) }
159
182
</ Container >
160
183
) ;
161
184
} ;
0 commit comments