From 833fe1280c8cca90111f3415549796debb62fdf0 Mon Sep 17 00:00:00 2001
From: Albin Henriksson <albhe428@student.liu.se>
Date: Tue, 20 Apr 2021 08:41:08 +0000
Subject: [PATCH] Resolve "Fix redux actions in editor"
---
.../PresentationEditorPage.tsx | 20 ++++++++++++++++---
.../components/CompetitionSettings.tsx | 1 -
.../src/pages/presentationEditor/styled.tsx | 7 +++++++
client/src/reducers/editorReducer.ts | 3 +++
4 files changed, 27 insertions(+), 4 deletions(-)
diff --git a/client/src/pages/presentationEditor/PresentationEditorPage.tsx b/client/src/pages/presentationEditor/PresentationEditorPage.tsx
index 0bfea0c4..c6f5acec 100644
--- a/client/src/pages/presentationEditor/PresentationEditorPage.tsx
+++ b/client/src/pages/presentationEditor/PresentationEditorPage.tsx
@@ -1,4 +1,4 @@
-import { Divider, Typography } from '@material-ui/core'
+import { CircularProgress, Divider, Typography } from '@material-ui/core'
import AppBar from '@material-ui/core/AppBar'
import CssBaseline from '@material-ui/core/CssBaseline'
import Drawer from '@material-ui/core/Drawer'
@@ -13,7 +13,14 @@ import { useAppDispatch, useAppSelector } from '../../hooks'
import { Content } from '../views/styled'
import SettingsPanel from './components/SettingsPanel'
import SlideEditor from './components/SlideEditor'
-import { PresentationEditorContainer, SlideListItem, ToolBarContainer, ViewButton, ViewButtonGroup } from './styled'
+import {
+ CenteredSpinnerContainer,
+ PresentationEditorContainer,
+ SlideListItem,
+ ToolBarContainer,
+ ViewButton,
+ ViewButtonGroup,
+} from './styled'
function createSlide(name: string) {
return { name }
@@ -66,6 +73,7 @@ const PresentationEditorPage: React.FC = () => {
const dispatch = useAppDispatch()
const activeSlideId = useAppSelector((state) => state.editor.activeSlideId)
const competition = useAppSelector((state) => state.editor.competition)
+ const competitionLoading = useAppSelector((state) => state.editor.loading)
// TODO: wait for dispatch to finish
useEffect(() => {
dispatch(getEditorCompetition(id))
@@ -131,7 +139,13 @@ const PresentationEditorPage: React.FC = () => {
}}
anchor="right"
>
- <SettingsPanel></SettingsPanel>
+ {!competitionLoading ? (
+ <SettingsPanel />
+ ) : (
+ <CenteredSpinnerContainer>
+ <CircularProgress />
+ </CenteredSpinnerContainer>
+ )}
</Drawer>
<Content leftDrawerWidth={leftDrawerWidth} rightDrawerWidth={rightDrawerWidth}>
diff --git a/client/src/pages/presentationEditor/components/CompetitionSettings.tsx b/client/src/pages/presentationEditor/components/CompetitionSettings.tsx
index 75f6ed13..6791ce54 100644
--- a/client/src/pages/presentationEditor/components/CompetitionSettings.tsx
+++ b/client/src/pages/presentationEditor/components/CompetitionSettings.tsx
@@ -64,7 +64,6 @@ const CompetitionSettings: React.FC = () => {
const { id }: CompetitionParams = useParams()
const dispatch = useAppDispatch()
const competition = useAppSelector((state) => state.editor.competition)
-
const updateCompetitionName = async (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
await axios
.put(`/competitions/${id}`, { name: event.target.value })
diff --git a/client/src/pages/presentationEditor/styled.tsx b/client/src/pages/presentationEditor/styled.tsx
index 462acf2e..a2c6e6f7 100644
--- a/client/src/pages/presentationEditor/styled.tsx
+++ b/client/src/pages/presentationEditor/styled.tsx
@@ -23,3 +23,10 @@ export const SlideListItem = styled(ListItem)`
export const PresentationEditorContainer = styled.div`
height: 100%;
`
+
+export const CenteredSpinnerContainer = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+`
diff --git a/client/src/reducers/editorReducer.ts b/client/src/reducers/editorReducer.ts
index 627c1658..81b10c32 100644
--- a/client/src/reducers/editorReducer.ts
+++ b/client/src/reducers/editorReducer.ts
@@ -5,6 +5,7 @@ import { RichCompetition } from '../interfaces/ApiRichModels'
interface EditorState {
competition: RichCompetition
activeSlideId: number
+ loading: boolean
}
const initialState: EditorState = {
@@ -17,6 +18,7 @@ const initialState: EditorState = {
teams: [],
},
activeSlideId: 0,
+ loading: true,
}
export default function (state = initialState, action: AnyAction) {
@@ -25,6 +27,7 @@ export default function (state = initialState, action: AnyAction) {
return {
competition: action.payload as RichCompetition,
activeSlideId: action.payload.slides[0].id as number,
+ loading: false,
}
case Types.SET_EDITOR_SLIDE_ID:
return {
--
GitLab