graphql material migration

Author: mluukkai

src/components/InfoBanner4.js

@@ -0,0 +1,69 @@
+import React from 'react';
+
+const InfoBanner4 = ({ visible, onHide }) => {
+  if (!visible) return null;
+
+  const style = {
+    padding: 10,
+    borderStyle: 'solid',
+    borderWidth: 2,
+    marginLeft: 80,
+    marginRight: 80,
+    position: 'sticky',
+    top: 100,
+    left: 40,
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    alignContent: 'space-between',
+    backgroundColor: '#fff3cd',
+    borderColor: '#ffc107',
+    color: '#5a4000',
+    zIndex: 2147483647,
+  };
+
+  const linkStyle = {
+    color: 'grey',
+    textDecoration: 'underline',
+  };
+
+  const textStyle = {
+    flex: 90,
+  };
+
+  const buttonDiv = {
+    flex: 10,
+    textAlign: 'right',
+  };
+
+  const buttonStyle = {
+    outline: 'none',
+    backgroundColor: 'transparent',
+    border: 'none',
+    color: 'var(--color-text)',
+    cursor: 'pointer',
+  };
+
+  return (
+    <div style={style}>
+      <div style={textStyle}>
+        <div style={{ marginBottom: 20 }}>
+          <div style={{ marginBottom: 10 }}>
+            Material of Part 8 has been moved to <a style={linkStyle}
+                href="https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-graphql"
+              >
+                https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-graphql
+              </a>
+          </div>
+        </div>
+      </div>
+      <div style={buttonDiv}>
+        <button style={buttonStyle} onClick={onHide}>
+          <div style={textStyle}>x</div>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default InfoBanner4;

src/components/layout.js

@@ -8,13 +8,15 @@ import Header from './Header/Header';
 import InfoBanner from './InfoBanner';
 import InfoBanner2 from './InfoBanner2';
 import InfoBanner3 from './InfoBanner3';
+import InfoBanner4 from './InfoBanner4';
 import Footer from './Footer/Footer';
 import PropTypes from 'prop-types';
 import SkipToContent from './SkipToContent/SkipToContent';
 
 const BANNER_TO_KEY = 'part_10_changes';
 const BANNER3_TO_KEY = 'part_7_changes';
 const BANNER2_TO_KEY = 'part_6_changes';
+const BANNER4_TO_KEY = 'part_8_changes';
 
 const Layout = (props) => {
   const { i18n } = useTranslation();
@@ -25,6 +27,7 @@ const Layout = (props) => {
   const [visible, setVisible] = useState(false);
   const [visible2, setVisible2] = useState(false);
   const [visible3, setVisible3] = useState(false);
+  const [visible4, setVisible4] = useState(false);
 
   useEffect(() => {
     const key = localStorage.getItem(BANNER_TO_KEY);
@@ -50,6 +53,14 @@ const Layout = (props) => {
     }
   }, []);
 
+  useEffect(() => {
+    const key = localStorage.getItem(BANNER4_TO_KEY);
+    if (!key) {
+      const relevant = window.location.href.includes('en/part8') || window.location.href.includes('osa8');
+      setVisible4(relevant);
+    }
+  }, []);
+
   const hideNote = () => {
     console.log('hideNote');
     localStorage.setItem(BANNER_TO_KEY, 'yes');
@@ -68,6 +79,12 @@ const Layout = (props) => {
     setVisible3(false);
   };
 
+  const hideNote4 = () => {
+    console.log('hideNote');
+    localStorage.setItem(BANNER4_TO_KEY, 'yes');
+    setVisible4(false);
+  };
+
   return (
     <div className="main-wrapper">
       <SkipToContent isCoursePage={isCoursePage} />
@@ -80,6 +97,8 @@ const Layout = (props) => {
 
       <InfoBanner3 onHide={() => hideNote3()} visible={visible3} />
 
+      <InfoBanner4 onHide={() => hideNote4()} visible={visible4} />
+
       <main id="main-content">{children}</main>
 
       {!hideFooter && <Footer lang={siteLanguage} />}

src/content/0/en/part0a.md

@@ -126,11 +126,7 @@ By submitting at least 150 of the exercises for parts 0-7 while working on the c
 
 #### Part 8 - Full Stack Web Development: GraphQL (1 cr, CSM14113)
 
-By submitting at least 22/26 of the exercises for part 8 of the course, GraphQL, you can get one additional credit. Part 8 can be done any time after part 5 because its contents are independent of parts 6 and 7.
-
-- Submit at least 22/26 exercises for part 8.
-- [Enroll in part 8 through the Open University](https://www.avoin.helsinki.fi/palvelut/esittely.aspx?s=otm-f29bbf9e-3dfd-42d3-bdb8-c62be94932f8).
-- [Request credits for part 8](/en/part0/general_info/#how-to-get-your-credits).
+Material of part 8 has been moved to <a href="https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-graphql">https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-graphql</a>. 
 
 #### Part 9 - Full Stack Web Development: TypeScript (1 cr, CSM14110)
 
@@ -166,18 +162,11 @@ Material of part 13 has been moved to <a href="https://courses.mooc.fi/org/uh-cs
 
 Please note that if you do the "base course" with 6 or 7 credits, you need separate registrations for the extra credits, see [Parts and completion](/en/part0/general_info#parts-and-completion) for more.
 
-#### How to study the course – instructions in a nutshell: part 8
-
-- Do the exercises. The exercises are submitted through GitHub and marking them as done on the submission system. Note that part 8 has a separate instance in the submission system
-    - [The course certificate](/en/part0/general_info#course-certificate) will be available in the submission system
-- If you want to get University of Helsinki credits
-    - Enroll in the course. You can enroll in each part through the link in the course material ([Parts and completion](/en/part0/general_info#parts-and-completion)). Enroll in each part separately.
-- Mark the part completed in the submission system. Read more [here](/en/part0/general_info#how-to-get-your-credits)
-
-#### How to study the course – instructions in a nutshell: parts 9-13
+#### How to study the course – instructions in a nutshell: parts 8-13
 
 All practicalities are explained in the new course pages
 
+- <a href="https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-graphql">part 8</a>
 - <a href="https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-typescript">part 9</a>
 - <a href="https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-react-native">part 10</a>
 - <a href="https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-continuous-integration">part 11</a>

src/content/0/fi/osa0a.md

@@ -82,10 +82,7 @@ Suorittamalla vähintään 150 tehtävää kurssin osista 0–7 ydinkurssin suor
 
 #### Osa 8 - Full Stack ‑websovelluskehitys: GraphQL (1 op, CSM14113)
 
-Suorittamalla vähintään 22/26 tehtävää kurssin kahdeksannesta, GraphQL:ää käsittelevästä osasta, voit laajentaa suoritustasi yhdellä opintopisteellä. Voit tehdä GraphQL:ää käsittelevän osuuden periaatteessa jo osan 5 jälkeen, sillä sen sisältö ei riipu osista 6 ja 7.
--	Tee vähintään 22/26 tehtävää osasta 8. 
--	[Ilmoittaudu tähän osaan Avoimen yliopiston kautta.](https://www.avoin.helsinki.fi/palvelut/esittely.aspx?s=otm-f29bbf9e-3dfd-42d3-bdb8-c62be94932f8)
--	[Pyydä suoritusmerkintää](https://fullstackopen.com/osa0/yleista#suoritusmerkinnan-pyytaminen) tästä osasta. 
+Materiaali siirretty osoitteeseen <a href="https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-graphql">https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-graphql</a>
 
 #### Osa 9 - Full Stack ‑websovelluskehitys: TypeScript (1 op, CSM14110, englanniksi)
 
@@ -117,17 +114,18 @@ Materiaali siirretty osoitteeseen <a href="https://courses.mooc.fi/org/uh-cs/cou
 - Tee kurssikoe palautusjärjestelmässä, lue lisää [täältä](/osa0/yleista#kurssikoe).
 - Pyydä suoritusmerkintää palautussovelluksessa. Lue lisää [täältä](/osa0/yleista#suoritusmerkinnan-pyytaminen)
 
-#### Kurssin suoritusohjeet pähkinänkuoressa (Osat 6-8) 
+#### Kurssin suoritusohjeet pähkinänkuoressa (Osat 6 ja 7) 
 
 - Tee tehtävät. Palauta vastauksesi palautussovelluksen kautta. Huomaa, että osa 8 palautetaan palautussovelluksessa erillisiin kurssi-instansseihin. 
 
 - Ilmoittaudu kurssille. Pääset ilmoittautumaan kurssimateriaalista (ks. [Osat ja suorittaminen](/osa0/yleista#osat-ja-suorittaminen)) löytyvän ilmoittautumislinkin kautta.  Ilmoittaudu erikseen kuhunkin osaan. 
 - Pyydä suoritusmerkintää palautussovelluksessa. Lue lisää [täältä](/osa0/yleista#suoritusmerkinnan-pyytaminen)
 
-#### Kurssin suoritusohjeet pähkinänkuoressa (Osat 9-13) 
+#### Kurssin suoritusohjeet pähkinänkuoressa (Osat 8-13) 
 
 Käytännöt selviävät osien materiaalista:
 
+- <a href="https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-graphql">osa 8</a>
 - <a href="https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-typescript">osa 9</a>
 - <a href="https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-react-native">osa 110</a>
 - <a href="https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-continuous-integration">osa 11</a>

src/content/8/en/part8.md

@@ -6,12 +6,9 @@ lang: en
 
 <div class="intro">
 
-This part of the course is about GraphQL, Facebook's alternative to REST for communication between browser and server.
+Note that the material of Part 8 has been moved to <a href="https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-graphql">
+    https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-graphql</a>
 
-<i>Part updated 3rd January 2026</i>
-- <i>Apollo Server updated from v4 to v5</i>
-- <i>Apollo Client updated from v3 to v4</i>
-- <i>Node updated to version 22.18.0</i>
-- <i>Added instructions for enabling syntax highlighting for the GraphQL server schema in VS Code</i>
+You can still access the old content [here](https://github.com/fullstack-hy2020/fullstack-hy2020.github.io/tree/0ab0b72f8dddd35ca43c812abd15675a92a1abaa/src/content/8/en).
 
 </div>

src/content/8/fi/osa8.md

@@ -6,14 +6,8 @@ lang: fi
 
 <div class="intro">
 
-Kurssin uudessa osassa käsitellään GraphQL:ää, eli Facebookin kehittämää, RESTille vaihtoehtoista tapaa selaimen ja palvelimen väliseen kommunikointiin.
+Huomaa, että osan 8 materiaali on siirretty osoitteeseen <a href="https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-graphql">https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-graphql</a>
 
-Katso <a target="_BLANK" href='https://www.youtube.com/watch?v=R7bXa7g6YuQ&list=PLumQiZ25uijis31zaRL7rhzLalSwLqUtm&index=4&t=0s'>täältä</a> Houston Inc:n Niko Salmisen GraphQL:ää käsittelevä vierailuluento.
-
-<i>Osa päivitetty 3.1.2026</i>
-- <i>Apollo Server päivitetty versiosta v4 versioon v5</i>
-- <i>Apollo Client päivitetty versiosta v3 versioon v4</i>
-- <i>Node päivitetty versioon 22.18.0</i>
-- <i>Lisätty ohjeet GraphQL-palvelimen skeeman syntaksikorostuksen käyttöönottoon VS Codessa</i>
+Vanha materiaali on edelleen nähtävillä [täällä](https://github.com/fullstack-hy2020/fullstack-hy2020.github.io/tree/0ab0b72f8dddd35ca43c812abd15675a92a1abaa/src/content/8/fi).
 
 </div>

src/content/9/en/part9.md

@@ -23,5 +23,4 @@ In this part, we will be using the tools previously introduced to build end-to-e
 
 This part is created by [Tuomo Torppa](https://www.linkedin.com/in/tuomotorppa), [Tuukka Peuraniemi](https://www.linkedin.com/in/tuukkapeuraniemi/) and [Jani Rapo](https://www.linkedin.com/in/jani-rapo-5520817b/), the awesome developers of [Terveystalo](https://www.terveystalo.com/fi/Yritystietoa/Terveystalo-tyontantajana/Digital-Health/), the largest private healthcare service provider in Finland. Terveystalo’s nationwide network covers 300 locations across Finland. The clinic network is supplemented by 24/7 digital services.
 
-
 </div>

src/content/9/fi/osa9.md

@@ -11,7 +11,7 @@ lang: fi
 Huomaa, että osan 9 materiaali on siirretty osoitteeseen <a href="https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-typescript">
     https://courses.mooc.fi/org/uh-cs/courses/full-stack-open-typescript</a>
 
-Sisällössä on joitakin merkittäviä muutoksia. Jos olet jo aloittanut tämän osan ja edennyt ensimmäisten tehtävien ohi, voit jatkaa vanhan materiaalin mukaan — se säilyy täällä 1. toukokuuta 2026 asti.
+Sisällössä on joitakin merkittäviä muutoksia. Jos olet jo aloittanut tämän osan ja edennyt ensimmäisten tehtävien ohi, voit jatkaa vanhan materiaalin mukaan. Materiaali säilyy täällä 1. toukokuuta 2026 asti.
 
 </div>
 

src/content/partnavigation/partnavigation.js

@@ -43,13 +43,7 @@ module.exports = {
       d: 'Redux (legacy)',
     },
     7: {},
-    8: {
-      a: 'GraphQL-palvelin',
-      b: 'React ja GraphQL',
-      c: 'Tietokanta ja käyttäjien hallinta',
-      d: 'Kirjautuminen ja välimuistin päivitys',
-      e: 'Fragmentit ja subskriptiot',
-    },
+    8: {},
     9: {},
     10: {},
     11: {},
@@ -105,13 +99,7 @@ module.exports = {
       c: 'Miscellaneous',
       d: 'Exercises: extending the bloglist',
     },
-    8: {
-      a: 'GraphQL-server',
-      b: 'React and GraphQL',
-      c: 'Database and user administration',
-      d: 'Login and updating the cache',
-      e: 'Fragments and subscriptions',
-    },
+    8: {},
     9: {
       a: 'Background and introduction',
       b: 'First steps with TypeScript',