Merge pull request #386 from vevcom/chore/remove-image-ntnu-from-src

Chore/Licenses

src/actions/images/create.ts

@@ -1,49 +1,7 @@
 'use server'
-import { safeServerCall } from '@/actions/safeServerCall'
-import { createZodActionError } from '@/actions/error'
-import { createImage } from '@/services/images/create'
-import { createImagesValidation, createImageValidation } from '@/services/images/validation'
-import type { ActionReturn } from '@/actions/Types'
-import type { Image } from '@prisma/client'
-import type { CreateImageTypes, CreateImagesTypes } from '@/services/images/validation'
+import { Action } from '@/actions/Action'
+import { Images } from '@/services/images'
 
-export async function createImageAction(
-    collectionId: number,
-    rawdata: FormData | CreateImageTypes['Type']
-): Promise<ActionReturn<Image>> {
-    //TODO: add auth
+export const createImageAction = Action(Images.create)
 
-    const parse = createImageValidation.typeValidate(rawdata)
-    if (!parse.success) return createZodActionError(parse)
-    const data = parse.data
-
-    return await safeServerCall(() => createImage({ ...data, collectionId }))
-}
-
-export async function createImagesAction(
-    useFileName: boolean,
-    collectionId: number,
-    rawdata: FormData | CreateImagesTypes['Type']
-): Promise<ActionReturn<void>> {
-    //TODO: add auth
-
-    const parse = createImagesValidation.typeValidate(rawdata)
-
-    if (!parse.success) return createZodActionError(parse)
-
-    const data = parse.data
-
-    let finalReturn: ActionReturn<void> = { success: true, data: undefined }
-    for (const file of data.files) {
-        const name = useFileName ? file.name.split('.')[0] : undefined
-        const ret = await safeServerCall(
-            () => createImage({ file, name, alt: file.name.split('.')[0], collectionId })
-        )
-        if (!ret.success) return ret
-        finalReturn = {
-            ...finalReturn,
-            success: ret.success,
-        }
-    }
-    return finalReturn
-}
+export const createImagesAction = Action(Images.createMany)

src/actions/images/read.ts

@@ -1,56 +1,19 @@
 'use server'
-import { safeServerCall } from '@/actions/safeServerCall'
-import { createActionError } from '@/actions/error'
-import { readImage, readImagesPage, readSpecialImage } from '@/services/images/read'
-import { createBadImage } from '@/services/images/create'
-import { SpecialImage } from '@prisma/client'
-import type { Image } from '@prisma/client'
-import type { ReadPageInput } from '@/lib/paging/Types'
-import type { ActionReturn } from '@/actions/Types'
-import type { ImageDetails, ImageCursor } from '@/services/images/Types'
+import { ActionNoData } from '@/actions/Action'
+import { Images } from '@/services/images'
+
 
 /**
  * Read one page of images.
- * @param pageReadInput - the page with details and page.
- * @returns
  */
-export async function readImagesPageAction<const PageSize extends number>(
-    pageReadInput: ReadPageInput<PageSize, ImageCursor, ImageDetails>
-): Promise<ActionReturn<Image[]>> {
-    //TODO: auth route based on collection
-    return await safeServerCall(() => readImagesPage(pageReadInput))
-}
+export const readImagesPageAction = ActionNoData(Images.readPage)
 
 /**
  * Read one image.
- * @param nameOrId - the name or id of the image to read
- * @returns
- */
-export async function readImageAction(id: number): Promise<ActionReturn<Image>> {
-    //TODO: auth route based on collection
-    return await safeServerCall(() => readImage(id))
-}
+*/
+export const readImageAction = ActionNoData(Images.read)
 
 /**
- * Action that reads a "special" image - read on this in the docs. If it does not exist it will create it, but
- * its conntent will not be the intended content. This is NOT under any circomstainses supposed to happen
- * @param special - the special image to read
- * @returns the special image
+ * Read one special image.
  */
-export async function readSpecialImageAction(special: SpecialImage): Promise<ActionReturn<Image>> {
-    if (!Object.values(SpecialImage).includes(special)) {
-        return createActionError('BAD PARAMETERS', `${special} is not special`)
-    }
-    //TODO: auth image based on collection
-    const imageRes = await safeServerCall(() => readSpecialImage(special))
-    if (!imageRes.success) {
-        if (imageRes.errorCode === 'NOT FOUND') {
-            return await safeServerCall(() => createBadImage(special, {
-                special,
-            }))
-        }
-        return imageRes
-    }
-    const image = imageRes.data
-    return { success: true, data: image }
-}
+export const readSpecialImageAction = ActionNoData(Images.readSpecial)

src/actions/licenses/create.ts

@@ -0,0 +1,5 @@
+'use server'
+import { Action } from '@/actions/Action'
+import { Licenses } from '@/services/licenses'
+
+export const createLicenseAction = Action(Licenses.create)

src/actions/licenses/destroy.ts

@@ -0,0 +1,5 @@
+'use server'
+import { ActionNoData } from '@/actions/Action'
+import { Licenses } from '@/services/licenses'
+
+export const destroyLicenseAction = ActionNoData(Licenses.destroy)

src/actions/licenses/read.ts

@@ -0,0 +1,7 @@
+'use server'
+
+import { ActionNoData } from '@/actions/Action'
+import { Licenses } from '@/services/licenses'
+
+
+export const readLicensesAction = ActionNoData(Licenses.readAll)

src/actions/licenses/update.ts

@@ -0,0 +1,6 @@
+'use server'
+
+import { Licenses } from '@/services/licenses'
+import { Action } from '@/actions/Action'
+
+export const updateLicenseAction = Action(Licenses.update)

src/app/(home)/Section.module.scss

@@ -31,14 +31,14 @@
                 color: ohma.$colors-white;
             }
         }
-        a {
+        .readMore {
             @include ohma.borderBtn(ohma.$colors-primary);
         }
     }
     &:not(.blue) {
         background-color: ohma.$colors-white;
         color: ohma.$colors-black;
-        a {
+        .readMore {
             @include ohma.borderBtn(ohma.$colors-secondary);
         }
     }

src/app/(home)/Section.tsx

@@ -28,7 +28,7 @@ function Section({ specialCmsImage, specialCmsParagraph, lesMer, right, imgWidth
             {!right && imgContainer}
             <div>
                 <SpecialCmsParagraph className={styles.paragraph} special={specialCmsParagraph} />
-                <Link href={lesMer}>Les mer</Link>
+                <Link className={styles.readMore} href={lesMer}>Les mer</Link>
             </div>
             {right && imgContainer}
         </div>

src/app/_components/Cms/CmsImage/CmsImage.tsx

@@ -37,7 +37,7 @@ export default async function CmsImage({
 }: PropTypes) {
     let image = cmsImage.image
     if (!image) {
-        const defaultRes = await readSpecialImageAction('DEFAULT_IMAGE')
+        const defaultRes = await readSpecialImageAction.bind(null, { special: 'DEFAULT_IMAGE' })()
         if (!defaultRes.success) return <SrcImage src={fallbackImage} {...props}/>
         image = defaultRes.data
     }

src/app/_components/Cms/CmsImage/CmsImageClient.tsx

@@ -30,7 +30,7 @@ export default function CmsImageClient({
 
     useEffect(() => {
         if (image) return
-        readSpecialImageAction('DEFAULT_IMAGE').then(res => {
+        readSpecialImageAction.bind(null, { special: 'DEFAULT_IMAGE' })().then(res => {
             if (!res.success) return setFallback(true)
             return setCmsImage(res.data)
         })

src/app/_components/Form/Form.module.scss

@@ -40,4 +40,8 @@
             }
         }
     }
-}
+    .submitButton {
+        margin: 0;
+    }
+}
+

src/app/_components/Form/Form.tsx

@@ -148,7 +148,7 @@ export default function Form<GiveActionReturn, DataGuarantee extends boolean>({
                 success={success}
                 generalErrors={generalErrors}
                 confirmation={confirmation}
-                className={buttonClassName}
+                className={`${buttonClassName} ${styles.submitButton}`}
             >
                 {submitText}
             </SubmitButton>

src/app/_components/Image/Image.module.scss

@@ -5,10 +5,55 @@
     margin: 0;
     box-sizing: border-box;
     display: flex;
+    flex-direction: column;
 
     > img {
         margin: 0;
         width: 100%;
         height: 100%;
     }
-}
+
+    .credit {
+        position: absolute;
+        background-color: rgba(ohma.$colors-gray-300, .5);
+        &.bottom {
+            bottom: 0;
+            left: 0;
+        }
+        &.top {
+            top: 0;
+            left: 0;
+        }
+        padding: .5em
+    }
+
+    .license {
+        position: absolute;
+        right: 0;
+        top: 0;
+        text-decoration: none;
+        color: ohma.$colors-black;
+        z-index: 2;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-around;
+        svg {
+            color: ohma.$colors-white;
+            width: 20px;
+            height: 20px;
+            margin: .6em;
+        }
+        a, p {
+            display: none;
+            font-size: ohma.$fonts-s;
+            margin-left: .5em;
+        }
+        &:hover {
+            background-color: rgba(ohma.$colors-gray-300, .9);
+            a, p {
+                display: inline;
+            }
+        }
+    }
+}

src/app/_components/Image/Image.tsx

@@ -1,6 +1,9 @@
 import styles from './Image.module.scss'
-import type { ImageProps } from 'next/image'
+import Link from 'next/link'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCopyright } from '@fortawesome/free-solid-svg-icons'
 import type { Image, ImageSize, Image as ImageT } from '@prisma/client'
+import type { ImageProps } from 'next/image'
 
 export type ImageSizeOptions = ImageSize | 'ORIGINAL'
 
@@ -10,6 +13,10 @@ export type PropTypes = Omit<ImageProps, 'src' | 'alt'> & {
     alt?: string,
     smallSize?: boolean,
     imageContainerClassName?: string,
+    creditPlacement?: 'top' | 'bottom',
+    hideCredit?: boolean,
+    hideCopyRight?: boolean,
+    disableLinkingToLicense?: boolean,
 } & (
     | { imageSize?: never, smallSize?: never, largeSize?: boolean }
     | { imageSize?: never, smallSize?: boolean, largeSize?: never }
@@ -24,6 +31,12 @@ export type PropTypes = Omit<ImageProps, 'src' | 'alt'> & {
  * @param smallSize - (optional) if true, the image will be the small size
  * @param largeSize - (optional) if true, the image will be the large size
  * @param imageSize - (optional) the size of the image
+ * @param imageContainerClassName - (optional) the class name of the
+ * @param creditPlacement - (optional) the placement of the credit
+ * @param hideCredit - (optional) if true, the credit will be hidden
+ * @param hideCopyRight - (optional) if true, the copy right will be hidden
+ * @param disableLinkingToLicense - (optional) if true, the license will not be linked rather
+ * the name will be disblayed alone
  * @param props - the rest of the props to pass to the img tag
  */
 export default function Image({
@@ -34,6 +47,10 @@ export default function Image({
     largeSize,
     imageSize,
     imageContainerClassName,
+    creditPlacement = 'bottom',
+    hideCredit = false,
+    hideCopyRight = false,
+    disableLinkingToLicense = false,
     ...props
 }: PropTypes) {
     let url = `/store/images/${image.fsLocationMediumSize}`
@@ -65,6 +82,17 @@ export default function Image({
                 alt={alt || image.alt}
                 src={url}
             />
+            {image.credit && !hideCredit && <p className={`${styles.credit} ${styles[creditPlacement]}`}>{image.credit}</p>}
+            {!hideCopyRight && image.licenseLink && (
+                <div className={styles.license}>
+                    {disableLinkingToLicense ? <p>{image.licenseName}</p> : (
+                        <Link href={image.licenseLink} target="_blank" referrerPolicy="no-referrer">
+                            {image.licenseName}
+                        </Link>
+                    )}
+                    <FontAwesomeIcon icon={faCopyright}/>
+                </div>
+            )}
         </div>
     )
 }

src/app/_components/Image/ImageList/ImageDisplay.module.scss

@@ -15,6 +15,8 @@
         bottom: 0;
         left: 0;
         z-index: 2;
+        background-color: transparent;
+        border: none;
         svg {
             color: ohma.$colors-black;
             width: 35px;