From cb397096d5a4a24965610bc6b74ecb15940aac9f Mon Sep 17 00:00:00 2001
From: Peter - Ubuntu dual boot <pjw.uni@gmail.com>
Date: Sat, 18 Sep 2021 21:49:28 +0100
Subject: [PATCH] Transparent disabled buttons, but not resetting disabled
 state on picture change, unless sidebar is closed.

---
 api/graph/schema.graphqls                     | 28 ++++++++++
 api/graphql/generated.go                      | 27 ++++++++--
 api/graphql/resolvers/album.go                |  2 +-
 api/graphql/schema.graphql                    |  2 +
 ui/src/components/sidebar/AlbumCovers.tsx     | 54 ++++++++++---------
 .../sidebar/__generated__/resetAlbumCover.ts  |  2 +-
 .../sidebar/__generated__/setAlbumCover.ts    |  2 +-
 7 files changed, 87 insertions(+), 30 deletions(-)
 create mode 100644 api/graph/schema.graphqls

diff --git a/api/graph/schema.graphqls b/api/graph/schema.graphqls
new file mode 100644
index 00000000..f6e1bac5
--- /dev/null
+++ b/api/graph/schema.graphqls
@@ -0,0 +1,28 @@
+# GraphQL schema example
+#
+# https://gqlgen.com/getting-started/
+
+type Todo {
+  id: ID!
+  text: String!
+  done: Boolean!
+  user: User!
+}
+
+type User {
+  id: ID!
+  name: String!
+}
+
+type Query {
+  todos: [Todo!]!
+}
+
+input NewTodo {
+  text: String!
+  userId: String!
+}
+
+type Mutation {
+  createTodo(input: NewTodo!): Todo!
+}
\ No newline at end of file
diff --git a/api/graphql/generated.go b/api/graphql/generated.go
index 36d4d2a9..58554ec2 100644
--- a/api/graphql/generated.go
+++ b/api/graphql/generated.go
@@ -1935,7 +1935,7 @@ type Album {
     paginate: Pagination
   ): [Album!]!
 
-  "The album witch contains this album"
+  "The album which contains this album"
   parentAlbum: Album
   "The user who owns this album"
   owner: User!
@@ -3367,9 +3367,9 @@ func (ec *executionContext) _Album_coverID(ctx context.Context, field graphql.Co
 		}
 		return graphql.Null
 	}
-	res := resTmp.(int)
+	res := resTmp.(*int)
 	fc.Result = res
-	return ec.marshalNInt2int(ctx, field.Selections, res)
+	return ec.marshalNInt2ᚖint(ctx, field.Selections, res)
 }
 
 func (ec *executionContext) _AuthorizeResult_success(ctx context.Context, field graphql.CollectedField, obj *models.AuthorizeResult) (ret graphql.Marshaler) {
@@ -12238,6 +12238,27 @@ func (ec *executionContext) marshalNInt2int64(ctx context.Context, sel ast.Selec
 	return res
 }
 
+func (ec *executionContext) unmarshalNInt2ᚖint(ctx context.Context, v interface{}) (*int, error) {
+	res, err := graphql.UnmarshalInt(v)
+	return &res, graphql.ErrorOnPath(ctx, err)
+}
+
+func (ec *executionContext) marshalNInt2ᚖint(ctx context.Context, sel ast.SelectionSet, v *int) graphql.Marshaler {
+	if v == nil {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := graphql.MarshalInt(*v)
+	if res == graphql.Null {
+		if !graphql.HasFieldError(ctx, graphql.GetFieldContext(ctx)) {
+			ec.Errorf(ctx, "must not be null")
+		}
+	}
+	return res
+}
+
 func (ec *executionContext) marshalNMedia2githubᚗcomᚋphotoviewᚋphotoviewᚋapiᚋgraphqlᚋmodelsᚐMedia(ctx context.Context, sel ast.SelectionSet, v models.Media) graphql.Marshaler {
 	return ec._Media(ctx, sel, &v)
 }
diff --git a/api/graphql/resolvers/album.go b/api/graphql/resolvers/album.go
index 6c400382..bfce5459 100644
--- a/api/graphql/resolvers/album.go
+++ b/api/graphql/resolvers/album.go
@@ -272,7 +272,7 @@ func (r *mutationResolver) ResetAlbumCover(ctx context.Context, albumID int) (*m
 		return nil, errors.New("forbidden")
 	}
 
-	if err := r.Database.Model(&album).Update("cover_id", 0).Error; err != nil {
+	if err := r.Database.Model(&album).Update("cover_id", nil).Error; err != nil {
 		return nil, err
 	}
 
diff --git a/api/graphql/schema.graphql b/api/graphql/schema.graphql
index e5344914..f765eafd 100644
--- a/api/graphql/schema.graphql
+++ b/api/graphql/schema.graphql
@@ -278,6 +278,8 @@ type Album {
   path: [Album!]!
 
   shares: [ShareToken!]!
+
+  coverID: Int!
 }
 
 type MediaURL {
diff --git a/ui/src/components/sidebar/AlbumCovers.tsx b/ui/src/components/sidebar/AlbumCovers.tsx
index 51c99494..ec63622b 100644
--- a/ui/src/components/sidebar/AlbumCovers.tsx
+++ b/ui/src/components/sidebar/AlbumCovers.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useMutation, gql } from '@apollo/client'
 import { useTranslation } from 'react-i18next'
 
@@ -35,14 +35,16 @@ type SidebarPhotoCoverProps = {
 export const SidebarPhotoCover = ({ cover_id }: SidebarPhotoCoverProps) => {
   const { t } = useTranslation()
 
-  const [setAlbumCover, { loading }] = useMutation<
-    setAlbumCover,
-    setAlbumCoverVariables
-  >(SET_ALBUM_COVER_MUTATION, {
-    variables: {
-      coverID: cover_id,
-    },
-  })
+  const [setAlbumCover] = useMutation<setAlbumCover, setAlbumCoverVariables>(
+    SET_ALBUM_COVER_MUTATION,
+    {
+      variables: {
+        coverID: cover_id,
+      },
+    }
+  )
+
+  const [buttonDisabled, setButtonDisabled] = useState(false)
 
   return (
     <SidebarSection>
@@ -55,14 +57,15 @@ export const SidebarPhotoCover = ({ cover_id }: SidebarPhotoCoverProps) => {
             <tr className="text-left border-gray-100 border-b border-t">
               <td colSpan={2} className="pl-4 py-2">
                 <button
-                  className="text-green-500 font-bold uppercase text-xs"
-                  disabled={loading}
+                  className="disabled:opacity-50 text-green-500 font-bold uppercase text-xs"
+                  disabled={buttonDisabled}
                   onClick={() => {
-                    setAlbumCover({
-                      variables: {
-                        coverID: cover_id,
-                      },
-                    })
+                    setButtonDisabled(true),
+                      setAlbumCover({
+                        variables: {
+                          coverID: cover_id,
+                        },
+                      })
                   }}
                 >
                   <span>
@@ -85,7 +88,7 @@ type SidebarAlbumCoverProps = {
 export const SidebarAlbumCover = ({ id }: SidebarAlbumCoverProps) => {
   const { t } = useTranslation()
 
-  const [resetAlbumCover, { loading }] = useMutation<
+  const [resetAlbumCover] = useMutation<
     resetAlbumCover,
     resetAlbumCoverVariables
   >(RESET_ALBUM_COVER_MUTATION, {
@@ -94,6 +97,8 @@ export const SidebarAlbumCover = ({ id }: SidebarAlbumCoverProps) => {
     },
   })
 
+  const [buttonDisabled, setButtonDisabled] = useState(false)
+
   return (
     <SidebarSection>
       <SidebarSectionTitle>
@@ -105,14 +110,15 @@ export const SidebarAlbumCover = ({ id }: SidebarAlbumCoverProps) => {
             <tr className="text-left border-gray-100 border-b border-t">
               <td colSpan={2} className="pl-4 py-2">
                 <button
-                  className="text-red-500 font-bold uppercase text-xs"
-                  disabled={loading}
+                  className="disabled:opacity-50 text-red-500 font-bold uppercase text-xs"
+                  disabled={buttonDisabled}
                   onClick={() => {
-                    resetAlbumCover({
-                      variables: {
-                        albumID: id,
-                      },
-                    })
+                    setButtonDisabled(true),
+                      resetAlbumCover({
+                        variables: {
+                          albumID: id,
+                        },
+                      })
                   }}
                 >
                   <span>
diff --git a/ui/src/components/sidebar/__generated__/resetAlbumCover.ts b/ui/src/components/sidebar/__generated__/resetAlbumCover.ts
index c9410349..dbd452fc 100644
--- a/ui/src/components/sidebar/__generated__/resetAlbumCover.ts
+++ b/ui/src/components/sidebar/__generated__/resetAlbumCover.ts
@@ -14,7 +14,7 @@ export interface resetAlbumCover_resetAlbumCover {
 
 export interface resetAlbumCover {
   /**
-   * Reset the assigned cover image for an album
+   * Reset the assigned cover photo for an album
    */
   resetAlbumCover: resetAlbumCover_resetAlbumCover
 }
diff --git a/ui/src/components/sidebar/__generated__/setAlbumCover.ts b/ui/src/components/sidebar/__generated__/setAlbumCover.ts
index 6df1e641..beba8fa0 100644
--- a/ui/src/components/sidebar/__generated__/setAlbumCover.ts
+++ b/ui/src/components/sidebar/__generated__/setAlbumCover.ts
@@ -14,7 +14,7 @@ export interface setAlbumCover_setAlbumCover {
 
 export interface setAlbumCover {
   /**
-   * Assign a cover image to an album
+   * Assign a cover photo to an album
    */
   setAlbumCover: setAlbumCover_setAlbumCover
 }