diff --git a/apps/blifrivillig/components/BlurImage.js b/apps/blifrivillig/components/BlurImage.js index 3c47061..d231ddb 100644 --- a/apps/blifrivillig/components/BlurImage.js +++ b/apps/blifrivillig/components/BlurImage.js @@ -1,39 +1,39 @@ -import React, {useState} from 'react' -import Image from 'next/image' - -import styles from '../styles/BlurImage.module.css' - -export default function BlurImage(props) { - const [loading, setLoading] = useState(true); - const imageId = props.imageId; - const data = {...props}; - delete data.imageId; - const base64 = props.base64; - if(base64) { - return ( - - ) - } - - return ( -
- setLoading(false)} - {...data} - /> -
- -
-
- ) +import React, {useState} from 'react' +import Image from 'next/image' + +import styles from '../styles/BlurImage.module.css' + +export default function BlurImage(props) { + const [loading, setLoading] = useState(true); + const imageId = props.imageId; + const data = {...props}; + delete data.imageId; + const base64 = props.base64; + if(base64) { + return ( + + ) + } + + return ( +
+ setLoading(false)} + {...data} + /> +
+ +
+
+ ) } \ No newline at end of file diff --git a/apps/blifrivillig/components/DangerousSetHtmlContent.js b/apps/blifrivillig/components/DangerousSetHtmlContent.js index cf80e5e..33166f9 100644 --- a/apps/blifrivillig/components/DangerousSetHtmlContent.js +++ b/apps/blifrivillig/components/DangerousSetHtmlContent.js @@ -1,18 +1,18 @@ -import React, { useEffect, useRef } from 'react' - -function DangerouslySetHtmlContent(props) { - const { html, ...rest } = props - const divRef = useRef(null) - - useEffect(() => { - if (!html) return - - const slotHtml = document.createRange().createContextualFragment(html) // Create a 'tiny' document and parse the html string - divRef.current.innerHTML = '' // Clear the container - divRef.current.appendChild(slotHtml) // Append the new content - }, [html]) - - return
-} - +import React, { useEffect, useRef } from 'react' + +function DangerouslySetHtmlContent(props) { + const { html, ...rest } = props + const divRef = useRef(null) + + useEffect(() => { + if (!html) return + + const slotHtml = document.createRange().createContextualFragment(html) // Create a 'tiny' document and parse the html string + divRef.current.innerHTML = '' // Clear the container + divRef.current.appendChild(slotHtml) // Append the new content + }, [html]) + + return
+} + export default DangerouslySetHtmlContent \ No newline at end of file diff --git a/apps/blifrivillig/components/ExternalContent.js b/apps/blifrivillig/components/ExternalContent.js index 5f9fac5..1489cee 100644 --- a/apps/blifrivillig/components/ExternalContent.js +++ b/apps/blifrivillig/components/ExternalContent.js @@ -1,32 +1,32 @@ -import { withStyles } from '@material-ui/styles' -import React from 'react' -import DangerouslySetHtmlContent from './DangerousSetHtmlContent' - -const styles = (theme) => { - return { - root: { - '& h1': { - color: theme.palette.primary.main, - ...theme.typography.h1, - }, - '& h2': { - color: theme.palette.primary.main, - ...theme.typography.h2, - }, - '& h3': { - color: theme.palette.primary.main, - ...theme.typography.h3, - }, - }, - } -} -const ExternalContent = withStyles(styles)((props) => { - return ( - - ) -}) - -export default ExternalContent \ No newline at end of file +import { withStyles } from "@mui/styles"; +import React from "react"; +import DangerouslySetHtmlContent from "./DangerousSetHtmlContent"; + +const styles = (theme) => { + return { + root: { + "& h1": { + color: theme.palette.primary.main, + ...theme.typography.h1, + }, + "& h2": { + color: theme.palette.primary.main, + ...theme.typography.h2, + }, + "& h3": { + color: theme.palette.primary.main, + ...theme.typography.h3, + }, + }, + }; +}; +const ExternalContent = withStyles(styles)((props) => { + return ( + + ); +}); + +export default ExternalContent; diff --git a/apps/blifrivillig/components/FAQSection.js b/apps/blifrivillig/components/FAQSection.js index c2ca572..897def8 100644 --- a/apps/blifrivillig/components/FAQSection.js +++ b/apps/blifrivillig/components/FAQSection.js @@ -1,36 +1,36 @@ -import React from 'react' -import TranslatedField from './TranslatedField' -import ExternalContent from './ExternalContent' -import { Box, Container, Grid, Typography } from '@material-ui/core' - -export const FAQuestion = ({ title, text }) => { - return ( -
- - {title} - - -
- ) -} - -const FAQSection = ({ faq }) => { - const faqQuestions = faq.map((item, key) => ( - - - - )) - - return ( - - - - - - - {faqQuestions} - - ) -} - -export default FAQSection +import React from "react"; +import TranslatedField from "./TranslatedField"; +import ExternalContent from "./ExternalContent"; +import { Box, Container, Grid, Typography } from "@mui/material"; + +export const FAQuestion = ({ title, text }) => { + return ( +
+ + {title} + + +
+ ); +}; + +const FAQSection = ({ faq }) => { + const faqQuestions = faq.map((item, key) => ( + + + + )); + + return ( + + + + + + + {faqQuestions} + + ); +}; + +export default FAQSection; diff --git a/apps/blifrivillig/components/GroupSection.js b/apps/blifrivillig/components/GroupSection.js index 623cbb4..a1c5d60 100644 --- a/apps/blifrivillig/components/GroupSection.js +++ b/apps/blifrivillig/components/GroupSection.js @@ -1,103 +1,103 @@ -import { - Box, - Card, - CardActionArea, - CardContent, - Container, - Typography, - Grid, -} from "@material-ui/core"; -import React, { useState } from "react"; -import ExternalContent from "./ExternalContent"; -import Image from "next/image"; - -import style from "../styles/GroupSection.module.css"; -import BlurImage from "./BlurImage"; -import { Link } from "dak-components"; - -const GroupCard = ({ image, title, description, link }) => { - const [shadow, setShadow] = useState(false); - // const imageElem = getImage(image) - return ( - - - setShadow(true)} - onMouseOut={() => setShadow(false)} - raised={shadow} - style={{ height: "100%" }} - > - -
- -
- - - {title} - - - - - - - - ); -}; - -const sanitizeGroup = (group) => ({ - image: group.blifrivillig_image, - title: group.translations[0].title, - description: group.translations[0].description, - link: group.blifrivillig_url || "", -}); -const GroupSection = ({ groups, translation }) => { - const groupElems = groups - ?.filter((x) => x.status === "published") - ?.map((item, key) => { - return ( - - - - ); - }); - - const data = translation; - return ( - - - - - - {data.group_title} - -
- -
- - - {groupElems} - - - - - ); -}; - -export default GroupSection; +import { + Box, + Card, + CardActionArea, + CardContent, + Container, + Typography, + Grid, +} from "@mui/material"; +import React, { useState } from "react"; +import ExternalContent from "./ExternalContent"; +import Image from "next/image"; + +import style from "../styles/GroupSection.module.css"; +import BlurImage from "./BlurImage"; +import { Link } from "dak-components"; + +const GroupCard = ({ image, title, description, link }) => { + const [shadow, setShadow] = useState(false); + // const imageElem = getImage(image) + return ( + + + setShadow(true)} + onMouseOut={() => setShadow(false)} + raised={shadow} + style={{ height: "100%" }} + > + +
+ +
+ + + {title} + + + + + + + + ); +}; + +const sanitizeGroup = (group) => ({ + image: group.blifrivillig_image, + title: group.translations[0].title, + description: group.translations[0].description, + link: group.blifrivillig_url || "", +}); +const GroupSection = ({ groups, translation }) => { + const groupElems = groups + ?.filter((x) => x.status === "published") + ?.map((item, key) => { + return ( + + + + ); + }); + + const data = translation; + return ( + + + + + + {data.group_title} + +
+ +
+ + + {groupElems} + + + + + ); +}; + +export default GroupSection; diff --git a/apps/blifrivillig/components/Section.js b/apps/blifrivillig/components/Section.js index e5eb824..361bbe2 100644 --- a/apps/blifrivillig/components/Section.js +++ b/apps/blifrivillig/components/Section.js @@ -1,45 +1,45 @@ -import { Box, Container, Grid, Typography } from '@material-ui/core' -import React from 'react' -import ExternalContent from './ExternalContent' -import Image from 'next/image' - -import styles from '../styles/Section.module.css' -import BlurImage from './BlurImage' - -const Section = ({ swap, title, image, text, titleColor }) => { - const direction = swap ? 'row-reverse' : 'row' - return ( - - - - -
- -
- - - - - {title} - - - -
- -
- - - - - - ) -} - -export default Section +import { Box, Container, Grid, Typography } from "@mui/material"; +import React from "react"; +import ExternalContent from "./ExternalContent"; +import Image from "next/image"; + +import styles from "../styles/Section.module.css"; +import BlurImage from "./BlurImage"; + +const Section = ({ swap, title, image, text, titleColor }) => { + const direction = swap ? "row-reverse" : "row"; + return ( + + + + +
+ +
+ + + + + {title} + + + +
+ +
+ + + + + + ); +}; + +export default Section; diff --git a/apps/blifrivillig/components/SignupSection.js b/apps/blifrivillig/components/SignupSection.js index 2b93f4f..b6b6e4f 100644 --- a/apps/blifrivillig/components/SignupSection.js +++ b/apps/blifrivillig/components/SignupSection.js @@ -1,17 +1,17 @@ -import React from 'react' -import { Typography } from '@material-ui/core' -import ExternalContent from './ExternalContent' -import TranslatedField from './TranslatedField' - -const SignupSection = ({ snippet }) => { - return ( -
- - - - -
- ) -} - -export default SignupSection +import React from "react"; +import { Typography } from "@mui/material"; +import ExternalContent from "./ExternalContent"; +import TranslatedField from "./TranslatedField"; + +const SignupSection = ({ snippet }) => { + return ( +
+ + + + +
+ ); +}; + +export default SignupSection; diff --git a/apps/blifrivillig/components/TopSection.js b/apps/blifrivillig/components/TopSection.js index 51f1a61..f2da74c 100644 --- a/apps/blifrivillig/components/TopSection.js +++ b/apps/blifrivillig/components/TopSection.js @@ -1,106 +1,106 @@ -import { Button, Grid, Typography } from "@material-ui/core"; -import React, { useEffect } from "react"; - -import TranslatedField from "./TranslatedField"; -import styles from "../styles/TopSection.module.css"; -import { useRouter } from "next/router"; -import { Link } from "dak-components"; - -function scrollTo(elem) { - const element = document.querySelector(elem); - - if (element) { - const yOffset = -100; - const y = - element.getBoundingClientRect().top + window.pageYOffset + yOffset; - - window.scrollTo({ top: y, behavior: "smooth" }); - - return true; - } -} - -export default function TopSection({ videoUrl }) { - const router = useRouter(); - const isNo = router.locale === "no"; - return ( -
-
- -
-
-
- - - - - - - - - - - - - - - - - - - {" "} - - - - - - -
- -
- - - -
-
- ); -} +import { Button, Grid, Typography } from "@mui/material"; +import React, { useEffect } from "react"; + +import TranslatedField from "./TranslatedField"; +import styles from "../styles/TopSection.module.css"; +import { useRouter } from "next/router"; +import { Link } from "dak-components"; + +function scrollTo(elem) { + const element = document.querySelector(elem); + + if (element) { + const yOffset = -100; + const y = + element.getBoundingClientRect().top + window.pageYOffset + yOffset; + + window.scrollTo({ top: y, behavior: "smooth" }); + + return true; + } +} + +export default function TopSection({ videoUrl }) { + const router = useRouter(); + const isNo = router.locale === "no"; + return ( +
+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + {" "} + + + + + + +
+ +
+ + + +
+
+ ); +} diff --git a/apps/blifrivillig/components/TranslatedField.js b/apps/blifrivillig/components/TranslatedField.js index 6c5585f..f80a5d4 100644 --- a/apps/blifrivillig/components/TranslatedField.js +++ b/apps/blifrivillig/components/TranslatedField.js @@ -1,35 +1,35 @@ -import React, {useContext} from 'react' -import { gql } from '@apollo/client'; - -const TranslationContext = React.createContext([]); - -const getTranslationsData = async (client, lang) => { - const { data } = await client.query({ - variables: {lang}, - query: gql` - query TranslationQuery($lang: String) { - texts { - text_id - translations(filter: {languages_code: {url_code: {_eq: $lang}}}) { - text - } - } - } - ` - }); - - return data.texts.reduce((acc, it) => { - acc[it.text_id] = it.translations[0].text - return acc - }, {}) -} - -const TranslatedField = ({tKey}) => { - const translations = useContext(TranslationContext); - const item = translations[tKey]; - if(!item) throw "Missing translation with key " + tKey; - return item; -} - -export default TranslatedField; +import React, {useContext} from 'react' +import { gql } from '@apollo/client'; + +const TranslationContext = React.createContext([]); + +const getTranslationsData = async (client, lang) => { + const { data } = await client.query({ + variables: {lang}, + query: gql` + query TranslationQuery($lang: String) { + texts { + text_id + translations(filter: {languages_code: {url_code: {_eq: $lang}}}) { + text + } + } + } + ` + }); + + return data.texts.reduce((acc, it) => { + acc[it.text_id] = it.translations[0].text + return acc + }, {}) +} + +const TranslatedField = ({tKey}) => { + const translations = useContext(TranslationContext); + const item = translations[tKey]; + if(!item) throw "Missing translation with key " + tKey; + return item; +} + +export default TranslatedField; export { getTranslationsData, TranslationContext }; \ No newline at end of file diff --git a/apps/blifrivillig/next-env.d.ts b/apps/blifrivillig/next-env.d.ts index 62b8a52..4f11a03 100644 --- a/apps/blifrivillig/next-env.d.ts +++ b/apps/blifrivillig/next-env.d.ts @@ -1,5 +1,5 @@ -/// -/// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/apps/blifrivillig/package.json b/apps/blifrivillig/package.json index a38bccd..30d780d 100644 --- a/apps/blifrivillig/package.json +++ b/apps/blifrivillig/package.json @@ -15,18 +15,18 @@ "@emotion/react": "latest", "@emotion/server": "latest", "@emotion/styled": "latest", - "@material-ui/core": "^4.11.3", - "@material-ui/icons": "^4.11.2", - "@material-ui/styles": "^4.11.2", + "@mui/icons-material": "^5.14.7", + "@mui/material": "^5.14.7", + "@mui/styles": "^5.14.7", "@plaiceholder/next": "^2.2.0", "dak-components": "0.0.0", - "date-fns": "^2.27.0", + "date-fns": "^2.30.0", "dotenv": "^10.0.0", "graphql": "^15.6.1", - "moment": "^2.29.1", + "moment": "^2.29.4", "next": "^12.1", "next-compose-plugins": "^2.2.1", - "next-images": "^1.8.2", + "next-images": "^1.8.5", "next-seo": "^4.28.1", "next-transpile-modules": "^9.0.0", "plaiceholder": "^2.2.0", @@ -36,8 +36,8 @@ }, "devDependencies": { "@types/node": "18.7.14", - "@types/react": "^18.0.18", - "eslint": "8.0.0", + "@types/react": "^17.0.2", + "eslint": "7.23.0", "eslint-config-next": "11.1.2", "next-sitemap": "^1.6.203", "typescript": "4.8.2" diff --git a/apps/blifrivillig/pages/_app.js b/apps/blifrivillig/pages/_app.js index f9f0a08..8e69ebf 100644 --- a/apps/blifrivillig/pages/_app.js +++ b/apps/blifrivillig/pages/_app.js @@ -1,7 +1,7 @@ import * as React from "react"; import PropTypes from "prop-types"; import Head from "next/head"; -import { ThemeProvider, CssBaseline } from "@material-ui/core"; +import { ThemeProvider, StyledEngineProvider, CssBaseline } from "@mui/material"; import { CacheProvider } from "@emotion/react"; import theme from "../src/theme"; import createEmotionCache from "../src/createEmotionCache"; @@ -34,11 +34,13 @@ export default function MyApp(props) { content="initial-scale=1, width=device-width" /> - - {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} - - - + + + {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} + + + + diff --git a/apps/blifrivillig/pages/_document.js b/apps/blifrivillig/pages/_document.js index c0c75f3..d8d589d 100644 --- a/apps/blifrivillig/pages/_document.js +++ b/apps/blifrivillig/pages/_document.js @@ -1,83 +1,85 @@ -import React from 'react'; -import Document, { Html, Head, Main, NextScript } from 'next/document'; -import { ServerStyleSheets } from '@material-ui/styles'; // works with @material-ui/core/styles, if you prefer to use it. -import theme from '../src/theme'; // Adjust here as well - -export default class MyDocument extends Document { - render() { - return ( - - - {/* Global Site Tag (gtag.js) - Google Analytics */} -