Merge pull request #61 from mikaelrss/feature/#59-delete-rank

Feature/#59 delete rank

backend/src/graphql/resolvers.ts

@@ -1,8 +1,10 @@
 import { IPlayer } from '../api/players';
 import {
-  changePlayer, changeRankName,
+  changePlayer,
+  changeRankName,
   copyRank,
   createRank,
+  deleteRank,
   getRankById,
   getRankByUuid,
   getRanks,
@@ -67,6 +69,10 @@ export const resolvers = {
       await createPlayerList();
       return 'Players inserted from Fantasy Football Nerds';
     },
+    deleteRank: async (_: any, { id }: { id: string }, context: Context) => {
+      await verifyUserCanEditRankByUuid(id, context.user);
+      await deleteRank(id);
+    },
     changeRank: async (root: any, args: IChangeRankArgs, context: Context) => {
       await verifyUserCanEditRankByUuid(args.rankUuid, context.user);
       await changePlayer(

backend/src/graphql/schema.graphql

@@ -19,6 +19,7 @@ type Mutation {
   ): Rank
   createTier(id: String!): Tier!
   deleteTier(id: String!): Tier!
+  deleteRank(id: String!): String
   setRankPrivate(uuid: String!, status: Boolean!): Rank
   #  createTierAndMovePlayers(playerId: String!, originTier: Int!): [Tier!]!
 }

backend/src/repositories/rankRepository.ts

@@ -96,3 +96,9 @@ export const setRankName = async (uuid: string, name: string) => {
   const values = [name, uuid];
   await dbClient.query(query, values);
 };
+
+export const removeRankById = async (id: number) => {
+  const query = `DELETE from draftr.rank where id = $1`;
+  const values = [id];
+  await dbClient.query(query, values);
+};

backend/src/repositories/rankedPlayerRepository.ts

@@ -102,3 +102,9 @@ where draftr.ranked_player.overall_rank >= $2
   const values = [rankId, playerRank, tierId, originalTierId];
   await dbClient.query(query, values);
 };
+
+export const removeRankedPlayersByRankId = async (rankId: number) => {
+  const query = `DELETE from draftr.ranked_player where rank_id = $1`;
+  const values = [rankId];
+  await dbClient.query(query, values);
+};

backend/src/repositories/tierRepository.ts

@@ -85,3 +85,9 @@ export const updateTierName = async (tierUuid: string, name: string) => {
   const values = [name, tierUuid];
   await dbClient.query(query, values);
 };
+
+export const removeTiersByRankId = async (rankId: number) => {
+  const query = `DELETE from draftr.tier where rank_id = $1`;
+  const values = [rankId];
+  await dbClient.query(query, values);
+};

backend/src/services/rankService.ts

@@ -10,7 +10,7 @@ import {
   fetchRankByUuid,
   fetchRanks,
   insertRank,
-  PlayerRank,
+  PlayerRank, removeRankById,
   setRankName,
   updateRankPrivate,
 } from '../repositories/rankRepository';
@@ -19,10 +19,12 @@ import { insertRankedPlayer } from '../repositories/rankedPlayerRepository';
 import { setRankId } from './userPreferenceService';
 import {
   createNewTier,
+  deleteTiersByRankId,
   getTierIdByTierOrder,
   getTiersByRankId,
 } from './tierService';
 import {
+  deleteRankedPlayersByRankId,
   getPlayerRank,
   updatePlayerRank,
   updatePlayerTierCascade,
@@ -230,3 +232,10 @@ export const changeRankName = async (uuid: string, name: string) => {
   await setRankName(uuid, name);
   return await getRankByUuid(uuid);
 };
+
+export const deleteRank = async (uuid: string) => {
+  const rank = await getRankByUuid(uuid);
+  await deleteRankedPlayersByRankId(rank.id);
+  await deleteTiersByRankId(rank.id);
+  await removeRankById(rank.id);
+};

backend/src/services/rankedPlayerService.ts

@@ -2,6 +2,7 @@ import { fetchPlayerRank } from '../repositories/userPreferenceRepository';
 import {
   downgradePosition,
   fetchPlayersByTierId,
+  removeRankedPlayersByRankId,
   updateOverallPosition,
   updateTier,
   updateTierCascade,
@@ -42,3 +43,7 @@ export const updatePlayerTierCascade = async (
 ) => {
   await updateTierCascade(rankId, playerRank, originalTier, destinationTier);
 };
+
+export const deleteRankedPlayersByRankId = async (rankId: number) => {
+  await removeRankedPlayersByRankId(rankId);
+};

backend/src/services/tierService.ts

@@ -10,7 +10,7 @@ import {
   fetchTierByTierOrder,
   fetchTierByUuid,
   insertTier,
-  removeTierByUuid,
+  removeTierByUuid, removeTiersByRankId,
   TierEntity,
   updateTierName,
   updateTierOrder,
@@ -120,3 +120,7 @@ export const verifyUserCanEditTier = async (tierUuid: string, user: string) => {
     throw new ForbiddenError("You don't own this Tier");
   }
 };
+
+export const deleteTiersByRankId = async (rankId: number) => {
+  await removeTiersByRankId(rankId);
+};

frontend/public/index.html

@@ -8,6 +8,21 @@
         }
       }
     </script>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=UA-142151658-1"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'UA-142151658-1');
+    </script>
+
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta

frontend/src/components/addrank/AddRank.tsx

@@ -4,7 +4,7 @@ import { css, StyleSheet } from 'aphrodite/no-important';
 import Form from 'react-valid8';
 
 import { IconType } from '../shared/Icon';
-import { Button, IconButton } from '../shared/Button';
+import { PrimaryButton, IconButton } from '../shared/Button';
 import { DEFAULT_PADDING } from '../../styles/constants';
 import Paper from '../shared/Paper';
 import Input from '../shared/Input';
@@ -85,7 +85,7 @@ const AddRank = () => {
                 }}
               >
                 <Input name="name" id="tier_name" label="Name" />
-                <Button type="submit" value="Create Rank" loading={loading} />
+                <PrimaryButton type="submit" value="Create Rank" loading={loading} />
               </Form>
               <IconButton
                 className={css(styles.close)}

frontend/src/components/appheader/AppHeader.tsx

@@ -5,7 +5,7 @@ import { css, StyleSheet } from 'aphrodite/no-important';
 
 import { PRIMARY, PRIMARY_TEXT } from '../../styles/colors';
 import { DEFAULT_PADDING, MOBILE_BREAKPOINT } from '../../styles/constants';
-import { Button, ClickableSurface } from '../shared/Button';
+import { PrimaryButton, ClickableSurface } from '../shared/Button';
 import AuthContext from '../../auth/AuthContext';
 import ProfileInfo from '../profileinfo/ProfileInfo';
 import Icon, { IconType } from '../shared/Icon';
@@ -27,7 +27,8 @@ const styles = StyleSheet.create({
     color: PRIMARY_TEXT,
     justifyContent: 'space-between',
     [MOBILE_BREAKPOINT]: {
-      fontSize: '0.7em',
+      fontSize: '0.5em',
+      padding: `0 ${DEFAULT_PADDING / 4}px`,
     },
   },
   icon: {
@@ -57,7 +58,7 @@ const AppHeader = () => {
         <Icon icon={IconType.draftr} className={css(styles.icon)} />
         <div>Draftr</div>
       </Link>
-      {!auth.isAuthenticated() && <Button onClick={auth.login} value="Login" />}
+      {!auth.isAuthenticated() && <PrimaryButton onClick={auth.login} value="Login" />}
       {auth.isAuthenticated() && (
         <>
           <Route path="/rank/:id" component={DraftMode} />

frontend/src/components/appheader/headersettings/DraftMode.tsx

@@ -5,17 +5,14 @@ import { IState } from '../../../redux/store';
 import { toggleActivationStatus } from './draftModeActions';
 import Typography, { FontSize } from '../../shared/Typography';
 import { StyleSheet, css } from 'aphrodite/no-important';
-import { DEFAULT_PADDING } from '../../../styles/constants';
 
 const styles = StyleSheet.create({
   container: {
     display: 'flex',
+    flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
   },
-  label: {
-    marginRight: `${DEFAULT_PADDING}px`,
-  },
 });
 
 interface DispatchProps {
@@ -31,9 +28,7 @@ type Props = DispatchProps & StateProps;
 const DraftMode = ({ toggleDraftMode, draftModeStatus }: Props) => {
   return (
     <div className={css(styles.container)}>
-      <Typography size={FontSize.medium} className={css(styles.label)}>
-        Draft Mode
-      </Typography>
+      <Typography size={FontSize.medium}>Draft Mode</Typography>
       <Toggle checked={draftModeStatus} onChange={toggleDraftMode} />
     </div>
   );

frontend/src/components/confirmationdialog/ConfirmationDialog.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Paper from '../shared/Paper';
+import Typography, { FontSize, FontStyle } from '../shared/Typography';
+import { PrimaryButton, SecondaryButton } from '../shared/Button';
+
+import { StyleSheet, css } from 'aphrodite/no-important';
+import { DEFAULT_PADDING } from '../../styles/constants';
+import { loadConfigurationFromPath } from 'tslint/lib/configuration';
+
+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  buttonContainer: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    marginTop: `${DEFAULT_PADDING}px`,
+  },
+});
+
+interface Props {
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  text?: string;
+  loading?: boolean;
+}
+
+const ConfirmationDialog = ({ onCancel, onConfirm, text, loading }: Props) => (
+  <Paper className={css(styles.container)}>
+    {!!text && (
+      <Typography size={FontSize.small} style={FontStyle.secondary}>
+        {text}
+      </Typography>
+    )}
+    <div className={css(styles.buttonContainer)}>
+      <SecondaryButton value="Cancel" onClick={onCancel} />
+      <PrimaryButton value="Delete" onClick={onConfirm} loading={loading} />
+    </div>
+  </Paper>
+);
+
+export default ConfirmationDialog;

frontend/src/components/copyrank/CopyRank.tsx

@@ -3,7 +3,7 @@ import Form from 'react-valid8';
 import { Mutation } from 'react-apollo';
 import { Redirect } from 'react-router-dom';
 import Typography, { FontSize } from '../shared/Typography';
-import { Button } from '../shared/Button';
+import { PrimaryButton } from '../shared/Button';
 
 import { css, StyleSheet } from 'aphrodite/no-important';
 import { COPY_RANK } from './graphql';
@@ -17,16 +17,15 @@ import Paper from '../shared/Paper';
 
 const styles = StyleSheet.create({
   copyRank: {
-    height: '160px',
+    opacity: 0.3,
+    transition: 'all ease-in-out 200ms',
+    ':hover': { opacity: 1 },
+    ':focus-within': { opacity: 1 },
   },
   form: {
-    transition: 'all ease-in-out 200ms',
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
-    opacity: 0.3,
-    ':hover': { opacity: 1 },
-    ':focus-within': { opacity: 1 },
   },
 });
 
@@ -56,6 +55,10 @@ const CopyRank = ({ rank }: Props) => {
           <div>
             <Typography size={FontSize.large}>Copy this rank!</Typography>
             <Paper className={css(styles.copyRank)}>
+              <Typography size={FontSize.small}>
+                Enter a name to create a new copy of this rank which you can
+                freely edit as you wish!
+              </Typography>
               <Form
                 formClassName={css(styles.form)}
                 validate={validate}
@@ -71,7 +74,7 @@ const CopyRank = ({ rank }: Props) => {
                 }}
               >
                 <Input name="name" id="tier_name" label="Name" />
-                <Button
+                <PrimaryButton
                   type="submit"
                   value="Create Rank"
                   loading={loading}

frontend/src/components/profileinfo/ProfileInfo.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, css } from 'aphrodite';
 import AuthContext from '../../auth/AuthContext';
 import { IIdTokenPayload } from '../../auth/Auth';
 import { DEFAULT_PADDING, MOBILE_BREAKPOINT } from '../../styles/constants';
-import { Button } from '../shared/Button';
+import { PrimaryButton } from '../shared/Button';
 
 const IMAGE_SIZE = 40;
 const MOBILE_IMAGE_SIZE = 30;
@@ -25,6 +25,11 @@ const styles = StyleSheet.create({
       height: `${MOBILE_IMAGE_SIZE}px`,
     },
   },
+  name: {
+    [MOBILE_BREAKPOINT]: {
+      display: 'none',
+    },
+  },
   logout: {
     marginLeft: `${DEFAULT_PADDING / 2}px`,
   },
@@ -37,8 +42,8 @@ const ProfileInfo = () => {
   return (
     <div className={css(styles.info)}>
       <img src={idTokenPayload.picture} className={css(styles.picture)} />
-      <div>{idTokenPayload.given_name}</div>
-      <Button
+      <div className={css(styles.name)}>{idTokenPayload.given_name}</div>
+      <PrimaryButton
         onClick={auth.logout}
         className={css(styles.logout)}
         value="Logout"

frontend/src/components/rankings/Rankings.tsx

@@ -25,6 +25,8 @@ import RateRank from '../raterank/RateRank';
 import CopyRank from '../copyrank/CopyRank';
 import RankHeader from './rankheader/RankHeader';
 import { generateOptimisticRankChange } from './utils';
+import { PrimaryButton } from '../shared/Button';
+import DeleteRank from './deleterank/DeleteRank';
 
 const styles = StyleSheet.create({
   container: {
@@ -149,6 +151,7 @@ const Rankings = ({ changeRankMutation, match }: Props) => {
           ))}
           {userOwnsRank && <AddTier />}
           <CopyRank rank={data.rank} />
+          {userOwnsRank && <DeleteRank uuid={data.rank.uuid} />}
         </DragDropContext>
         {!userOwnsRank && <RateRank rank={data.rank} />}
       </div>