Dwayne Harris
5 years ago
24 changed files with 248 additions and 71 deletions
-
0config/config.json
-
11package-lock.json
-
3package.json
-
6src/actions/directory.ts
-
6src/components/app/app.tsx
-
4src/components/app/index.ts
-
6src/components/notification-container/index.ts
-
2src/components/notification-container/notification-container.tsx
-
21src/components/notification/index.tsx
-
3src/components/pages/directory/directory.tsx
-
6src/components/pages/directory/index.ts
-
29src/components/pages/register-group/index.ts
-
36src/components/pages/register-group/register-group.tsx
-
9src/components/pages/register/index.ts
-
26src/components/pages/register/register.tsx
-
24src/components/register-form/index.ts
-
21src/components/register-form/register-form.tsx
-
15src/components/text-field/index.ts
-
49src/components/text-field/text-field.tsx
-
4src/components/user-info/index.ts
-
4src/components/user-info/user-info.tsx
-
19src/selectors/index.ts
-
9src/utils/index.ts
-
6webpack.config.ts
@ -0,0 +1,29 @@ |
|||||
|
import { AnyAction } from 'redux' |
||||
|
import { ThunkDispatch } from 'redux-thunk' |
||||
|
import { connect } from 'react-redux' |
||||
|
|
||||
|
import { fetchGroup } from 'src/actions/directory' |
||||
|
import { getEntity } from 'src/selectors' |
||||
|
import { AppState } from 'src/types' |
||||
|
|
||||
|
import RegisterGroup, { Props } from './register-group' |
||||
|
|
||||
|
const mapStateToProps = (state: AppState, ownProps: Props) => ({ |
||||
|
group: getEntity(state, 'group', ownProps.match.params.id), |
||||
|
}) |
||||
|
|
||||
|
const mapDispatchToProps = (dispatch: ThunkDispatch<AppState, void, AnyAction>, ownProps: Props) => ({ |
||||
|
fetchGroup: async () => { |
||||
|
try { |
||||
|
await dispatch(fetchGroup(ownProps.match.params.id)) |
||||
|
} catch (err) { |
||||
|
console.error('Expected error') |
||||
|
console.error(err) |
||||
|
} |
||||
|
}, |
||||
|
}) |
||||
|
|
||||
|
export default connect( |
||||
|
mapStateToProps, |
||||
|
mapDispatchToProps |
||||
|
)(RegisterGroup) |
@ -0,0 +1,36 @@ |
|||||
|
import React, { FC, useEffect } from 'react' |
||||
|
import { RouteComponentProps } from 'react-router' |
||||
|
|
||||
|
import { Entity } from 'src/types' |
||||
|
|
||||
|
interface Params { |
||||
|
id: string |
||||
|
} |
||||
|
|
||||
|
export interface Props extends RouteComponentProps<Params> { |
||||
|
group?: Entity |
||||
|
fetchGroup: () => void |
||||
|
} |
||||
|
|
||||
|
const RegisterGroup: FC<Props> = ({ group, fetchGroup }) => { |
||||
|
useEffect(() => { |
||||
|
fetchGroup() |
||||
|
}, []) |
||||
|
|
||||
|
if (!group) { |
||||
|
return ( |
||||
|
<div> |
||||
|
<h1 className="title">Community Not Found</h1> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<div> |
||||
|
<h1 className="title">{group.name}</h1> |
||||
|
<h2 className="subtitle">Create a new Account.</h2> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export default RegisterGroup |
@ -1,9 +0,0 @@ |
|||||
import { connect } from 'react-redux' |
|
||||
import Register from './register' |
|
||||
|
|
||||
const mapStateToProps = () => { |
|
||||
} |
|
||||
|
|
||||
export default connect( |
|
||||
mapStateToProps |
|
||||
)(Register) |
|
@ -1,26 +0,0 @@ |
|||||
import React, { FC, useEffect } from 'react' |
|
||||
import { RouteComponentProps } from 'react-router' |
|
||||
|
|
||||
import { Entity } from '../../../types' |
|
||||
|
|
||||
interface Params { |
|
||||
group: string |
|
||||
} |
|
||||
|
|
||||
type Props = RouteComponentProps<Params> & { |
|
||||
group?: Entity |
|
||||
} |
|
||||
|
|
||||
const Register: FC<Props> = ({ group, match }) => { |
|
||||
useEffect(() => { |
|
||||
|
|
||||
}) |
|
||||
|
|
||||
return ( |
|
||||
<div> |
|
||||
<h1 className="title">Create a new Account</h1> |
|
||||
</div> |
|
||||
) |
|
||||
} |
|
||||
|
|
||||
export default Register |
|
@ -0,0 +1,24 @@ |
|||||
|
import { Dispatch } from 'redux' |
||||
|
import { connect } from 'react-redux' |
||||
|
|
||||
|
import { initForm, initField } from 'src/actions/forms' |
||||
|
import { AppState } from 'src/types' |
||||
|
|
||||
|
import RegisterForm from './register-form' |
||||
|
|
||||
|
const mapStateToProps = (state: AppState) => ({ |
||||
|
}) |
||||
|
|
||||
|
const mapDispatchToProps = (dispatch: Dispatch) => ({ |
||||
|
initForm: () => { |
||||
|
dispatch(initForm()) |
||||
|
dispatch(initField('username')) |
||||
|
dispatch(initField('name')) |
||||
|
dispatch(initField('email')) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
export default connect( |
||||
|
mapStateToProps, |
||||
|
mapDispatchToProps |
||||
|
)(RegisterForm) |
@ -0,0 +1,21 @@ |
|||||
|
import React, { FC, useEffect } from 'react' |
||||
|
import TextField from '../text-field' |
||||
|
import './register-form.scss' |
||||
|
|
||||
|
interface Props { |
||||
|
initForm: () => void |
||||
|
} |
||||
|
|
||||
|
const RegisterForm: FC<Props> = ({ initForm }) => { |
||||
|
useEffect(() => { |
||||
|
initForm() |
||||
|
}, []) |
||||
|
|
||||
|
return ( |
||||
|
<div className="container"> |
||||
|
<TextField name="username" label="Username" /> |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export default RegisterForm |
@ -0,0 +1,15 @@ |
|||||
|
import { connect } from 'react-redux' |
||||
|
|
||||
|
import { getFieldValue, getFieldNotification } from 'src/selectors' |
||||
|
import { AppState } from 'src/types' |
||||
|
|
||||
|
import TextField, { Props } from './text-field' |
||||
|
|
||||
|
const mapStateToProps = (state: AppState, ownProps: Props) => ({ |
||||
|
value: getFieldValue(state, ownProps.name), |
||||
|
notification: getFieldNotification(state, ownProps.name), |
||||
|
}) |
||||
|
|
||||
|
export default connect( |
||||
|
mapStateToProps |
||||
|
)(TextField) |
@ -0,0 +1,49 @@ |
|||||
|
import React, { FC } from 'react' |
||||
|
import classNames from 'classnames' |
||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' |
||||
|
import { IconDefinition } from '@fortawesome/fontawesome-common-types' |
||||
|
|
||||
|
import { notificationTypeToClassName } from 'src/utils' |
||||
|
import { FormNotification } from 'src/types' |
||||
|
|
||||
|
import './register-form.scss' |
||||
|
|
||||
|
export interface Props { |
||||
|
name: string |
||||
|
label: string |
||||
|
placeholder?: string |
||||
|
icon?: IconDefinition |
||||
|
value?: string |
||||
|
notification?: FormNotification |
||||
|
} |
||||
|
|
||||
|
const RegisterForm: FC<Props> = ({ label, placeholder, icon, value, notification }) => { |
||||
|
const controlClassNames = classNames({ control: true, 'has-icons-left': !!icon }) |
||||
|
let helpClassNames: string | undefined |
||||
|
|
||||
|
if (notification) { |
||||
|
helpClassNames = classNames({ |
||||
|
help: true, |
||||
|
[notificationTypeToClassName(notification.type)]: true, |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<div className="field"> |
||||
|
<label className="label">{label}</label> |
||||
|
<div className={controlClassNames}> |
||||
|
<input className="input" type="text" placeholder={placeholder} value={value} /> |
||||
|
{icon && |
||||
|
<span className="icon is-small is-left"> |
||||
|
<FontAwesomeIcon icon={icon} /> |
||||
|
</span> |
||||
|
} |
||||
|
</div> |
||||
|
{notification && |
||||
|
<p className={helpClassNames}>{notification.message}</p> |
||||
|
} |
||||
|
</div> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export default RegisterForm |
@ -0,0 +1,9 @@ |
|||||
|
import { NotificationType } from '../types' |
||||
|
|
||||
|
export function notificationTypeToClassName(type: NotificationType): string { |
||||
|
switch (type) { |
||||
|
case 'info': return 'is-info' |
||||
|
case 'success': return 'is-success' |
||||
|
case 'error': return 'is-danger' |
||||
|
} |
||||
|
} |
Write
Preview
Loading…
Cancel
Save
Reference in new issue