chore: add todos

src/_mixins.scss

@@ -1,3 +1,4 @@
+/* @todo Should even scss be used? */
 %container {
   margin: auto;
   width: 1140px;

src/components/N4FArticle/N4FArticle.jsx

@@ -0,0 +1,4 @@
+/**
+ * @todo Clean up this whole folder!
+ * @body This folder has a multiude of components not required for anything.
+ */

src/components/N4FGrantList/N4FGrantList.jsx

@@ -0,0 +1,4 @@
+/**
+ * @todo Add N4FGrant implementation
+ * @body This page should be implemented according to the designs.
+ */

src/components/N4FPage/N4FPage.jsx

@@ -0,0 +1,4 @@
+/**
+ * @todo Should this have content?
+ * @body This component are not used for anything, maybe it should? Restructure?
+ */

src/components/Slice/GallerySlice.jsx

@@ -5,6 +5,10 @@ import Img from 'gatsby-image';
 import N4FContainer from '../layout/N4FContainer';
 
 const GallerySlice = ({ items }) => {
+  /**
+   * @todo Should we use Gallery Slice?
+   * @body This was built when we used Prismic, is it usable?
+   */
   const size = useContext(ResponsiveContext);
 
   return (

src/components/Slice/HighlightSlice.jsx

@@ -11,6 +11,10 @@ const Highlight = styled(Box)`
 `;
 
 const HighlightSlice = ({ primary }) => {
+  /**
+   * @todo Should we use Highlight Slice?
+   * @body This was built when we used Prismic, is it usable?
+   */
   const text = RichText.render(primary.text.raw.map((part => ({
     ...part,
     spans: [],

src/components/Slice/Slice.jsx

@@ -5,6 +5,10 @@ import TextSlice from './TextSlice';
 import GallerySlice from './GallerySlice';
 import HighlightSlice from './HighlightSlice';
 
+/**
+ * @todo Should we use Slice?
+ * @body This was built when we used Prismic, is it usable?
+ */
 
 /**
  * display list of slices that send in `body`

src/components/Slice/TextSlice.jsx

@@ -4,6 +4,10 @@ import { RichText } from 'prismic-reactjs';
 // import { Text, Heading, Paragraph } from 'grommet';
 import N4FContainer from '../layout/N4FContainer';
 
+/**
+ * @todo Should we use Text Slice?
+ * @body This was built when we used Prismic, is it usable?
+ */
 const TextSlice = ({ primary }) => {
   const text = RichText.render(primary.text.raw.map((part => ({
     ...part,

src/components/contact-us/ContactUs.jsx

@@ -16,6 +16,10 @@ const StyledButton = styled(Button)`
   max-width: 200px;
 `;
 
+/**
+ * @todo Finish contact form implementation
+ * @body This only submits, and it might be better to replace it with a more "gatsby native" functionality.
+ */
 const contactUsFormEnhancer = withFormik({
   displayName: 'ContactUs',
   // mapPropsToValues: props => ({ email: props.user.email }),
@@ -26,7 +30,6 @@ const contactUsFormEnhancer = withFormik({
   }),
   handleSubmit: (values, { setSubmitting }) => {
     setTimeout(() => {
-
       alert(JSON.stringify(values, null, 2));
       setSubmitting(false);
     }, 1000);
@@ -86,19 +89,21 @@ const ContactUs = ({
         </Box>
 
         <MaxWidthBox>
+          {/**
+           * @todo Change to settings?
+           * @body Should we utilize a API endpoint for information here? This would help _Sekreteriatet_ do changes without changing code.
+           */}
           <Text weight="bold">
             Hyperion - Norsk Forbund For Fantastiske Fritidsinteresser
           </Text>
           <Text color="subTextSecond">Org. nr.: 984 302 320</Text>
 
           <Text color="subTextSecond" margin="15px 0 0">
-            Kolstadgata 1
-            0123 Oslo
+            Kolstadgata 1 0123 Oslo
           </Text>
 
           <Text color="subTextSecond" margin="15px 0 15px">
-            Tlf.: 23 00 30 00
-            E-post: [email protected]
+            Tlf.: 23 00 30 00 E-post: [email protected]
           </Text>
 
           <StyledButton label="Se vårt sekræteriat" />
@@ -108,4 +113,4 @@ const ContactUs = ({
   );
 };
 
-export default contactUsFormEnhancer(ContactUs);
+export default contactUsFormEnhancer(ContactUs);

src/components/landing/Landing.jsx

@@ -3,6 +3,14 @@ import './Landing.scss';
 import N4FLayout from '../layout/N4FLayout';
 
 function Landing() {
+  /**
+   * @todo Add large image to landing page
+   * @body This should have a large image, as showcased in the design. Should be received from API.
+   */
+  /**
+   * @todo Add articles to landing page
+   * @body Landing page should have a grid with articles, perferably with one or more large ones (two in width / four in width)
+   */
   return (
     <div>
       <N4FLayout>

src/components/layout/N4FLayout.jsx

@@ -7,6 +7,10 @@ import Slice from '../Slice/Slice';
 import './N4FLayout.scss';
 
 function N4FLayout({ children }) {
+  /**
+   * @todo Clean up N4FLayout component
+   * @body This needs a bit of cleaning/clearing
+   */
 
   // const { allPrismicPage: { edges: [,{ node: { data } }] } } = useStaticQuery(graphql`
   //   {

src/components/layout/components/N4FFooter.jsx

@@ -12,6 +12,10 @@ const StyledN4FLogo = styled(N4FLogo)`
 `;
 
 function N4FFooter() {
+  /**
+   * @todo Replace to API endpoint
+   * @body This also, should use a endpoint of sorts. It makes more sense.
+   */
   return (
     <footer>
       <Box background="brand">

src/components/layout/components/N4FNav.jsx

@@ -5,6 +5,10 @@ import { Link } from 'gatsby';
 // <div className="n4f-nav__menu-button">Meny</div>
 
 function N4FNav({ className }) {
+  /**
+   * @todo Implement navigation
+   * @body This navigation is way to static.
+   */
   return (
     <div className={className}>
       <nav className="n4f-nav">

src/pages/contact-us.js

@@ -4,7 +4,10 @@ import { Grommet } from 'grommet';
 
 import ContactUsComponent from '../components/contact-us/ContactUs';
 import theme from '../styles/theme';
-
+/**
+ * @todo Make a JSX out of contact us component
+ * @body The ContactUs component should be renamed.
+ */
 const ContactUs = () => {
   return (
     <Grommet theme={theme}>

src/pages/index.js

@@ -4,7 +4,10 @@ import { Grommet } from 'grommet';
 
 import Landing from '../components/landing/Landing';
 import theme from '../styles/theme';
-
+/**
+ * @todo Make a JSX out of index component
+ * @body The Index component should be renamed.
+ */
 function Index() {
   return (
     <Grommet theme={theme}>

src/pages/page.jsx

@@ -4,6 +4,10 @@ import theme from '../styles/theme';
 import N4FLayout from '../components/layout/N4FLayout';
 import Slice from '../components/Slice/Slice';
 
+/**
+ * @todo Should this even exists?
+ * @body The Page component feels like it should be named something else?
+ */
 const Page = ({ pageContext }) => {
   return (
     <Grommet theme={theme}>