FCC Camper Leaderboard Redux Refactor

Developer
Zac Clemans
Size
9,125 Kb
Views
6,072
  1. FCC Camper Leaderboard Redux Refactor Previews
  2. FCC Camper Leaderboard Redux Refactor HTML Codes
  3. FCC Camper Leaderboard Redux Refactor CSS Codes
  4. FCC Camper Leaderboard Redux Refactor JS Codes

How do I make an fcc camper leaderboard redux refactor?

Refactored to use Redux. Possibly overkill, but good practice.. What is a fcc camper leaderboard redux refactor? How do you make a fcc camper leaderboard redux refactor? This script and codes were developed by Zac Clemans on 14 January 2023, Saturday.

FCC Camper Leaderboard Redux Refactor Previews
IQ Test

FCC Camper Leaderboard Redux Refactor - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FCC Camper Leaderboard Redux Refactor</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 id="title">freeCodeCamp Leaderboard</h1>
<div id="root"></div> <script src='https://fb.me/react-15.0.2.js'></script>
<script src='https://fb.me/react-dom-15.0.2.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.0.6/react-redux.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

FCC Camper Leaderboard Redux Refactor - Script Codes CSS Codes

body { background: #f8f8f8;
}
input { margin-top: 50px;
}
input[type="text"] { margin-left: 150px; padding-left: 10px; width: 400px; height: 40px; border: 1px solid #585858; border-radius: 10px; font-size: 18px;
}
input[type="button"] { margin-left: 10px; width: 150px; height: 40px; border: 1px solid #afafaf; border-radius: 5px; background: white; color: #ec7018; font-size: 18px; font-weight: bold;
}
#title { margin-top: -5px; padding: 30px 0; width: 100%; color: #ec7018; font-weight: bold; text-align: center; background: white; border-bottom: 1px solid #585858;
}
.userList, .userPreview { float: left; margin-top: 50px;
}
.userList { color: #585858; margin-left: 150px;
}
.userList .rankColumn { width: 60px; text-align: center; font-weight: bold;
}
.userList .rankColumn .suffix { font-size: 10px;
}
.userList .avatarColumn { width: 50px; text-align: center;
}
.userList .avatarColumn img { width: 25px; height: 25px; border: 1px solid #e0e0e0; border-radius: 5px;
}
.userList .usernameColumn { width: 400px;
}
.userList .pointsColumn { width: 100px; text-align: right; font-weight: bold;
}
.userList .userRow { cursor: pointer;
}
.userList .userRow:hover { background: #ec7018; color: white;
}
.userList tr { border-top: 1px solid gray;
}
.userList th { font-size: 18px; font-weight: bold; color: #ec7018;
}
.userList td { padding: 10px 0; font-size: 18px; vertical-align: middle;
}
.userPreview { position: fixed; left: 825px; width: 350px; padding: 5px 20px; background: white; border: 4px solid #e0e0e0; border-radius: 10px;
}
.userPreview .userPreviewRank { float: left; color: #ec7018;
}
.userPreview .userPreviewPoints { float: right; color: #585858;
}
.userPreview .userPreviewName { color: #585858;
}
.userPreview .userPreviewAvatar { width: 200px; height: 200px; border: 2px solid #e0e0e0; border-radius: 10px;
}
.userPreview .userPreviewHeader { color: #afafaf;
}
.userPreview .bolded { font-weight: bold;
}
.userPreview .suffix { font-size: 14px;
}

FCC Camper Leaderboard Redux Refactor - Script Codes JS Codes

'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _Redux = Redux;
var combineReducers = _Redux.combineReducers;
var createStore = _Redux.createStore;
var applyMiddleware = _Redux.applyMiddleware;
var _React = React;
var Component = _React.Component;
var _ReactRedux = ReactRedux;
var connect = _ReactRedux.connect;
var Provider = _ReactRedux.Provider;
// Redux-thunk
// source: https://github.com/gaearon/redux-thunk/blob/master/src/index.js
function thunkMiddleware(store) { return function (next) { return function (action) { if (typeof action === "function") { return action(store.dispatch, store.getState); } else { return next(action); } }; };
}
// Reducers
var rankTypeFilter = function rankTypeFilter() { var state = arguments.length <= 0 || arguments[0] === undefined ? 'RECENT' : arguments[0]; var action = arguments[1]; switch (action.type) { case 'TOGGLE_RANK_TYPE_FILTER': return state === 'RECENT' ? 'ALLTIME' : 'RECENT'; default: return state; }
};
var userSearchFilter = function userSearchFilter() { var state = arguments.length <= 0 || arguments[0] === undefined ? '' : arguments[0]; var action = arguments[1]; switch (action.type) { case 'SET_USER_SEARCH_FILTER': return action.userSearchFilter; default: return state; }
};
var activeUser = function activeUser() { var state = arguments.length <= 0 || arguments[0] === undefined ? null : arguments[0]; var action = arguments[1]; switch (action.type) { case 'SET_ACTIVE_USER': return { user: action.user, rank: action.rank, challengeRecent: action.challengeRecent, challengeAlltime: action.challengeAlltime, algorithmRecent: action.algorithmRecent, algorithmAlltime: action.algorithmAlltime, projectRecent: action.projectRecent, projectAlltime: action.projectAlltime, communityRecent: action.communityRecent, communityAlltime: action.communityAlltime, totalRecent: action.totalRecent, totalAlltime: action.totalAlltime, avatar: action.avatar }; case 'REMOVE_ACTIVE_USER': return null; default: return state; }
};
var userData = function userData() { var state = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0]; var action = arguments[1]; switch (action.type) { case 'SET_USER_DATA': return action.userData; default: return state; }
};
var combinedReducer = combineReducers({ rankTypeFilter: rankTypeFilter, userSearchFilter: userSearchFilter, activeUser: activeUser, userData: userData
});
// Action Creators
var toggleRankTypeFilter = function toggleRankTypeFilter() { return { type: 'TOGGLE_RANK_TYPE_FILTER' };
};
var setUserSearchFilter = function setUserSearchFilter(userSearchFilter) { return { type: 'SET_USER_SEARCH_FILTER', userSearchFilter: userSearchFilter };
};
var setActiveUser = function setActiveUser(user, rank, challengeRecent, challengeAlltime, algorithmRecent, algorithmAlltime, projectRecent, projectAlltime, communityRecent, communityAlltime, totalRecent, totalAlltime, avatar) { return { type: 'SET_ACTIVE_USER', user: user, rank: rank, challengeRecent: challengeRecent, challengeAlltime: challengeAlltime, algorithmRecent: algorithmRecent, algorithmAlltime: algorithmAlltime, projectRecent: projectRecent, projectAlltime: projectAlltime, communityRecent: communityRecent, communityAlltime: communityAlltime, totalRecent: totalRecent, totalAlltime: totalAlltime, avatar: avatar };
};
var removeActiveUser = function removeActiveUser() { return { type: 'REMOVE_ACTIVE_USER' };
};
// Uses the thunk middleware to allow action
// creater that returns a function to be called
// by dispatch()
var fetchActiveUser = function fetchActiveUser(user, rank) { // thunk passes dispatch to action creater return function (dispatch) { $.ajax({ url: "https://fcctop100.herokuapp.com/api/fccusers/ranking-r/" + user, dataType: "json", success: function success(data) { dispatch(setActiveUser(user, rank, data.challengesRecent, data.challenges, data.algorithmsRecent, data.algorithms, data.projectsRecent, data.projects, data.communityRecent, data.community, data.pointsRecent, data.points, data.img)); }, error: function error(xhr, status, err) { console.error("https://fcctop100.herokuapp.com/api/fccusers/ranking-r/" + user, status, err.toString()); } }); };
};
var setUserData = function setUserData(userData) { return { type: 'SET_USER_DATA', userData: userData };
};
var fetchNewUserData = function fetchNewUserData(filter) { return function (dispatch) { $.ajax({ url: "https://fcctop100.herokuapp.com/api/fccusers/" + (filter === 'RECENT' ? 'ALLTIME' : 'RECENT') + "/points", dataType: 'json', success: function success(data) { dispatch(setUserData(data)); dispatch(toggleRankTypeFilter()); } }); };
};
// Helper Functions
var toOrdinal = function toOrdinal(i) { var j = i % 10, k = i % 100; if (j == 1 && k != 11) { return "st"; } if (j == 2 && k != 12) { return "nd"; } if (j == 3 && k != 13) { return "rd"; } return "th";
};
var getVisibleUsers = function getVisibleUsers(users, filter) { var usersWithRank = users.map(function (user, index) { return _extends({}, user, { rank: index + 1 }); }); return usersWithRank.filter(function (user) { return user.username.toLowerCase().indexOf(filter.toLowerCase()) != -1; });
};
// Hybrid Components
var SearchUsers = function SearchUsers(_ref) { var text = _ref.text; var dispatch = _ref.dispatch; return React.createElement('input', { type: 'text', placeholder: 'Search for user', value: text, onChange: function onChange(e) { dispatch(setUserSearchFilter(e.target.value)); } });
};
// Presentational Components
var RankFilter = function RankFilter(_ref2) { var filter = _ref2.filter; var onClick = _ref2.onClick; return React.createElement('input', { type: 'button', value: filter === 'RECENT' ? 'ALLTIME' : 'RECENT', onClick: onClick });
};
// Presentational Components
var UserPreview = function UserPreview(_ref3) { var user = _ref3.user; var filter = _ref3.filter; if (user) { return React.createElement( 'div', { className: 'userPreview' }, React.createElement( 'h3', null, React.createElement( 'span', { className: 'userPreviewRank bolded' }, user.rank, React.createElement( 'span', { className: 'suffix' }, toOrdinal(user.rank) ) ), React.createElement( 'span', { className: 'userPreviewPoints bolded' }, filter === 'RECENT' ? user.totalRecent : user.totalAlltime, ' Total Points' ) ), React.createElement('br', null), React.createElement( 'h3', { className: 'userPreviewName' }, user.user ), React.createElement('hr', null), React.createElement( 'a', { href: "https://www.freecodecamp.com/" + user.user, target: '_blank' }, React.createElement('img', { className: 'userPreviewAvatar', src: user.avatar, alt: user.user }) ), React.createElement('hr', null), React.createElement( 'h4', { className: 'userPreviewHeader' }, 'Points Breakdown' ), React.createElement( 'h4', null, React.createElement( 'span', { className: 'bolded' }, filter === 'RECENT' ? user.challengeRecent : user.challengeAlltime ), ' total Challenge Points', React.createElement('br', null), React.createElement( 'span', { className: 'bolded' }, filter === 'RECENT' ? user.algorithmRecent : user.algorithmAlltime ), ' total Algorithm Points', React.createElement('br', null), React.createElement( 'span', { className: 'bolded' }, filter === 'RECENT' ? user.projectRecent : user.projectAlltime ), ' total Project Points', React.createElement('br', null), React.createElement( 'span', { className: 'bolded' }, filter === 'RECENT' ? user.communityRecent : user.communityAlltime ), ' total Community Points' ) ); } else { return React.createElement('div', null); }
};
var UserRow = function UserRow(_ref4) { var rank = _ref4.rank; var img = _ref4.img; var username = _ref4.username; var points = _ref4.points; var onClick = _ref4.onClick; return React.createElement( 'tr', { className: 'userRow', onClick: onClick }, React.createElement( 'td', { className: 'rankColumn' }, rank, React.createElement( 'span', null, toOrdinal(rank) ) ), React.createElement( 'td', { className: 'avatarColumn' }, React.createElement('img', { src: img }) ), React.createElement( 'td', { className: 'usernameColumn' }, username ), React.createElement( 'td', { className: 'pointsColumn' }, points ) );
};
var UserList = function UserList(_ref5) { var users = _ref5.users; var filter = _ref5.filter; var onRowClick = _ref5.onRowClick; return React.createElement( 'div', null, React.createElement( 'table', { className: 'userList' }, React.createElement( 'thead', null, React.createElement( 'tr', null, React.createElement( 'th', { className: 'rankColumn' }, 'Rank' ), React.createElement('th', { className: 'avatarColumn' }), React.createElement( 'th', { className: 'usernameColumn' }, 'Username' ), React.createElement( 'th', { className: 'pointsColumn' }, 'Points' ) ) ), React.createElement( 'tbody', null, users.map(function (user, index) { return React.createElement(UserRow, { key: user.username, rank: user.rank, img: user.img, username: user.username, points: filter === 'RECENT' ? user.pointsRecent : user.points, onClick: function onClick() { return onRowClick(user.username, user.rank); } }); }) ) ) );
};
// Container Components and Connections
// SearchUser connection
var mapStateToSearchUsersProps = function mapStateToSearchUsersProps(state) { return { text: state.userSearchFilter };
};
SearchUsers = connect(mapStateToSearchUsersProps)(SearchUsers);
// RankFilter connection/Container Component
var mapStateToRankProps = function mapStateToRankProps(state) { return { filter: state.rankTypeFilter };
};
var mergeRankProps = function mergeRankProps(stateProps, dispatchProps, ownProps) { var filter = stateProps.filter; var dispatch = dispatchProps.dispatch; // Merge the mapStateToRankProps with the onClick that uses // the state of filter to update return _extends({}, stateProps, { onClick: function onClick() { // Must use 'filter' instead of 'rankTypeFilter' // since the prop for RankFilter is named 'filter' dispatch(fetchNewUserData(filter)); dispatch(removeActiveUser()); dispatch(setUserSearchFilter('')); } });
};
RankFilter = connect(mapStateToRankProps, null, mergeRankProps)(RankFilter);
// UserPreview connection
var mapStateToUserPreviewProps = function mapStateToUserPreviewProps(state) { return { user: state.activeUser, filter: state.rankTypeFilter };
};
UserPreview = connect(mapStateToUserPreviewProps)(UserPreview);
// UserList Container Component
var mapStateToUserListProps = function mapStateToUserListProps(state) { return { users: getVisibleUsers(state.userData, state.userSearchFilter), filter: state.rankTypeFilter };
};
var mapDispatchToUserListProps = function mapDispatchToUserListProps(dispatch) { return { onRowClick: function onRowClick(user, rank) { return dispatch(fetchActiveUser(user, rank)); } };
};
var VisibleUserList = connect(mapStateToUserListProps, mapDispatchToUserListProps)(UserList);
// app root
var App = function App() { return React.createElement( 'div', null, React.createElement(SearchUsers, null), React.createElement(RankFilter, null), React.createElement(VisibleUserList, null), React.createElement(UserPreview, null) );
};
var store = createStore(combinedReducer, applyMiddleware(thunkMiddleware));
// Get initial store state
$.ajax({ url: "https://fcctop100.herokuapp.com/api/fccusers/" + store.getState().rankTypeFilter + "/points", dataType: 'json', success: function success(data) { store.dispatch(setUserData(data)); }
});
// Render the React components with Provider connecting all
// Components to the store
ReactDOM.render(React.createElement( Provider, { store: store }, React.createElement(App, null)
), document.getElementById('root'));
FCC Camper Leaderboard Redux Refactor - Script Codes
FCC Camper Leaderboard Redux Refactor - Script Codes
Home Page Home
Developer Zac Clemans
Username thalpha
Uploaded January 14, 2023
Rating 3
Size 9,125 Kb
Views 6,072
Do you need developer help for FCC Camper Leaderboard Redux Refactor?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zac Clemans (thalpha) Script Codes
Name
Local Weather App - Refactor
JQuery Calculator
Camper News
FCC Camper Leaderboard
Twitch Streamer Status
Game of Life
Personal Portfolio
Wikipedia Viewer
Hero arrow test
D3 Map Project
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!