[Central_v2] - Merge backend changes

central/package.json

@@ -10,13 +10,15 @@
     "@material-ui/lab": "^4.0.0-alpha.48",
     "@mui/icons-material": "^5.6.2",
     "@mui/material": "^5.13.3",
+    "@react-oauth/google": "^0.12.1",
     "@types/lodash": "^4.14.202",
     "@types/react-router-dom": "^5.1.5",
-    "aws-amplify": "^4.3.36",
+    "aws-sdk": "^2.1573.0",
     "axios": "^1.6.0",
     "babel-loader": "8.1.0",
     "classnames": "^2.2.6",
     "glob-parent": "^6.0.2",
+    "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
     "nth-check": "^2.1.1",
     "postcss": "^8.4.31",

central/src/App.tsx

@@ -6,7 +6,8 @@ import {
   createTheme,
   ThemeProvider,
 } from '@material-ui/core/styles';
-import { APIClients, Environment, AppType } from '@righton/networking';
+import { GoogleOAuthProvider } from '@react-oauth/google';
+import { useAPIClients, Environment, AppType } from '@righton/networking';
 import { RouteContainer } from './containers/RouteContainer';
 import AlertContext, { Alert } from './context/AlertContext';
 
@@ -26,20 +27,24 @@ const theme = createTheme({
 
 function App() {
   const [alert, setAlert] = useState<Alert | null>(null);
-  const apiClients = new APIClients(Environment.Developing, AppType.CENTRAL);
+  const { apiClients, loading } = useAPIClients(Environment.Developing, AppType.CENTRAL);
   const alertContext = {
     alert,
     setAlert,
   };
-
+  
   return (
-    <ThemeProvider theme={theme}>
-      <AlertContext.Provider value={alertContext}>
-        <Router>
-          <RouteContainer setAlert={setAlert} apiClients={apiClients}/>
-        </Router>
-      </AlertContext.Provider>
-    </ThemeProvider>
+    <GoogleOAuthProvider clientId="23009502295-0ut6vmh3km13funjo26p409mgmbkeb76.apps.googleusercontent.com">
+      <ThemeProvider theme={theme}>
+        <AlertContext.Provider value={alertContext}>
+          <Router>
+            { apiClients &&
+              <RouteContainer setAlert={setAlert} apiClients={apiClients}/>
+            }
+          </Router>
+        </AlertContext.Provider>
+      </ThemeProvider>
+    </GoogleOAuthProvider>
   );
 }
 

central/src/components/GameCard.jsx

@@ -14,22 +14,25 @@ import {
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import CCSS from './CCSSText';
 import RightOnPlaceHolder from '../images/RightOnPlaceholder.svg';
+import { PublicPrivateType } from '@righton/networking';
 export default function GameCard({ 
   game,
   index,
   handleClick,
   handleClose,
+  editHandler,
   cloneHandler,
   deleteHandler,
   addquestion,
   match,
   isUserAuth,
   onClick,
   anchorEl,
-  activeIndex
+  activeIndex,
+  publicPrivateQueryType
  }) {
   const classes = useStyles();
-  const { id, title, description, cluster, domain, grade, standard, imageUrl } = game;
+  const { id, title, description, cluster, domain, grade, standard, imageUrl, owner } = game;
   const questionCount = game?.questionTemplates.length || 0;
   const history = useHistory();
     return (
@@ -48,9 +51,16 @@ export default function GameCard({
                     </Typography>
                   </Grid>
                 </Grid>
-                <Typography className={classes.title} >
-                  {title}
-                </Typography>
+                <>
+                  <Typography className={classes.title} >
+                    {title}
+                  </Typography>
+                  { publicPrivateQueryType === PublicPrivateType.PUBLIC &&
+                    <Typography className={classes.owner} >
+                      Created by: {owner}
+                    </Typography>
+                  }
+                </>
                 <Typography className={classes.textSecondary} color="textSecondary" >
                   {description}
                 </Typography>
@@ -76,9 +86,9 @@ export default function GameCard({
                     onClose={handleClose}
                     onClick={(event) => { if (!match) event.stopPropagation(); }}
                   >
-                    <MenuItem onClick={(event) => { history.push(`/gamemaker/${game.id}`); event.stopPropagation(); handleClose(); }}>Edit</MenuItem>
-                    <MenuItem onClick={cloneHandler(game)}>Clone</MenuItem>
-                    <MenuItem onClick={deleteHandler(game.id)}>Delete</MenuItem>
+                    <MenuItem onClick={(event) => editHandler(game, event)}> Edit </MenuItem>
+                    <MenuItem onClick={(event) => cloneHandler(game, event)}>Clone</MenuItem>
+                    <MenuItem onClick={(event) => deleteHandler(game, event)}>Delete</MenuItem>
                   </Menu>             
                 </Grid>
               }
@@ -125,7 +135,13 @@ const useStyles = makeStyles(theme => ({
   },
   title: {
     fontWeight: 700,
-    height: '80%',
+    lineHeight: '1.2',
+    color: '#384466',
+    textOverflow: 'ellipsis',
+  },
+  owner: {
+    fontWeight: 400,
+    height: '60%',
     color: '#384466',
     display: '-webkit-box',
     WebkitBoxOrient: 'vertical',

central/src/components/GameDashboard.jsx

@@ -6,7 +6,7 @@ import LoadingIndicator from './LoadingIndicator';
 import GameCard from './GameCard';
 import InfiniteScroll from 'react-infinite-scroll-component';
 
-export default function GameDashboard({ loading, nextToken, games, handleScrollDown, deleteGame, cloneGameTemplate, gameId, isUserAuth }) {
+export default function GameDashboard({ checkGameOwner, loading, nextToken, publicPrivateQueryType, games, handleScrollDown, deleteGame, cloneGameTemplate, gameId, isUserAuth, setGameDetails }) {
   const classes = useStyles();
   const history = useHistory();
   const match = useRouteMatch('/games/:gameIndex');
@@ -19,19 +19,55 @@ export default function GameDashboard({ loading, nextToken, games, handleScrollD
     event.stopPropagation();
   };
   const handleClose = () => {
-    setAnchorEl(null);
     setActiveIndex(null);
   };
-  const cloneHandler = (game) => () => {
-    cloneGameTemplate(game);
-    handleClose();
+  const editHandler = async (game) => {
+    try {
+      const isOwner = await checkGameOwner(game);
+      if (isOwner){
+       setGameDetails(game);
+       history.push(`/gamemaker/${game.id}`); 
+        handleClose(); 
+      } else {
+        handleClose();
+        alert('You do not have the required authorization to edit this game.');
+      }
+    }catch (error){
+      console.log(error);
+    }
+  };
+
+  const cloneHandler = async (game, event) => {
+    try {
+      const isOwner = await checkGameOwner(game);
+      if (isOwner){
+        cloneGameTemplate(game);
+        handleClose(); 
+      } else {
+        handleClose();
+        alert('You do not have the required authorization to clone this game.');
+      }
+    } catch (error){
+      console.log(error);
+    }
   };
-  const deleteHandler = (id) => () => {
-    const confirmDelete = window.confirm('Are you sure you want to delete this game?');
-    if (confirmDelete) {
-      deleteGame(id);
+
+  const deleteHandler = async (game) => {
+    try {
+      const isOwner = await checkGameOwner(game);
+      if (isOwner){
+        const confirmDelete = window.confirm('Are you sure you want to delete this game?');
+        if (confirmDelete) {
+          deleteGame(game.id);
+        }
+        handleClose();
+      } else {
+        handleClose();
+        alert('You do not have the required authorization to delete this game.');
+      }
+    } catch (error) {
+      console.log(error);
     }
-    handleClose();
   };
 
   const renderGames = (loading) => {
@@ -80,6 +116,7 @@ export default function GameDashboard({ loading, nextToken, games, handleScrollD
                 index={index}
                 handleClick={handleClick}
                 handleClose={handleClose}
+                editHandler={editHandler}
                 cloneHandler={cloneHandler}
                 deleteHandler={deleteHandler}
                 addquestion={addquestion}
@@ -88,6 +125,7 @@ export default function GameDashboard({ loading, nextToken, games, handleScrollD
                 anchorEl={anchorEl}
                 activeIndex={activeIndex}
                 onClick={() => history.push(`/games/${game.id}`)}
+                publicPrivateQueryType={publicPrivateQueryType}
               />
             </Grid>
           ) : 
@@ -107,6 +145,7 @@ const useStyles = makeStyles(theme => ({
   loadingContainer: {
     margin: 'auto',
     width: '60%',
+    height: `calc(100vh - 156px)`
   },
   loadingTitle: {
     fontSize: '24px',

central/src/components/GameLaunch.jsx

@@ -113,7 +113,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function GameLaunch({ loading, game, gameId, saveGame, deleteQuestion, handleDeleteGameTemplate, handleCloneGameTemplate, isUserAuth, handleDeleteGameQuestion }) {
+function GameLaunch({ publicPrivateQueryType, loading, game, gameId, saveGame, deleteQuestion, handleDeleteGameTemplate, handleCloneGameTemplate, isUserAuth, handleDeleteGameQuestion }) {
   useEffect(() => {
     document.title = 'RightOn! | Game launcher';
     return () => { document.title = 'RightOn! | Game management'; }
@@ -171,7 +171,7 @@ function GameLaunch({ loading, game, gameId, saveGame, deleteQuestion, handleDel
   if (loading) return <Skeleton variant="rect" height={500} />;
   const questions = game?.questionTemplates || [];
   const questionCount = game?.questionTemplates.length || 0;
-  const LAUNCH_GAME_URL = `http://host.rightoneducation.com/new/${game.id}`;
+  const LAUNCH_GAME_URL = `http://localhost:3001/new/${publicPrivateQueryType}/${game.id}`;
 
   return (
     <Box className={classes.root}>

central/src/components/GameMaker.jsx

@@ -1,9 +1,9 @@
 import { useState, useEffect } from 'react';
 import { Route, Switch, useHistory } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
-import { Button, IconButton, Divider, Grid, MenuItem, TextField, Typography, Card, CardContent, Box } from '@material-ui/core';
+import { Button, IconButton, Divider, Grid, MenuItem, TextField, Typography, Card, CardContent, Box, Radio } from '@material-ui/core';
 import { Cancel } from '@material-ui/icons';
-import { isNullOrUndefined } from '@righton/networking';
+import { PublicPrivateType, isNullOrUndefined } from '@righton/networking';
 import RightOnPlaceHolder from './../images/RightOnPlaceholder.svg';
 import CCSSText from './CCSSText';
 import GameCCSS from './GameMakerCCSS';
@@ -14,18 +14,6 @@ import SortByDropdown from './SortByDropdown';
 import QuestionDashboard from './QuestionDashboard';
 import { v4 as uuidv4 } from 'uuid';
 
-// New "empty" game
-const newGame = {
-  title: '',
-  description: '',
-  grade: '',
-  domain: '',
-  phaseOneTime: 180,
-  phaseTwoTime: 180,
-  imageUrl: '',
-  questionTemplates: [],
-}
-
 // Preset times
 const times = [
   {
@@ -53,9 +41,12 @@ const times = [
 export default function GameMaker({ 
   loading,
   questions, 
+  gameDetails,
+  setGameDetails,
   game,
   games, 
   handleQuestionBankClick, 
+  handleCreateQuestionTemplateClick,
   selectedQuestions, 
   setSelectedQuestions, 
   saveGameTemplate, 
@@ -79,21 +70,16 @@ export default function GameMaker({
   nextToken,
   localQuestionTemplates,
   setLocalQuestionTemplates,
+  publicPrivateQueryType,
+  handlePublicPrivateChange
 }) {
   useEffect(() => {
     document.title = 'RightOn! | Game editor';
     return () => { document.title = 'RightOn! | Game management'; }
   }, []);
   const classes = useStyles();
   const history = useHistory();
-  const [gameDetails, setGameDetails] = useState(() => {
-    if (game) {
-      return { ...game };
-    }
-    else {
-      return {id: gameId, ...newGame};
-    }
-  });
+
   const calculateCCSS = (localQuestionTemplates) => {
     if (localQuestionTemplates === 'Mashup') 
       return localQuestionTemplates;
@@ -162,6 +148,7 @@ export default function GameMaker({
     setSelectedQuestions([]); 
     setLocalQuestionTemplates([]);
     gameDetails.questionTemplates = localQuestionTemplates;
+    gameDetails.id = gameId;
     if (CCSS === 'Mashup' || CCSS === undefined){
       gameDetails.grade = 'Mashup';
       gameDetails.domain = '';
@@ -179,6 +166,7 @@ export default function GameMaker({
         return { questionTemplateId: question.questionTemplate.id, index: index };
       });
     saveGameTemplate(game, gameDetails);
+    setGameDetails({});
     event.preventDefault();
     history.push('/');
   };
@@ -276,6 +264,27 @@ export default function GameMaker({
                 <Grid container item xs={12} sm={4} justifyContent='center'>
                   {gameDetails.imageUrl ? <img src={gameDetails.imageUrl} alt="" width={'60%'} /> : <img src={RightOnPlaceHolder} alt="Placeholder" height={'275px'} />}
                 </Grid>
+                <Grid container item xs={12} sm={4} style={{display: 'flex', alignItems: 'center', gap: 10}}>
+                  <Typography style={{ fontWeight: 200, fontSize: '1 rem', color: 'rgba(0,0,0,0.75)' }}> Game Type: </Typography>
+                  <Box style={{ display: 'flex', justifyContainer: 'center', alignItems: 'center'}}>
+                    <Typography style={{ fontWeight: 200, fontSize: '15px', color: 'rgba(0,0,0,0.75)' }}> Public </Typography>
+                    <Radio
+                      checked={publicPrivateQueryType === PublicPrivateType.PUBLIC} 
+                      value={PublicPrivateType.PUBLIC} 
+                      onChange={handlePublicPrivateChange} 
+                      color='default'
+                    />
+                  </Box>
+                  <Box style={{display: 'flex', justifyContainer: 'center', alignItems: 'center'}}>
+                    <Typography style={{ fontWeight: 200, fontSize: '15px', color: 'rgba(0,0,0,0.75)'}}> Private </Typography>
+                    <Radio 
+                      checked={publicPrivateQueryType === PublicPrivateType.PRIVATE} 
+                      value={PublicPrivateType.PRIVATE} 
+                      onChange={handlePublicPrivateChange} 
+                      color='default'
+                    />
+                  </Box>
+                </Grid>
               </Grid>
             </Grid>
 
@@ -356,7 +365,7 @@ export default function GameMaker({
                   </Grid>
 
                   <Grid container item xs={6} justifyContent='center'>
-                    <Button variant='contained' disableElevation className={classes.greenButton} onClick={() => history.push(`/gamemaker/${gameDetails.id}/questionmaker/${uuidv4()}`)}>
+                    <Button variant='contained' disableElevation className={classes.greenButton} onClick={() => handleCreateQuestionTemplateClick(gameDetails)}>
                       Create Question
                     </Button>
                   </Grid>