add schedule page and some fixes

Author: ReDBrother

services/app/apps/codebattle/assets/js/app.js

@@ -48,6 +48,7 @@ import {
   renderUserPage,
   renderStreamPage,
   renderUsersRating,
+  renderTournamentsSchedule,
 } from './widgets';
 
 if (process.env.NODE_ENV === 'development') {
@@ -106,6 +107,7 @@ const tournamentRoot = document.getElementById('tournament-root');
 const adminTournamentRoot = document.getElementById('tournament-admin-root');
 const eventWidgetRoot = document.getElementById('event-widget');
 const userPageRoot = document.getElementById('user-page-root');
+const tournamentsScheduleRoot = document.getElementById('tournaments-schedule-root');
 
 if (gameWidgetRoot) {
   renderGameWidget(gameWidgetRoot);
@@ -170,3 +172,7 @@ if (invitesRoot) {
 if (streamRoot) {
   renderStreamPage(streamRoot);
 }
+
+if (tournamentsScheduleRoot) {
+  renderTournamentsSchedule(tournamentsScheduleRoot);
+}

services/app/apps/codebattle/assets/js/widgets/App.jsx

@@ -66,6 +66,7 @@ const InvitesContainer = React.lazy(() => import('./components/InvitesContainer'
 const RoomWidget = React.lazy(() => import('./pages/RoomWidget'));
 const LobbyWidget = React.lazy(() => import('./pages/lobby'));
 const RatingList = React.lazy(() => import('./pages/rating'));
+const TournamentsSchedule = React.lazy(() => import('./pages/schedule'));
 const UserSettings = React.lazy(() => import('./pages/settings'));
 const UserProfile = React.lazy(() => import('./pages/profile'));
 const Registration = React.lazy(() => import('./pages/registration'));
@@ -143,6 +144,16 @@ export const UsersRating = () => (
   </Provider>
 );
 
+export const TournamentsSchedulePage = () => (
+  <Provider store={store}>
+    <PersistGate loading={null} persistor={persistor}>
+      <Suspense>
+        <TournamentsSchedule />
+      </Suspense>
+    </PersistGate>
+  </Provider>
+);
+
 export const UserPage = () => (
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>

services/app/apps/codebattle/assets/js/widgets/index.jsx

@@ -17,6 +17,7 @@ import {
   TournamentPlayerPage,
   UserPage,
   UsersRating,
+  TournamentsSchedulePage,
   StreamPage,
 } from './App';
 
@@ -37,4 +38,5 @@ export const renderEventPage = domElement => createRoot(domElement).render(<Even
 export const renderTournamentPlayerPage = domElement => createRoot(domElement).render(<TournamentPlayerPage />);
 export const renderUserPage = domElement => createRoot(domElement).render(<UserPage />);
 export const renderUsersRating = domElement => createRoot(domElement).render(<UsersRating />);
+export const renderTournamentsSchedule = domElement => createRoot(domElement).render(<TournamentsSchedulePage />);
 export const renderStreamPage = domElement => createRoot(domElement).render(<StreamPage />);

services/app/apps/codebattle/assets/js/widgets/pages/lobby/LobbyWidget.jsx

@@ -23,7 +23,7 @@ import LobbyChat from './LobbyChat';
 import SeasonProfilePanel from './SeasonProfilePanel';
 
 const createBtnClassName = cn(
-  'btn rounded-lg',
+  'btn cb-rounded',
 );
 
 const createBasicGameBtnClassName = cn(
@@ -93,7 +93,6 @@ const LobbyWidget = () => {
     activeGames,
     liveTournaments,
     upcomingTournaments,
-    seasonProfile,
     // completedTournaments,
     presenceList,
     channel: { online },
@@ -184,7 +183,6 @@ const LobbyWidget = () => {
       <SeasonProfilePanel
         liveTournaments={liveTournaments}
         upcomingTournaments={upcomingTournaments}
-        seasonProfile={seasonProfile}
         user={currentUser}
         controls={(
           <div className="d-flex flex-column mt-2">

services/app/apps/codebattle/assets/js/widgets/pages/lobby/SeasonProfilePanel.jsx

@@ -7,7 +7,7 @@ import TournamentListItem, { activeIcon, upcomingIcon } from './TournamentListIt
 const contestDatesText = 'Season: Oct 14 - Dec 21';
 
 const SeasonProfilePanel = ({
-  upcomingTournaments = [], liveTournaments = [], seasonProfile, user, controls,
+  upcomingTournaments = [], liveTournaments = [], user, controls,
 }) => (
   <div className="d-flex flex-column flex-lg-row flex-md-row my-0 my-lg-2 my-md-2">
     <div className="col-12 col-lg-8 col-md-8 my-2 my-lg-0 my-md-0">
@@ -42,10 +42,28 @@ const SeasonProfilePanel = ({
             </div>
           )
           : <div className="pt-2 mt-2">Competition not started yet</div>}
-        <div className="d-flex w-100 pt-2 mt-2">
-          <a href="_blank" type="button" className="btn btn-secondary cb-btn-secondary mx-2 w-100 rounded">{i18n.t('Contests History')}</a>
-          <a href="_blank" type="button" className="btn btn-secondary cb-btn-secondary mx-2 w-100 rounded">{i18n.t('My Tournaments')}</a>
-          <a href="_blank" type="button" className="btn btn-secondary cb-btn-secondary mx-2 w-100 rounded">{i18n.t('Create a Tournament')}</a>
+        <div className="d-flex flex-column flex-lg-row flex-md-row w-100 pt-2 mt-2">
+          <a
+            href="/schedule#contest"
+            type="button"
+            className="btn btn-secondary cb-btn-secondary mx-0 mx-md-2 mx-lg-2 w-100 cb-rounded text-nowrap"
+          >
+            {i18n.t('Contests History')}
+          </a>
+          <a
+            href="/schedule#my"
+            type="button"
+            className="btn btn-secondary cb-btn-secondary mx-0 mx-md-2 mx-lg-2 w-100 cb-rounded text-nowrap"
+          >
+            {i18n.t('My Tournaments')}
+          </a>
+          <a
+            href="/tournaments"
+            type="button"
+            className="btn btn-secondary cb-btn-secondary mx-0 mx-md-2 mx-lg-2 w-100 cb-rounded text-nowrap"
+          >
+            {i18n.t('Create a Tournament')}
+          </a>
         </div>
       </div>
     </div>
@@ -63,18 +81,18 @@ const SeasonProfilePanel = ({
 
         <div className="cb-bg-highlight-panel d-flex py-2 px-1">
           <div className="stat-item py-1 w-100">
-            <span className="stat-value d-block cb-text-danger">1200</span>
+            <span className="stat-value d-block cb-text-danger">{user.rating}</span>
             <span className="stat-label text-uppercase">(Elo Rating)</span>
           </div>
           <div className="stat-item py-1 w-100">
             <span className="stat-value d-block cb-text-success">
               #
-              {seasonProfile.place}
+              {user.rank}
             </span>
             <span className="stat-label text-uppercase">Place</span>
           </div>
           <div className="stat-item py-1 w-100">
-            <span className="stat-value d-block cb-text-danger">{seasonProfile.score}</span>
+            <span className="stat-value d-block cb-text-danger">{user.points || 0}</span>
             <span className="stat-label text-uppercase">Points</span>
           </div>
         </div>

services/app/apps/codebattle/assets/js/widgets/pages/schedule/TournamentSchedule.jsx

@@ -9,13 +9,14 @@ import i18n from '../../../i18n';
 import TournamentListItem, { activeIcon } from '../lobby/TournamentListItem';
 
 const states = [
-  'contest',
-  'my',
-  'all',
+  '#contest',
+  '#my',
+  '#all',
 ];
 
 const getStateFromHash = () => {
   const { hash } = window.location;
+  console.log(hash);
 
   if (states.includes(hash)) {
     return hash;
@@ -25,58 +26,79 @@ const getStateFromHash = () => {
 };
 
 const TournamentSchedule = () => {
-  const [context, setContext] = useState(getStateFromHash());
+  const [context, setContext] = useState(getStateFromHash);
+  const [loading, setLoading] = useState(true);
   const [tournaments, setTournaments] = useState([]);
   const isAdmin = useSelector(currentUserIsAdminSelector);
 
-  const sectionBtnClassName = cn('btn btn-secondary cb-btn-secondary w-100');
+  const sectionBtnClassName = cn('btn btn-secondary border-0 cb-btn-secondary cb-rounded');
   const onChangeContext = event => {
     event.preventDefault();
 
-    if (event.dataset.context && states.includes(event.dataset.context)) {
-      const { context: newContext } = event.dataset;
-      window.location.hash = newContext;
-      setContext(newContext);
+    try {
+      setLoading(true);
+      if (event.currentTarget.dataset.context && states.includes(event.currentTarget.dataset.context)) {
+        const { context: newContext } = event.currentTarget.dataset;
+        window.location.hash = newContext;
+        setContext(newContext);
+      }
+    } catch (e) {
+      setLoading(false);
     }
   };
 
   useEffect(() => {
-    setTournaments([]);
+    if (!isAdmin && context === '#all') {
+      setContext('#contest');
+      return;
+    }
+
+    if (context === '#contest') {
+      setTournaments([]);
+      setLoading(false);
+    } else if (context === '#my') {
+      setTournaments([]);
+      setLoading(false);
+    } else if (context === '#all') {
+      setTournaments([]);
+      setLoading(false);
+    }
   }, [context]);
 
   return (
-    <div className="d-flex cb-rounded cb-bg-panel">
-      <div className="d-flex">
+    <div className="d-flex flex-column cb-rounded cb-bg-panel p-2">
+      <div className="d-flex justify-content-center">
         <button
           type="button"
           className={sectionBtnClassName}
-          data-context="contest"
+          data-context="#contest"
           onClick={onChangeContext}
-          disabled={context === 'contest'}
+          disabled={context === '#contest' || loading}
         >
           {i18n.t('Contest Tournaments')}
         </button>
         <button
           type="button"
           className={sectionBtnClassName}
-          data-context="my"
+          data-context="#my"
           onClick={onChangeContext}
-          disabled={context === 'my'}
+          disabled={context === '#my' || loading}
         >
           {i18n.t('My Tournaments')}
         </button>
         {isAdmin && (
           <button
             type="button"
             className={sectionBtnClassName}
-            data-context="all"
+            data-context="#all"
             onClick={onChangeContext}
-            disabled={context === 'all'}
+            disabled={context === '#all' || loading}
           >
             {i18n.t('All Tournaments')}
           </button>
         )}
       </div>
+      <div className="cb-separator" />
       <div className="d-flex flex-column mt-2">
         {tournaments.map(t => <TournamentListItem tournament={t} icon={activeIcon} />)}
       </div>

services/app/apps/codebattle/assets/js/widgets/pages/schedule/index.jsx

@@ -0,0 +1,3 @@
+import TournamentSchedule from './TournamentSchedule';
+
+export default TournamentSchedule;

services/app/apps/codebattle/lib/codebattle_web/controllers/tournaments_schedule_controller.ex

@@ -0,0 +1,16 @@
+defmodule CodebattleWeb.TournamentsScheduleController do
+  use CodebattleWeb, :controller
+
+  import PhoenixGon.Controller
+
+  alias Codebattle.StreamConfig
+
+  require Logger
+
+  plug(CodebattleWeb.Plugs.RequireAuth when action in [:index])
+
+  def index(conn, _) do
+    conn
+    |> render("index.html")
+  end
+end

services/app/apps/codebattle/lib/codebattle_web/router.ex

@@ -170,6 +170,7 @@ defmodule CodebattleWeb.Router do
     resources("/tournaments", TournamentController, only: [:index, :show])
 
     get("/stream", StreamController, :index)
+    get("/schedule", TournamentsScheduleController, :index)
     get("/stream/preset", StreamController, :stream_preset)
 
     scope "/tournaments" do

services/app/apps/codebattle/lib/codebattle_web/templates/tournaments_schedule/index.html.heex

@@ -0,0 +1,4 @@
+<div class="container-lg cb-text" id="tournaments-schedule-root"></div>
+<script>
+  window.csrf_token = "<%= csrf_token() %>"
+</script>