;
23 | }
24 | });
25 | return(
26 |
34 | );
35 | }
36 | }
37 |
38 | export default FeedComponent;
39 |
--------------------------------------------------------------------------------
/frontend/components/feed/feed_container.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import { logout } from '../../actions/session_actions';
3 | import Feed from './feed';
4 | import {getUserPictures, homeFeed} from '../../actions/picture_actions';
5 | import {fetchUsers} from '../../actions/session_actions';
6 | import {fetchFollows} from '../../actions/follow_actions';
7 | import {pictureList, parseUrlBig} from '../../util/selectors';
8 | import {clearPictures} from '../../actions/picture_actions';
9 | import { openModal} from '../../actions/modal_actions';
10 |
11 |
12 | const mapStateToProps = ({follows, entities, session}) => ({
13 | currentUser: entities.users[session.id],
14 | pictures: pictureList(entities.pictures),
15 | users: entities.users,
16 | follows: follows,
17 | parseUrlBig: parseUrlBig
18 | });
19 |
20 | const mapDispatchToProps = () => dispatch => ({
21 | getUserPictures: (userId) => dispatch(getUserPictures(userId)),
22 | fetchFollows: (follows) => dispatch(fetchFollows(follows)),
23 | homeFeed: () => dispatch(homeFeed()),
24 | fetchUsers: () => dispatch(fetchUsers()),
25 | clearPictures: () => dispatch(clearPictures()),
26 | openModal: (modal) => dispatch(openModal(modal))
27 | });
28 |
29 | export default connect(mapStateToProps, mapDispatchToProps)(Feed);
30 |
--------------------------------------------------------------------------------
/frontend/components/feed/feed_list_item.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Link} from 'react-router-dom';
3 | import {findFollow} from '../../util/selectors';
4 |
5 | class FeedListItem extends React.Component {
6 | constructor(props) {
7 | super(props);
8 | }
9 |
10 | suggested() {
11 | const {follows, currentUser, user} = this.props;
12 | if (user){
13 | if (findFollow(follows, currentUser.id, user.id)){
14 | return;
15 | } else {
16 | return ( " (suggested)" );
17 | }
18 | }
19 | }
20 | feedTitle() {
21 | const {picture} = this.props;
22 | if (picture.title === "") {
23 | return(title
);
24 | }else {
25 | return ({picture.title}
);
26 | }
27 | }
28 |
29 | render() {
30 | const {picture, user, clearPictures, openModal, currentUser, follows, parseUrlBig} = this.props;
31 | const defaultUser = user || {id:"", username: "", profile_url:"https://res.cloudinary.com/dbm56y2y/image/upload/v1529040240/default_profile.jpg"};
32 | const profile = defaultUser.profile_url || "https://res.cloudinary.com/dbm56y2y/image/upload/v1529040240/default_profile.jpg";
33 | return (
34 |
35 |
clearPictures()} to={`/profile/${picture.uploader_id}`}>
36 |
{defaultUser.username}{this.suggested()}
37 |
openModal({string:'show',picture: picture, user: user})}>
38 |
40 | {this.feedTitle()}
41 |
42 |
8 |
Welcome {props.currentUser.username}!!!
9 | props.logout()}>Logout
10 |
11 | );
12 | } else {
13 | return (
14 |
15 |
Welcome!! Your can log in or sign up here :
16 |
11 |
12 |
13 |
14 |
Find inspiration and discover the world through gorgeous photos
15 |
Share your vision with the world
16 |
17 | Join 360px
18 |
19 |
20 |
46 |
e.stopPropagation()}>
47 | { component }
48 |
49 |
54 |
e.stopPropagation()}>
55 | { component }
56 |
57 |
62 |
e.stopPropagation()}>
63 | { component }
64 |
65 |
70 |
e.stopPropagation()}>
71 | { component }
72 |
73 |
78 |
e.stopPropagation()}>
79 | { component }
80 |
81 | //
360px
37 | );
38 | }
39 | else if (path.includes("profile") || path === "/discover" || path === "/notifications") {
40 | return (
41 |
70 |
clearPictures()} to={`/profile/${this.props.currentUser.id}`} className = "profile-link">
71 |
72 | this.handleLogout()}>Logout
74 |
75 |
Sign up
91 | );
92 | }else if (path === "/login") {
93 | return (
94 | Sign up
95 | );
96 | } else if (path === "/signup") {
97 | return (
98 | Login
99 | );
100 | }else if (path === "/feed" || path.includes("profile") || path === "/discover" || path === "/notifications") {
101 | return (
102 | this.uploadPicture(e)} className="upload">Upload
103 | );
104 | }
105 | }
106 |
107 | leftNav(){
108 | const path = this.props.match.path;
109 | if (path === "/"){
110 | return "left_nav";
111 | }else {
112 | return "login_left";
113 | }
114 | }
115 |
116 | uploadPicture(e) {
117 | e.preventDefault();
118 | const currentUserId = this.props.currentUser.id;
119 | cloudinary.openUploadWidget(window.cloudinary_options, (error, picture) => {
120 | if (error === null){
121 | this.props.openModal({string:'upload', picture: picture[0]});
122 | }
123 | });
124 | }
125 | discover() {
126 | const path = this.props.match.path;
127 | if (path === "/" || path === "/login" || path === "/signup") {
128 | return (Discover );
129 | } else if (path === "/feed" || path.includes("profile") || path === "/notifications"){
130 | return (Discover );
133 | }
134 | }
135 |
136 | bell() {
137 | const {openModal, newNotifications} = this.props;
138 | const path = this.props.match.path;
139 | const length = this.props.newNotifications.length;
140 | if (length === 0 && (path === "/feed" || path.includes("profile") || path === "/discover" || path === "/notifications") ) {
141 | return ( openModal({string: 'notify', newNotifications: newNotifications})} className="bell"> );
142 | } else if (length > 0 && (path === "/feed" || path.includes("profile") || path === "/discover" || path === "/notifications") ) {
143 | return ( this.notifyClick()} className="notify">{length}
);
144 |
145 | }
146 | }
147 |
148 | notifyClick() {
149 | const {newNotifications,updateNotification, openModal, notifications} = this.props;
150 | newNotifications.forEach((n) => {
151 | notifications.forEach((n2) => {
152 | if (n.user_id === n2.user_id && n2.initiator_id === n.initiator_id && n.id !== n2.id){
153 | updateNotification({id:n2.id, viewed: true});
154 | }
155 | });
156 | updateNotification({id:n.id, viewed: true});
157 | });
158 | openModal({string: 'notify', newNotifications: newNotifications});
159 | }
160 |
161 | rightNav() {
162 | const path = this.props.match.path;
163 | if (path === "/" || path === "/login" || path === "/signup"){
164 | return "right_nav";
165 | } else {
166 | return "login-right-nav";
167 | }
168 | }
169 |
170 |
171 | render() {
172 | return (
173 |
174 |
175 | {this.logo()}
176 | {this.discover()}
177 |
178 |
179 | {this.sideLink()}
180 | {this.bell()}
181 | {this.sideButton()}
182 |
183 |
184 | );
185 | }
186 | }
187 |
188 | export default withRouter(NavBar);
189 |
--------------------------------------------------------------------------------
/frontend/components/nav/nav_container.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import { signup, login, logout } from '../../actions/session_actions';
3 | import { Link } from 'react-router-dom';
4 | import React from 'react';
5 | import NavBar from './nav_bar';
6 | import {uploadPicture} from '../../actions/picture_actions';
7 | import { openModal, closeModal} from '../../actions/modal_actions';
8 | import {getUserPictures, clearPictures, homePage} from '../../actions/picture_actions';
9 | import {getUser,fetchUsers} from '../../actions/session_actions';
10 | import {fetchNotifications, updateNotification} from '../../actions/notification_actions';
11 | import {newNotifications, notifyArray} from '../../util/selectors';
12 |
13 | const mapStateToProps = ({entities, session, notifications}, ownProps) => {
14 | return {currentUser: entities.users[session.id],
15 | profileUser: ownProps.user,
16 | newNotifications: newNotifications(notifications),
17 | notifications: notifyArray(notifications)
18 | };
19 | };
20 | const mapDispatchToProps = () => dispatch => ({
21 | logout: () => dispatch(logout()),
22 | uploadPicture: (picture, userId) => dispatch(uploadPicture(picture, userId)),
23 | openModal: (modal) => dispatch(openModal(modal)),
24 | getUserPictures: (userId) => dispatch(getUserPictures(userId)),
25 | getUser: (userId) => dispatch(getUser(userId)),
26 | clearPictures: () => dispatch(clearPictures()),
27 | homePage: () => dispatch(homePage()),
28 | fetchNotifications: () => dispatch(fetchNotifications()),
29 | closeModal: () => dispatch(closeModal()),
30 | updateNotification: (notification) => dispatch(updateNotification(notification)),
31 | fetchUsers: () => dispatch(fetchUsers())
32 | });
33 |
34 | export default connect(mapStateToProps, mapDispatchToProps)(NavBar);
35 |
--------------------------------------------------------------------------------
/frontend/components/notification/notification_modal.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {Link} from 'react-router-dom';
3 | import NotifyModalListItem from './notify_modal_list_item';
4 |
5 | class NotifyModal extends React.Component {
6 | constructor(props) {
7 | super(props);
8 | }
9 |
10 | componentDidMount(){
11 |
12 | document.addEventListener('keydown', (e) => {
13 | if (e.keyCode === 27) this.props.closeModal();
14 | });
15 |
16 | let notifyModal = document.getElementsByClassName('modal-child-notify');
17 |
18 | document.addEventListener('click', (e) => {
19 | if (notifyModal.length > 0){
20 | var clickOnModal = notifyModal[0].contains(e.target);
21 |
22 | if (!clickOnModal) {
23 | this.props.closeModal();
24 | notifyModal = [];
25 | }
26 | }
27 | });
28 |
29 |
30 |
31 | }
32 |
33 | notifyBody(notificationList) {
34 | if (this.props.notifications.length === 0){
35 | return(You have no notifications
);
36 | }else {
37 | return (
38 |
39 | {notificationList}
40 |
41 | );
42 | }
43 | }
44 | render() {
45 | const {users, closeModal} = this.props;
46 | let ids = [];
47 | const notificationList = this.props.notifications.map((n) => {
48 | if (!ids.includes(n.initiator_id)){
49 | ids.push(n.initiator_id);
50 | return ;
51 | }
52 | });
53 | return (
54 |
55 |
56 | Notifications
57 |
58 | {this.notifyBody(notificationList)}
59 |
15 |
17 | );
18 | }
19 | }
20 |
21 | export default NotifyModalListItem;
22 |
--------------------------------------------------------------------------------
/frontend/components/profile/edit_user_container.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import React from 'react';
3 | import EditUserForm from './edit_user_form';
4 | import { closeModal, openModal } from '../../actions/modal_actions';
5 | import { updateUser } from '../../actions/session_actions';
6 | import {fetchFollows, createFollow, deleteFollow} from '../../actions/follow_actions';
7 |
8 | const mapStateToProps = ({follows, session, entities:{users},ui:{modal}}, ownProps) => {
9 | return {
10 | user: modal.user
11 | };
12 | };
13 | const mapDispatchToProps = () => dispatch => ({
14 | closeModal: () => dispatch(closeModal()),
15 | openModal: (object) => dispatch(openModal(object)),
16 | updateUser: (user) => dispatch(updateUser(user))
17 | });
18 |
19 | export default connect(mapStateToProps, mapDispatchToProps)(EditUserForm);
20 |
--------------------------------------------------------------------------------
/frontend/components/profile/edit_user_form.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | class EditUserForm extends React.Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = {description: this.props.user.description};
7 | this.handleSubmit = this.handleSubmit.bind(this);
8 | this.handleChange = this.handleChange.bind(this);
9 | }
10 |
11 | handleChange() {
12 | return (e) => {
13 | return this.setState({description: e.target.value});
14 | };
15 | }
16 |
17 | handleSubmit() {
18 | const {updateUser, user,closeModal} = this.props;
19 | updateUser({id: user.id, username: user.username, description: this.state.description, cover_url: user.cover_url, profile_url: user.profile_url});
20 | closeModal();
21 | }
22 |
23 | handleUpload(e, string) {
24 | this.props.closeModal();
25 | e.preventDefault();
26 | cloudinary.openUploadWidget(window.cloudinary_options, (error, picture) => {
27 | if (error === null){
28 | this.props.openModal({string:string, picture: picture[0]});
29 |
30 | }
31 | });
32 | }
33 |
34 |
35 |
36 | render() {
37 | return(
38 |
39 |
this.props.closeModal()} className="fa fa-close edit-close">
40 |
this.handleUpload(e,'uploadCover')}>
41 |
this.handleUpload(e, 'uploadProfile')}>
42 |
Add/Change Description
43 |
47 |
openModal({string:'show',picture: picture, user: user})}>
6 | );
7 | };
8 |
9 | export default PhotoListItem;
10 |
--------------------------------------------------------------------------------
/frontend/components/profile/profile_container.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import ProfilePage from './profile_page';
3 | import {pictureList, findFollow, getFollowers, getFollowings, parseUrl} from '../../util/selectors';
4 | import {getUserPictures} from '../../actions/picture_actions';
5 | import {getUser} from '../../actions/session_actions';
6 | import { openModal} from '../../actions/modal_actions';
7 | import {fetchFollows, createFollow, deleteFollow} from '../../actions/follow_actions';
8 | import {createNotification} from '../../util/notification_util';
9 |
10 | const mapStateToProps = ({entities, session, follows}, ownProps) =>{
11 | const defaultUser = {id: "",username:""};
12 | return {
13 | currentUser: entities.users[session.id],
14 | userId: parseInt(ownProps.match.params.id),
15 | user: entities.users[parseInt(ownProps.match.params.id)] || defaultUser,
16 | pictures: pictureList(entities.pictures),
17 | follow: findFollow(follows,session.id, parseInt(ownProps.match.params.id)),
18 | followers: getFollowers(follows,parseInt(ownProps.match.params.id)),
19 | following: getFollowings(follows,parseInt(ownProps.match.params.id)),
20 | parseUrl: parseUrl,
21 | createNotification: createNotification
22 | };
23 | };
24 |
25 | const mapDispatchToProps = () => dispatch => ({
26 | getUserPictures: (userId) => dispatch(getUserPictures(userId)),
27 | getUser: (userId) => dispatch(getUser(userId)),
28 | openModal: (modal) => dispatch(openModal(modal)),
29 | fetchFollows: (follows) => dispatch(fetchFollows(follows)),
30 | createFollow: (follow) => dispatch(createFollow(follow)),
31 | deleteFollow: (id) => dispatch(deleteFollow(id))
32 | });
33 |
34 | export default connect(mapStateToProps, mapDispatchToProps)(ProfilePage);
35 |
--------------------------------------------------------------------------------
/frontend/components/profile/profile_page.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import NavContainer from '../nav/nav_container';
3 | import PhotoListItem from './photo_list_item';
4 | class ProfilePage extends React.Component {
5 | constructor(props){
6 | super(props);
7 | this.state = {user: this.props.user};
8 | this.updateFollow = this.updateFollow.bind(this);
9 | }
10 |
11 | componentDidMount () {
12 | this.props.getUserPictures(this.props.userId);
13 | this.props.getUser(this.props.userId);
14 | this.props.fetchFollows();
15 | }
16 |
17 | componentWillReceiveProps(nextProps) {
18 | if (this.props.userId !== nextProps.userId){
19 | this.props.getUserPictures(nextProps.userId);
20 | }
21 | }
22 |
23 | holderClass() {
24 | if (this.props.pictures.length < 5 && !this.props.user.cover_url) {
25 | return "profile-holder2";
26 | } else {
27 | return "profile-holder";
28 | }
29 |
30 | }
31 |
32 | updateFollow(){
33 | const {deleteFollow, createFollow, follow, user, currentUser, createNotification} = this.props;
34 | if (follow){
35 | deleteFollow(follow.id);
36 | } else {
37 | createFollow({leader_id: user.id, follower_id: currentUser.id});
38 | createNotification({initiator_id: currentUser.id, user_id: user.id});
39 | }
40 | }
41 |
42 | profileButton() {
43 | const {follow,currentUser,user, openModal} = this.props;
44 | const followButtonClass = this.determineClass();
45 | const followingButtonClass = this.determineFollowingClass();
46 | if (follow && currentUser.id !== user.id){
47 | return (
48 | this.updateFollow()} className={followingButtonClass}>Following
49 | );
50 | } else if (currentUser.id !== user.id) {
51 | return (
52 | this.updateFollow()} className={followButtonClass}>Follow
53 | );
54 | } else if (currentUser.id === user.id) {
55 | return (
56 | openModal({string:'editUser', user: currentUser})} className={followButtonClass}>Edit
57 | );
58 | }
59 | }
60 |
61 | determineFollowingClass() {
62 | const {user} = this.props;
63 | if (user.cover_url) {
64 | return "following";
65 | } else {
66 | return "following2";
67 | }
68 | }
69 |
70 | determineClass() {
71 | const {user} = this.props;
72 | if (user.cover_url) {
73 | return "follow";
74 | } else {
75 | return "follow2";
76 | }
77 | }
78 |
79 | userDescription() {
80 | const {user} = this.props;
81 | if (user.description){
82 | return (
83 | {user.description}
84 | );
85 | }
86 | }
87 |
88 | cover() {
89 | const {user} = this.props;
90 | if (user.cover_url){
91 | return(
92 |
93 |
94 |
99 | );
100 | }
101 | }
102 |
103 | render() {
104 | const {openModal, user, followers, following, parseUrl} = this.props;
105 | const profileUrl = user.profile_url || "https://s33.postimg.cc/nk3sgiaa7/default_profile.jpg";
106 | const pictures = this.props.pictures.map((picture) => {
107 | if (user.id === picture.uploader_id){
108 | return ;
109 | }
110 | });
111 | return (
112 |
113 | {this.profileButton()}
114 |
115 | {this.cover()}
116 |
117 |
118 |
{user.username}
120 | {user.description}
121 | {followers} Followers {following} Following
122 |
123 |
124 | {pictures}
125 |
126 |
127 |
128 |
129 |
32 |
this.props.closeModal()} className="fa fa-close upload-close">
33 |
{this.title()}
34 |
35 |
36 |
this.updateUser()} className= "modal-upload-button">Submit
37 |
8 |
9 |
11 |
12 | );
13 |
14 | export default Root;
15 |
--------------------------------------------------------------------------------
/frontend/components/session/login_form_container.js:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import { login, clearErrors } from '../../actions/session_actions';
3 | import SessionForm from './session_form';
4 | import { Link } from 'react-router-dom';
5 | import React from 'react';
6 |
7 |
8 | const mapStateToProps = (state,ownProps) => ({
9 | errors: state.errors.session,
10 | formType: 'Log In',
11 | link:
44 |
45 | {this.props.errors.map((error,i) => {
46 | return( {error} );
47 | }
48 | )}
49 |
50 |
51 | );
52 | }
53 | }
54 |
55 | demo(){
56 | const {formType} = this.props;
57 | if (formType === 'Log In'){
58 | return (
59 | this.props.processForm({username:"Felix",password:"password"})}>Demo Login
60 | );
61 | } else {
62 | return (
63 | this.props.login({username:"Felix",password:"password"})}>Demo Login
64 | )
65 | }
66 | }
67 |
68 | bottomLink() {
69 | const {formType} = this.props;
70 | if (formType === 'Log In'){
71 | return (
72 | Don't have an account? {this.props.link}
73 | );
74 | } else {
75 | return (
76 | Already have an account? {this.props.link}
77 | );
78 | }
79 | }
80 |
81 | render(){
82 |
83 | const {formType} = this.props;
84 | return (
85 |
86 |
87 |
88 | {this.listErrors()}
89 |
90 |
91 |
{formType}
92 |
108 |
25 | this.handleEdit()} className="button1">Edit
26 | this.handleDelete()} className="button2">Delete
27 |
28 | );
29 | }
30 | }
31 |
32 | handleDelete() {
33 | this.props.deletePicture(this.props.picture.id);
34 | this.props.closeModal();
35 | }
36 |
37 | handleEdit() {
38 | this.props.closeModal();
39 | this.props.openModal({string:'edit', picture:this.props.picture});
40 | }
41 |
42 | updateFollow(){
43 | const {deleteFollow, createFollow, follow, user, currentUser, createNotification} = this.props;
44 | if (follow){
45 | deleteFollow(follow.id);
46 | } else {
47 | createFollow({leader_id: user.id, follower_id: currentUser.id});
48 | createNotification({initiator_id: currentUser.id, user_id: user.id});
49 | }
50 | }
51 |
52 | followButton() {
53 | const {follow,currentUser,user} = this.props;
54 | if (follow && currentUser.id !== user.id){
55 | return (
56 | this.updateFollow()} className="show-following">Following
57 | );
58 | } else if (currentUser.id !== user.id) {
59 | return (
60 | this.updateFollow()} className="show-follow">Follow
61 | );
62 | }
63 | }
64 |
65 | handleModalClose () {
66 |
67 | }
68 |
69 | render() {
70 | const {closeModal, picture, user} = this.props;
71 | const defaultProfile = this.props.user.profile_url || "https://res.cloudinary.com/dbm56y2y/image/upload/v1529040240/default_profile.jpg";
72 | return (
73 |
74 |
75 |
76 |
77 |
79 |
80 |
{picture.title}
81 |
82 | {this.buttonDisplay()}
83 |
84 |
85 |
86 |
33 |
this.props.closeModal()} className="fa fa-close upload-close">
34 |
35 |
42 |
, root);
50 | });
51 |
--------------------------------------------------------------------------------
/frontend/reducers/entities_reducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import usersReducer from './users_reducer';
3 | import picturesReducer from './pictures_reducer';
4 |
5 | const entitiesReducer = combineReducers({
6 | users: usersReducer,
7 | pictures: picturesReducer,
8 |
9 | });
10 |
11 | export default entitiesReducer;
12 |
--------------------------------------------------------------------------------
/frontend/reducers/errors_reducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 |
3 | import sessionErrorsReducer from './session_errors_reducer';
4 |
5 | const errorsReducer = combineReducers({
6 | session: sessionErrorsReducer
7 | });
8 |
9 | export default errorsReducer;
10 |
--------------------------------------------------------------------------------
/frontend/reducers/follows_reducer.js:
--------------------------------------------------------------------------------
1 | import {RECEIVE_FOLLOW, RECEIVE_FOLLOWS, REMOVE_FOLLOW} from '../actions/follow_actions';
2 | import merge from 'lodash/merge';
3 |
4 | const followsReducer = (initialState = {}, action) => {
5 | Object.freeze(initialState);
6 | switch (action.type){
7 | case RECEIVE_FOLLOW:
8 | return merge({}, initialState, {[action.follow.id]:action.follow});
9 | case RECEIVE_FOLLOWS:
10 | return merge({}, action.follows);
11 | case REMOVE_FOLLOW:
12 | const newState = merge({}, initialState);
13 | delete newState[action.follow.id];
14 | return newState;
15 | default:
16 | return initialState;
17 | }
18 | };
19 |
20 | export default followsReducer;
21 |
--------------------------------------------------------------------------------
/frontend/reducers/modal_reducer.js:
--------------------------------------------------------------------------------
1 | import { OPEN_MODAL, CLOSE_MODAL } from '../actions/modal_actions';
2 |
3 | export default function modalReducer(initialState = null, action) {
4 | Object.freeze(initialState);
5 | switch (action.type) {
6 | case OPEN_MODAL:
7 | return action.modal;
8 | case CLOSE_MODAL:
9 | return null;
10 | default:
11 | return initialState;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/frontend/reducers/notifications_reducer.js:
--------------------------------------------------------------------------------
1 | import {RECEIVE_NOTIFICATION, RECEIVE_NOTIFICATIONS} from '../actions/notification_actions';
2 | import merge from 'lodash/merge';
3 |
4 | const notificationsReducer = (initialState = {}, action) => {
5 | Object.freeze(initialState);
6 | switch (action.type){
7 | case RECEIVE_NOTIFICATION:
8 | return merge({}, initialState, {[action.notification.id]:action.notification});
9 | case RECEIVE_NOTIFICATIONS:
10 | return merge({}, action.notifications);
11 | default:
12 | return initialState;
13 | }
14 | };
15 |
16 | export default notificationsReducer;
17 |
--------------------------------------------------------------------------------
/frontend/reducers/pictures_reducer.js:
--------------------------------------------------------------------------------
1 | import {RECEIVE_PICTURE, RECEIVE_PICTURES, CLEAR_PICTURES, REMOVE_PICTURE} from '../actions/picture_actions';
2 | import merge from 'lodash/merge';
3 |
4 | const picturesReducer = (initialState = {}, action) => {
5 | Object.freeze(initialState);
6 | switch (action.type){
7 | case RECEIVE_PICTURE:
8 | return merge({}, initialState, {[action.picture.id]:action.picture});
9 | case RECEIVE_PICTURES:
10 | return merge({}, action.pictures);
11 | case CLEAR_PICTURES:
12 | return {};
13 | case REMOVE_PICTURE:
14 | const newState = merge({}, initialState);
15 | delete newState[action.picture.id];
16 | return newState;
17 | default:
18 | return initialState;
19 | }
20 | };
21 |
22 | export default picturesReducer;
23 |
--------------------------------------------------------------------------------
/frontend/reducers/root_reducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import errorsReducer from './errors_reducer';
3 | import sessionReducer from './session_reducer';
4 | import entitiesReducer from './entities_reducer';
5 | import followsReducer from './follows_reducer';
6 | import ui from './ui_reducer';
7 | import notificationsReducer from './notifications_reducer';
8 |
9 | const rootReducer = combineReducers({
10 | entities: entitiesReducer,
11 | follows: followsReducer,
12 | session: sessionReducer,
13 | ui: ui,
14 | errors: errorsReducer,
15 | notifications: notificationsReducer
16 | });
17 |
18 | export default rootReducer;
19 |
--------------------------------------------------------------------------------
/frontend/reducers/session_errors_reducer.js:
--------------------------------------------------------------------------------
1 | import {RECEIVE_CURRENT_USER,
2 | RECEIVE_ERRORS, CLEAR_ERRORS} from '../actions/session_actions.js';
3 |
4 | const sessionErrorsReducer = (initialState = [], action) => {
5 | Object.freeze(initialState);
6 | switch(action.type){
7 | case RECEIVE_CURRENT_USER:
8 | return [];
9 | case CLEAR_ERRORS:
10 | return [];
11 | case RECEIVE_ERRORS:
12 | return action.errors;
13 | default:
14 | return initialState;
15 | }
16 | };
17 |
18 | export default sessionErrorsReducer;
19 |
--------------------------------------------------------------------------------
/frontend/reducers/session_reducer.js:
--------------------------------------------------------------------------------
1 | import {RECEIVE_CURRENT_USER,
2 | LOGOUT_CURRENT_USER, REMOVE_USER} from '../actions/session_actions.js';
3 | import merge from 'lodash/merge';
4 |
5 | const defaultUser = Object.freeze({
6 | id: null
7 | });
8 |
9 | const sessionReducer = (state = defaultUser, action) => {
10 | Object.freeze(state);
11 | switch(action.type) {
12 | case RECEIVE_CURRENT_USER:
13 | return { id: action.currentUser.id };
14 | case LOGOUT_CURRENT_USER:
15 | return defaultUser;
16 | case REMOVE_USER:
17 | const newState = merge({}, state);
18 | delete newState[action.user.id];
19 | return newState;
20 | default:
21 | return state;
22 | }
23 | };
24 |
25 | export default sessionReducer;
26 |
--------------------------------------------------------------------------------
/frontend/reducers/ui_reducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import modal from './modal_reducer';
3 |
4 | export default combineReducers({
5 | modal
6 | });
7 |
--------------------------------------------------------------------------------
/frontend/reducers/users_reducer.js:
--------------------------------------------------------------------------------
1 | import {RECEIVE_CURRENT_USER, RECEIVE_USER, RECEIVE_USERS} from '../actions/session_actions.js';
2 | import merge from 'lodash/merge';
3 |
4 | const usersReducer = (initialState = {}, action) => {
5 | Object.freeze(initialState);
6 | switch(action.type){
7 | case RECEIVE_CURRENT_USER:
8 | return merge({}, initialState,
9 | {[action.currentUser.id]: action.currentUser});
10 | case RECEIVE_USER:
11 | return merge({}, initialState, {[action.user.id]:action.user});
12 | case RECEIVE_USERS:
13 | return merge({}, action.users);
14 | default:
15 | return initialState;
16 | }
17 | };
18 |
19 | export default usersReducer;
20 |
--------------------------------------------------------------------------------
/frontend/store/store.js:
--------------------------------------------------------------------------------
1 | import { createStore, applyMiddleware } from 'redux';
2 | import thunk from 'redux-thunk';
3 | import rootReducer from '../reducers/root_reducer';
4 | // import logger from 'redux-logger'
5 |
6 | const configureStore = (preloadedState = {}) => (
7 | createStore(
8 | rootReducer,
9 | preloadedState,
10 | applyMiddleware(thunk)
11 | )
12 | );
13 |
14 | export default configureStore;
15 |
--------------------------------------------------------------------------------
/frontend/util/feed_util.js:
--------------------------------------------------------------------------------
1 | export const homeFeed = () => {
2 | return $.ajax({
3 | method: 'GET',
4 | url: '/api/feed'
5 | });
6 | };
7 |
8 | export const discoverFeed = () => {
9 | return $.ajax({
10 | method: 'GET',
11 | url: '/api/fresh'
12 | });
13 | };
14 |
--------------------------------------------------------------------------------
/frontend/util/follow_util.js:
--------------------------------------------------------------------------------
1 | export const fetchFollows = () => {
2 | return $.ajax({
3 | method: 'GET',
4 | url: '/api/follows'
5 | });
6 | };
7 |
8 | export const createFollow = (follow) => {
9 | return $.ajax({
10 | method: 'POST',
11 | url: '/api/follows',
12 | data: {follow}
13 | });
14 | };
15 |
16 | export const deleteFollow = (id) => {
17 | return $.ajax({
18 | method: 'DELETE',
19 | url: `/api/follows/${id}`
20 | });
21 | };
22 |
--------------------------------------------------------------------------------
/frontend/util/notification_util.js:
--------------------------------------------------------------------------------
1 | export const fetchNotifications = () => {
2 | return $.ajax({
3 | method: 'GET',
4 | url: '/api/notifications'
5 | });
6 | };
7 |
8 | export const createNotification = (notification) => {
9 | return $.ajax({
10 | method: 'POST',
11 | url: '/api/notifications',
12 | data: {notification}
13 | });
14 | };
15 |
16 | export const deleteNotification = (id) => {
17 | return $.ajax({
18 | method: 'DELETE',
19 | url: `/api/notifications/${id}`
20 | });
21 | };
22 |
23 | export const updateNotification = (notification) => {
24 | return $.ajax({
25 | method: 'PATCH',
26 | url: `/api/notifications/${notification.id}`,
27 | data: {notification}
28 | });
29 | };
30 |
--------------------------------------------------------------------------------
/frontend/util/picture_api_util.js:
--------------------------------------------------------------------------------
1 | export const uploadPicture = (picture, userId) => {
2 | return $.ajax({
3 | method: 'POST',
4 | url: `/api/users/${userId}/pictures`,
5 | data: {picture}
6 | });
7 | };
8 |
9 | export const fetchUserPictures = (userId) => {
10 | return $.ajax({
11 | method: 'GET',
12 | url: `/api/users/${userId}/pictures`
13 | });
14 | };
15 |
16 | export const fetchPicture = (photoId) => {
17 | return $.ajax({
18 | method: 'GET',
19 | url: `/api/pictures/${photoId}`
20 | });
21 | };
22 |
23 | export const updatePicture = (picture) => {
24 | return $.ajax({
25 | method: 'PATCH',
26 | url: `/api/pictures/${picture.id}`,
27 | data: {picture}
28 | });
29 | };
30 |
31 | export const deletePicture = (photoId) => {
32 | return $.ajax({
33 | method: 'DELETE',
34 | url: `/api/pictures/${photoId}`
35 | });
36 | };
37 |
--------------------------------------------------------------------------------
/frontend/util/route_util.jsx:
--------------------------------------------------------------------------------
1 | import { connect } from 'react-redux';
2 | import { withRouter, Route, Redirect } from 'react-router-dom';
3 | import React from 'react';
4 |
5 | const Auth = ({component: Component, path, loggedIn, exact}) => (
6 | (
7 | !loggedIn ? (
8 | (
21 | loggedIn ? (
22 | The page you were looking for doesn't exist (404)
5 |
60 |
61 |
The page you were looking for doesn't exist.
62 |
You may have mistyped the address or the page may have moved.
63 |
64 |
If you are the application owner check the logs for more information.
65 |
The change you wanted was rejected (422)
5 |
60 |
61 |
The change you wanted was rejected.
62 |
Maybe you tried to change something you didn't have access to.
63 |
64 |
If you are the application owner check the logs for more information.
65 |
We're sorry, but something went wrong (500)
5 |
60 |
61 |
We're sorry, but something went wrong.
62 |
63 |
If you are the application owner check the logs for more information.
64 |