Refactor/cms subservice

src/app/(auth)/layout.tsx

@@ -1,5 +1,6 @@
 import styles from './layout.module.scss'
 import SpecialCmsImage from '@/components/Cms/CmsImage/SpecialCmsImage'
+import { readSpecialCmsImageFrontpage, updateSpecialCmsImageFrontpage } from '@/services/frontpage/actions'
 import React from 'react'
 
 type PropTypes = {
@@ -14,7 +15,14 @@ export default function AuthLayout({ children }: PropTypes) {
                     {children}
                 </div>
                 <div className={styles.image}>
-                    <SpecialCmsImage special="AUTH_ICON" alt="en kappemann sin hatt" width={200}/>
+                    <SpecialCmsImage
+                        special="AUTH_ICON"
+                        alt="en kappemann sin hatt"
+                        width={200}
+                        //TODO: Probably call through other service see comments in frontpage operations
+                        readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
+                        updateCmsImageAction={updateSpecialCmsImageFrontpage}
+                    />
                 </div>
             </div>
         </div>

src/app/(home)/LoggedIn.tsx → src/app/(frontpage)/LoggedIn.tsx

@@ -10,6 +10,7 @@ import { unwrapActionReturn } from '@/app/redirectToErrorPage'
 import { readNewsCurrentAction } from '@/services/news/actions'
 import { readActiveJobAdsAction } from '@/services/career/jobAds/actions'
 import { readCurrentEventsAction } from '@/services/events/actions'
+import { readSpecialCmsImageFrontpage, updateSpecialCmsImageFrontpage } from '@/services/frontpage/actions'
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
@@ -28,7 +29,12 @@ export default async function LoggedInLandingPage() {
             <div className={`${styles.part} ${styles.frontImg}`}>
                 <div className={styles.frontInfo}>
                     <div>
-                        <SpecialCmsImage special="FRONTPAGE_LOGO" width={300} />
+                        <SpecialCmsImage
+                            special="FRONTPAGE_LOGO"
+                            width={300}
+                            readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
+                            updateCmsImageAction={updateSpecialCmsImageFrontpage}
+                        />
                         <div className={styles.socials}>
                             <SocialIcons />
                         </div>

src/app/(home)/LoggedOut.tsx → src/app/(frontpage)/LoggedOut.tsx

@@ -5,6 +5,7 @@ import MazeMap from '@/components/MazeMap/MazeMap'
 import SocialIcons from '@/components/SocialIcons/SocialIcons'
 import SpecialCmsImage from '@/components/Cms/CmsImage/SpecialCmsImage'
 import YouTube from '@/components/YouTube/YouTube'
+import { readSpecialCmsImageFrontpage, updateSpecialCmsImageFrontpage } from '@/services/frontpage/actions'
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
@@ -15,7 +16,12 @@ export default async function LoggedOutLandingPage() {
             <div className={`${styles.part} ${styles.frontImg}`}>
                 <div className={styles.frontInfo}>
                     <div>
-                        <SpecialCmsImage special="FRONTPAGE_LOGO" width={300}/>
+                        <SpecialCmsImage
+                            special="FRONTPAGE_LOGO"
+                            width={300}
+                            readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
+                            updateCmsImageAction={updateSpecialCmsImageFrontpage}
+                        />
 
                         <Link href="login">Logg inn</Link>
                         <Link href="infopages/nystudent">Ny student</Link>
@@ -30,6 +36,7 @@ export default async function LoggedOutLandingPage() {
                     </div>
                 </div>
                 <Section
+                    position="left"
                     specialCmsImage="FRONTPAGE_1"
                     specialCmsParagraph="FRONTPAGE_1"
                     lesMer="/articles"
@@ -39,7 +46,7 @@ export default async function LoggedOutLandingPage() {
 
                 <InfoBubbles />
                 <Section
-                    right
+                    position="right"
                     specialCmsImage="FRONTPAGE_2"
                     specialCmsParagraph="FRONTPAGE_2"
                     lesMer="/articles"
@@ -52,13 +59,14 @@ export default async function LoggedOutLandingPage() {
                 <YouTube src="https://www.youtube.com/watch?v=I-zNLW4ILu4" />
                 <div className={styles.emptyPart} />
                 <Section
+                    position="left"
                     specialCmsImage="FRONTPAGE_3"
                     specialCmsParagraph="FRONTPAGE_3"
                     lesMer="/career"
                     imgWidth={550}
                 />
                 <Section
-                    right
+                    position="right"
                     specialCmsImage="FRONTPAGE_4"
                     specialCmsParagraph="FRONTPAGE_4"
                     lesMer="infopages/loccom"

src/app/(frontpage)/Section.tsx

@@ -0,0 +1,54 @@
+import styles from './Section.module.scss'
+import SpecialCmsParagraph from '@/components/Cms/CmsParagraph/SpecialCmsParagraph'
+import SpecialCmsImage from '@/components/Cms/CmsImage/SpecialCmsImage'
+import {
+    readSpecialCmsImageFrontpage,
+    readSpecialCmsParagraphFrontpageSection,
+    updateSpecialCmsImageFrontpage,
+    updateSpecialCmsParagraphFrontpageSection
+} from '@/services/frontpage/actions'
+import React from 'react'
+import Link from 'next/link'
+import type {
+    SpecialCmsImage as SpecialCmsImageT,
+    SpecialCmsParagraph as SpecialCmsParagraphT
+} from '@prisma/client'
+
+type PropTypes = {
+    specialCmsImage: SpecialCmsImageT,
+    specialCmsParagraph: SpecialCmsParagraphT,
+    lesMer: string,
+    position: 'left' | 'right',
+    imgWidth: number,
+    id?: string,
+}
+
+function Section({ specialCmsImage, specialCmsParagraph, lesMer, position, imgWidth, id }: PropTypes) {
+    const imgContainer = (
+        <div style={{ width: imgWidth }} className={styles.imgContainer}>
+            <SpecialCmsImage
+                special={specialCmsImage}
+                width={imgWidth}
+                readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
+                updateCmsImageAction={updateSpecialCmsImageFrontpage}
+            />
+        </div>
+    )
+    return (
+        <div id={id} className={`${styles.section} ${position === 'right' && styles.blue}`}>
+            {position === 'left' && imgContainer}
+            <div>
+                <SpecialCmsParagraph
+                    className={styles.paragraph}
+                    special={specialCmsParagraph}
+                    readSpecialCmsParagraphAction={readSpecialCmsParagraphFrontpageSection}
+                    updateCmsParagraphAction={updateSpecialCmsParagraphFrontpageSection}
+                />
+                <Link className={styles.readMore} href={lesMer}>Les mer</Link>
+            </div>
+            {position === 'right' && imgContainer}
+        </div>
+    )
+}
+
+export default Section

src/app/_components/Cms/Article/AddSection.tsx

@@ -2,28 +2,36 @@
 
 import styles from './AddSection.module.scss'
 import AddParts from '@/cms/AddParts'
-import { addSectionToArticleAction } from '@/cms/articles/actions'
-import { maxSections } from '@/cms/articles/ConfigVars'
+import { maxSections } from '@/cms/articles/constants'
 import useEditing from '@/hooks/useEditing'
 import { useRouter } from 'next/navigation'
 import type { ArticleSectionPart } from '@/cms/articleSections/types'
+import type { AddSectionToArticleAction } from '@/cms/articles/types'
+import type { ConfiguredAction } from '@/services/actionTypes'
 
 type PropTypes = {
-    articleId: number,
     currentNumberSections: number,
+    addSectionToArticleAction: ConfiguredAction<AddSectionToArticleAction>
 }
 
-export default function AddSection({ articleId, currentNumberSections }: PropTypes) {
+export default function AddSection({
+    currentNumberSections,
+    addSectionToArticleAction
+}: PropTypes) {
     const { refresh } = useRouter()
     const canEdit = useEditing({}) //TODO: check visibility of article for user and pass it to useEditing
-    if (!canEdit) return null
 
-    const handleAdd = async (part: ArticleSectionPart) => {
-        addSectionToArticleAction(articleId, {
-            [part]: true,
+    const handleAdd = async (includePart: ArticleSectionPart) => {
+        await addSectionToArticleAction({
+            data: {
+                includeParts: {
+                    [includePart]: true,
+                }
+            }
         })
         refresh()
     }
+    if (!canEdit) return null
     return (
         <span className={styles.AddSection}>
             {

src/app/_components/Cms/Article/Article.tsx

@@ -4,9 +4,18 @@ import SectionMover from './SectionMover'
 import ChangeName from './ChangeName'
 import CmsImage from '@/cms/CmsImage/CmsImage'
 import SlideInOnView from '@/components/SlideInOnView/SlideInOnView'
-import ArticleSection from '@/cms/ArticleSection/ArticleSection'
+import { configureAction } from '@/services/configureAction'
+import ArticleSection, {
+    type ArticleSectionActions
+} from '@/cms/ArticleSection/ArticleSection'
 import type { ReactNode } from 'react'
-import type { ExpandedArticle } from '@/cms/articles/types'
+import type {
+    AddSectionToArticleAction,
+    ExpandedArticle,
+    ReorderArticleSectionsAction,
+    UpdateArticleAction
+} from '@/cms/articles/types'
+import type { UpdateCmsImageAction } from '@/cms/images/types'
 
 export type PropTypes = {
     article: ExpandedArticle,
@@ -15,6 +24,13 @@ export type PropTypes = {
     noMargin?: boolean
     sideBarContent?: ReactNode
     sideBarClassName?: string
+    actions: {
+        updateCoverImageAction: UpdateCmsImageAction,
+        updateArticleAction: UpdateArticleAction,
+        addSectionToArticleAction: AddSectionToArticleAction,
+        reorderArticleSectionsAction: ReorderArticleSectionsAction,
+        articleSections: ArticleSectionActions
+    }
 }
 
 export default function Article({
@@ -24,14 +40,27 @@ export default function Article({
     noMargin = false,
     sideBarContent,
     sideBarClassName,
+    actions,
 }: PropTypes) {
     return (
         <span className={styles.Article}>
             {hideCoverImage ? <></> : (
                 <span className={`${coverImageClass} ${styles.coverImage}`}>
-                    <CmsImage width={500} cmsImage={article.coverImage} />
+                    <CmsImage
+                        width={500}
+                        cmsImage={article.coverImage}
+                        updateCmsImageAction={actions.updateCoverImageAction}
+                    />
                     <SlideInOnView direction="bottom">
-                        <ChangeName article={article} />
+                        <ChangeName
+                            article={article}
+                            updateArticleAction={
+                                configureAction(
+                                    actions.updateArticleAction,
+                                    { params: { articleId: article.id } }
+                                )
+                            }
+                        />
                     </SlideInOnView>
                 </span>
             )}
@@ -41,13 +70,22 @@ export default function Article({
                         article.articleSections.sort((a, b) => (a.order - b.order)).map((section, i) => (
                             <SlideInOnView direction="left" key={section.id}>
                                 <span className={styles.moveSection}>
-                                    <ArticleSection articleSection={section} />
+                                    <ArticleSection actions={actions.articleSections} articleSection={section} />
                                     <SectionMover
                                         showUp={i !== 0}
                                         showDown={i !== article.articleSections.length - 1}
-                                        articleId={article.id}
-                                        sectionId={section.id}
                                         className={styles.moverComponent}
+                                        reorderArticleSectionsAction={
+                                            configureAction(
+                                                actions.reorderArticleSectionsAction,
+                                                {
+                                                    params: {
+                                                        articleId: article.id,
+                                                        sectionId: section.id
+                                                    }
+                                                }
+                                            )
+                                        }
                                     />
                                 </span>
                             </SlideInOnView>
@@ -63,7 +101,15 @@ export default function Article({
                 </aside>
             )}
             <div className={styles.addSection}>
-                <AddSection articleId={article.id} currentNumberSections={article.articleSections.length} />
+                <AddSection
+                    currentNumberSections={article.articleSections.length}
+                    addSectionToArticleAction={
+                        configureAction(
+                            actions.addSectionToArticleAction,
+                            { params: { articleId: article.id } }
+                        )
+                    }
+                />
             </div>
         </span>
     )

src/app/_components/Cms/Article/ChangeName.tsx

@@ -1,17 +1,17 @@
 'use client'
 import styles from './ChangeName.module.scss'
 import EditableTextField from '@/components/EditableTextField/EditableTextField'
-import { updateArticleAction } from '@/services/cms/articles/actions'
 import React, { useState } from 'react'
 import { usePathname } from 'next/navigation'
-import type { ExpandedArticle } from '@/cms/articles/types'
+import type { ExpandedArticle, UpdateArticleAction } from '@/cms/articles/types'
+import type { ConfiguredAction } from '@/services/actionTypes'
 
 type PropTypes = {
     article: ExpandedArticle
+    updateArticleAction: ConfiguredAction<UpdateArticleAction>
 }
 
-export default function ChangeName({ article }: PropTypes) {
-    const changeName = updateArticleAction.bind(null, article.id)
+export default function ChangeName({ article, updateArticleAction }: PropTypes) {
     const currentPath = usePathname()
     const [currentName, setCurrentName] = useState(article.name)
     const successCallback = (data: ExpandedArticle | undefined) => {
@@ -27,7 +27,7 @@ export default function ChangeName({ article }: PropTypes) {
         <EditableTextField
             formProps={
                 {
-                    action: changeName,
+                    action: updateArticleAction,
                     successCallback
                 }
             }