danskernesdigitalebibliotek · kasperg · Apr 7, 2024 · Apr 3, 2024 · Apr 3, 2024 · Apr 3, 2024
diff --git a/.docker/wiremock/cms/mappings/cms-stub-2-8b0177da-969f-4461-ae54-34151ad21b07.json b/.docker/wiremock/cms/mappings/cms-stub-2-8b0177da-969f-4461-ae54-34151ad21b07.json
@@ -0,0 +1,18 @@
+{
+  "id" : "8b0177da-969f-4461-ae54-34151ad21b07",
+  "name" : "Next week",
+  "request" : {
+    "url" : "/dpl_opening_hours?branch_id=1&from_date=2024-03-25&to_date=2024-03-31",
+    "method" : "GET"
+  },
+  "response" : {
+    "status" : 200,
+    "body" : " [{\n    \"id\": 42,\n    \"category\": {\n      \"title\": \"Åbent\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-25\",\n    \"start_time\": \"08:00\",\n    \"end_time\": \"12:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 43,\n    \"category\": {\n      \"title\": \"Mors hyggehjørne\",\n      \"color\": \"#FF0000\"\n    },\n    \"date\": \"2024-03-25\",\n    \"start_time\": \"13:00\",\n    \"end_time\": \"17:00\",\n    \"branch_id\": 2\n  },\n  {\n    \"id\": 44,\n    \"category\": {\n      \"title\": \"Med betjening\",\n      \"color\": \"#008000\"\n    },\n    \"date\": \"2024-03-25\",\n    \"start_time\": \"18:00\",\n    \"end_time\": \"20:00\",\n    \"branch_id\": 3\n  },\n  {\n    \"id\": 45,\n    \"category\": {\n      \"title\": \"Telefontid\",\n      \"color\": \"#FFFF00\"\n    },\n    \"date\": \"2024-03-26\",\n    \"start_time\": \"09:00\",\n    \"end_time\": \"11:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 46,\n    \"category\": {\n      \"title\": \"Borgerservice\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-26\",\n    \"start_time\": \"12:00\",\n    \"end_time\": \"14:00\",\n    \"branch_id\": 2\n  },\n  {\n    \"id\": 47,\n    \"category\": {\n      \"title\": \"Børneetagen\",\n      \"color\": \"#FF0000\"\n    },\n    \"date\": \"2024-03-26\",\n    \"start_time\": \"15:00\",\n    \"end_time\": \"18:00\",\n    \"branch_id\": 3\n  },\n  {\n    \"id\": 48,\n    \"category\": {\n      \"title\": \"Makerlab\",\n      \"color\": \"#008000\"\n    },\n    \"date\": \"2024-03-27\",\n    \"start_time\": \"08:00\",\n    \"end_time\": \"11:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 49,\n    \"category\": {\n      \"title\": \"Åbent\",\n      \"color\": \"#FFFF00\"\n    },\n    \"date\": \"2024-03-27\",\n    \"start_time\": \"12:00\",\n    \"end_time\": \"16:00\",\n    \"branch_id\": 2\n  },\n  {\n    \"id\": 50,\n    \"category\": {\n      \"title\": \"Selvbetjening\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-27\",\n    \"start_time\": \"17:00\",\n    \"end_time\": \"20:00\",\n    \"branch_id\": 3\n  },\n  {\n    \"id\": 51,\n    \"category\": {\n      \"title\": \"Med betjening\",\n      \"color\": \"#FF0000\"\n    },\n    \"date\": \"2024-03-28\",\n    \"start_time\": \"09:00\",\n    \"end_time\": \"13:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 52,\n    \"category\": {\n      \"title\": \"Telefontid\",\n      \"color\": \"#008000\"\n    },\n    \"date\": \"2024-03-28\",\n    \"start_time\": \"14:00\",\n    \"end_time\": \"17:00\",\n    \"branch_id\": 2\n  },\n  {\n    \"id\": 53,\n    \"category\": {\n      \"title\": \"Borgerservice\",\n      \"color\": \"#FFFF00\"\n    },\n    \"date\": \"2024-03-28\",\n    \"start_time\": \"18:00\",\n    \"end_time\": \"20:00\",\n    \"branch_id\": 3\n  },\n  {\n    \"id\": 54,\n    \"category\": {\n      \"title\": \"Børneetagen\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-29\",\n    \"start_time\": \"08:00\",\n    \"end_time\": \"12:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 55,\n    \"category\": {\n      \"title\": \"Makerlab\",\n      \"color\": \"#FF0000\"\n    },\n    \"date\": \"2024-03-29\",\n    \"start_time\": \"13:00\",\n    \"end_time\": \"16:00\",\n    \"branch_id\": 2\n  },\n  {\n    \"id\": 56,\n    \"category\": {\n      \"title\": \"Åbent\",\n      \"color\": \"#008000\"\n    },\n    \"date\": \"2024-03-29\",\n    \"start_time\": \"17:00\",\n    \"end_time\": \"19:00\",\n    \"branch_id\": 3\n  },\n  {\n    \"id\": 57,\n    \"category\": {\n      \"title\": \"Selvbetjening\",\n      \"color\": \"#FFFF00\"\n    },\n    \"date\": \"2024-03-30\",\n    \"start_time\": \"09:00\",\n    \"end_time\": \"12:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 58,\n    \"category\": {\n      \"title\": \"Med betjening\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-30\",\n    \"start_time\": \"12:30\",\n    \"end_time\": \"15:30\",\n    \"branch_id\": 2\n  },\n  {\n    \"id\": 59,\n    \"category\": {\n      \"title\": \"Telefontid\",\n      \"color\": \"#FF0000\"\n    },\n    \"date\": \"2024-03-30\",\n    \"start_time\": \"16:00\",\n    \"end_time\": \"18:00\",\n    \"branch_id\": 3\n  },\n  {\n    \"id\": 60,\n    \"category\": {\n      \"title\": \"Borgerservice\",\n      \"color\": \"#008000\"\n    },\n    \"date\": \"2024-03-31\",\n    \"start_time\": \"10:00\",\n    \"end_time\": \"13:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 61,\n    \"category\": {\n      \"title\": \"Børneetagen\",\n      \"color\": \"#FFFF00\"\n    },\n    \"date\": \"2024-03-31\",\n    \"start_time\": \"14:00\",\n    \"end_time\": \"17:00\",\n    \"branch_id\": 2\n  },\n  {\n    \"id\": 62,\n    \"category\": {\n      \"title\": \"Makerlab\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-31\",\n    \"start_time\": \"18:00\",\n    \"end_time\": \"20:00\",\n    \"branch_id\": 3\n  }\n]\n",
+    "headers" : { }
+  },
+  "uuid" : "8b0177da-969f-4461-ae54-34151ad21b07",
+  "persistent" : true,
+  "priority" : 5,
+  "insertionIndex" : 2,
+  "postServeActions" : [ ]
+}
diff --git a/.docker/wiremock/cms/mappings/current-week--4a24284b-7281-46df-ae95-de1a28578f3f.json b/.docker/wiremock/cms/mappings/current-week--4a24284b-7281-46df-ae95-de1a28578f3f.json
@@ -0,0 +1,18 @@
+{
+  "id" : "4a24284b-7281-46df-ae95-de1a28578f3f",
+  "name" : "Current week ",
+  "request" : {
+    "url" : "/dpl_opening_hours?branch_id=1&from_date=2024-03-18&to_date=2024-03-24",
+    "method" : "GET"
+  },
+  "response" : {
+    "status" : 200,
+    "body" : "[ {\n    \"id\": 0,\n    \"category\": {\n      \"title\": \"Åbent\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-18\",\n    \"start_time\": \"09:00\",\n    \"end_time\": \"12:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 1,\n    \"category\": {\n      \"title\": \"Selvbetjening\",\n      \"color\": \"#FF0000\"\n    },\n    \"date\": \"2024-03-18\",\n    \"start_time\": \"13:00\",\n    \"end_time\": \"16:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 2,\n    \"category\": {\n      \"title\": \"Med betjening\",\n      \"color\": \"#008000\"\n    },\n    \"date\": \"2024-03-18\",\n    \"start_time\": \"17:00\",\n    \"end_time\": \"19:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 3,\n    \"category\": {\n      \"title\": \"Telefontid\",\n      \"color\": \"#FFFF00\"\n    },\n    \"date\": \"2024-03-19\",\n    \"start_time\": \"08:00\",\n    \"end_time\": \"10:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 4,\n    \"category\": {\n      \"title\": \"Borgerservice\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-19\",\n    \"start_time\": \"11:00\",\n    \"end_time\": \"13:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 5,\n    \"category\": {\n      \"title\": \"Børneetagen\",\n      \"color\": \"#FF0000\"\n    },\n    \"date\": \"2024-03-19\",\n    \"start_time\": \"14:00\",\n    \"end_time\": \"17:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 6,\n    \"category\": {\n      \"title\": \"Makerlab\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-20\",\n    \"start_time\": \"09:00\",\n    \"end_time\": \"12:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 7,\n    \"category\": {\n      \"title\": \"Åbent\",\n      \"color\": \"#008000\"\n    },\n    \"date\": \"2024-03-20\",\n    \"start_time\": \"13:00\",\n    \"end_time\": \"15:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 8,\n    \"category\": {\n      \"title\": \"Selvbetjening\",\n      \"color\": \"#FFFF00\"\n    },\n    \"date\": \"2024-03-20\",\n    \"start_time\": \"16:00\",\n    \"end_time\": \"19:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 9,\n    \"category\": {\n      \"title\": \"Med betjening\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-21\",\n    \"start_time\": \"09:00\",\n    \"end_time\": \"11:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 10,\n    \"category\": {\n      \"title\": \"Telefontid\",\n      \"color\": \"#FF0000\"\n    },\n    \"date\": \"2024-03-21\",\n    \"start_time\": \"12:00\",\n    \"end_time\": \"14:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 11,\n    \"category\": {\n      \"title\": \"Borgerservice\",\n      \"color\": \"#008000\"\n    },\n    \"date\": \"2024-03-21\",\n    \"start_time\": \"15:00\",\n    \"end_time\": \"18:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 12,\n    \"category\": {\n      \"title\": \"Børneetagen\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-22\",\n    \"start_time\": \"10:00\",\n    \"end_time\": \"13:00\",\n    \"branch_id\": 1\n  },\n\n  {\n    \"id\": 18,\n    \"category\": {\n      \"title\": \"Borgerservice\",\n      \"color\": \"#008000\"\n    },\n    \"date\": \"2024-03-24\",\n    \"start_time\": \"10:00\",\n    \"end_time\": \"13:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 19,\n    \"category\": {\n      \"title\": \"Børneetagen\",\n      \"color\": \"#FFFF00\"\n    },\n    \"date\": \"2024-03-24\",\n    \"start_time\": \"14:00\",\n    \"end_time\": \"18:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 20,\n    \"category\": {\n      \"title\": \"Makerlab\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-24\",\n    \"start_time\": \"19:00\",\n    \"end_time\": \"21:00\",\n    \"branch_id\": 1\n  }]",
+    "headers" : { }
+  },
+  "uuid" : "4a24284b-7281-46df-ae95-de1a28578f3f",
+  "persistent" : true,
+  "priority" : 5,
+  "insertionIndex" : 3,
+  "postServeActions" : [ ]
+}
diff --git a/.docker/wiremock/cms/mappings/dummy-479e26d6-5197-4d8f-a2dd-fefe64aabc14.json b/.docker/wiremock/cms/mappings/dummy-479e26d6-5197-4d8f-a2dd-fefe64aabc14.json
@@ -0,0 +1,18 @@
+{
+  "id" : "479e26d6-5197-4d8f-a2dd-fefe64aabc14",
+  "name" : "Opening hours",
+  "request" : {
+    "url" : "/dpl_opening_hours",
+    "method" : "GET"
+  },
+  "response" : {
+    "status" : 200,
+    "body" : "[\n  \n]\n",
+    "headers" : { }
+  },
+  "uuid" : "479e26d6-5197-4d8f-a2dd-fefe64aabc14",
+  "persistent" : true,
+  "priority" : 5,
+  "insertionIndex" : 0,
+  "postServeActions" : [ ]
+}
diff --git a/.docker/wiremock/cms/mappings/previous-week-9e0567ff-57cf-4991-bd32-686e084568a7.json b/.docker/wiremock/cms/mappings/previous-week-9e0567ff-57cf-4991-bd32-686e084568a7.json
@@ -0,0 +1,18 @@
+{
+  "id" : "9e0567ff-57cf-4991-bd32-686e084568a7",
+  "name" : "Previous week",
+  "request" : {
+    "url" : "/dpl_opening_hours?branch_id=1&from_date=2024-03-11&to_date=2024-03-17",
+    "method" : "GET"
+  },
+  "response" : {
+    "status" : 200,
+    "body" : "[{\n    \"id\": 21,\n    \"category\": {\n      \"title\": \"Fars legestue\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-11\",\n    \"start_time\": \"08:00\",\n    \"end_time\": \"12:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 22,\n    \"category\": {\n      \"title\": \"Selvbetjening\",\n      \"color\": \"#FF0000\"\n    },\n    \"date\": \"2024-03-11\",\n    \"start_time\": \"13:00\",\n    \"end_time\": \"17:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 23,\n    \"category\": {\n      \"title\": \"Med betjening\",\n      \"color\": \"#008000\"\n    },\n    \"date\": \"2024-03-11\",\n    \"start_time\": \"18:00\",\n    \"end_time\": \"20:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 24,\n    \"category\": {\n      \"title\": \"Telefontid\",\n      \"color\": \"#FFFF00\"\n    },\n    \"date\": \"2024-03-12\",\n    \"start_time\": \"09:00\",\n    \"end_time\": \"11:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 25,\n    \"category\": {\n      \"title\": \"Borgerservice\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-12\",\n    \"start_time\": \"12:00\",\n    \"end_time\": \"14:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 26,\n    \"category\": {\n      \"title\": \"Børneetagen\",\n      \"color\": \"#FF0000\"\n    },\n    \"date\": \"2024-03-12\",\n    \"start_time\": \"15:00\",\n    \"end_time\": \"18:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 27,\n    \"category\": {\n      \"title\": \"Makerlab\",\n      \"color\": \"#008000\"\n    },\n    \"date\": \"2024-03-13\",\n    \"start_time\": \"08:00\",\n    \"end_time\": \"11:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 28,\n    \"category\": {\n      \"title\": \"Åbent\",\n      \"color\": \"#FFFF00\"\n    },\n    \"date\": \"2024-03-13\",\n    \"start_time\": \"12:00\",\n    \"end_time\": \"16:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 29,\n    \"category\": {\n      \"title\": \"Selvbetjening\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-13\",\n    \"start_time\": \"17:00\",\n    \"end_time\": \"20:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 30,\n    \"category\": {\n      \"title\": \"Med betjening\",\n      \"color\": \"#FF0000\"\n    },\n    \"date\": \"2024-03-14\",\n    \"start_time\": \"09:00\",\n    \"end_time\": \"13:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 31,\n    \"category\": {\n      \"title\": \"Telefontid\",\n      \"color\": \"#008000\"\n    },\n    \"date\": \"2024-03-14\",\n    \"start_time\": \"14:00\",\n    \"end_time\": \"17:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 32,\n    \"category\": {\n      \"title\": \"Borgerservice\",\n      \"color\": \"#FFFF00\"\n    },\n    \"date\": \"2024-03-14\",\n    \"start_time\": \"18:00\",\n    \"end_time\": \"20:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 33,\n    \"category\": {\n      \"title\": \"Børneetagen\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-15\",\n    \"start_time\": \"08:00\",\n    \"end_time\": \"12:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 34,\n    \"category\": {\n      \"title\": \"Makerlab\",\n      \"color\": \"#FF0000\"\n    },\n    \"date\": \"2024-03-15\",\n    \"start_time\": \"13:00\",\n    \"end_time\": \"16:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 35,\n    \"category\": {\n      \"title\": \"Åbent\",\n      \"color\": \"#008000\"\n    },\n    \"date\": \"2024-03-15\",\n    \"start_time\": \"17:00\",\n    \"end_time\": \"19:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 36,\n    \"category\": {\n      \"title\": \"Selvbetjening\",\n      \"color\": \"#FFFF00\"\n    },\n    \"date\": \"2024-03-16\",\n    \"start_time\": \"09:00\",\n    \"end_time\": \"12:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 37,\n    \"category\": {\n      \"title\": \"Med betjening\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-16\",\n    \"start_time\": \"12:30\",\n    \"end_time\": \"15:30\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 38,\n    \"category\": {\n      \"title\": \"Telefontid\",\n      \"color\": \"#FF0000\"\n    },\n    \"date\": \"2024-03-16\",\n    \"start_time\": \"16:00\",\n    \"end_time\": \"18:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 39,\n    \"category\": {\n      \"title\": \"Borgerservice\",\n      \"color\": \"#008000\"\n    },\n    \"date\": \"2024-03-17\",\n    \"start_time\": \"10:00\",\n    \"end_time\": \"13:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 40,\n    \"category\": {\n      \"title\": \"Børneetagen\",\n      \"color\": \"#FFFF00\"\n    },\n    \"date\": \"2024-03-17\",\n    \"start_time\": \"14:00\",\n    \"end_time\": \"17:00\",\n    \"branch_id\": 1\n  },\n  {\n    \"id\": 41,\n    \"category\": {\n      \"title\": \"Makerlab\",\n      \"color\": \"#0000FF\"\n    },\n    \"date\": \"2024-03-17\",\n    \"start_time\": \"18:00\",\n    \"end_time\": \"20:00\",\n    \"branch_id\": 1\n  }]",
+    "headers" : { }
+  },
+  "uuid" : "9e0567ff-57cf-4991-bd32-686e084568a7",
+  "persistent" : true,
+  "priority" : 5,
+  "insertionIndex" : 1,
+  "postServeActions" : [ ]
+}
diff --git a/.docker/wiremock/services.json b/.docker/wiremock/services.json
@@ -1,13 +1,22 @@
 {
-  "services" : [ {
-    "id" : "5gpl3",
-    "name" : "FBS",
-    "port" : 8100,
-    "rootDir" : "fbs"
-  }, {
-    "id" : "m4yqj",
-    "name" : "publizon",
-    "port" : 8110,
-    "rootDir" : "publizon"
-  } ]
-}
+  "services": [
+    {
+      "id": "5gpl3",
+      "name": "FBS",
+      "port": 8100,
+      "rootDir": "fbs"
+    },
+    {
+      "id": "m4yqj",
+      "name": "publizon",
+      "port": 8110,
+      "rootDir": "publizon"
+    },
+    {
+      "id": "9d646",
+      "name": "cms",
+      "port": 8120,
+      "rootDir": "cms"
+    }
+  ]
+}
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,4 +1,4 @@
-version: '3.7'
+version: "3.7"
 
 services:
   wiremock:
@@ -9,6 +9,8 @@ services:
       - "8100"
       # Publizon
       - "8110"
+      # CMS
+      - "8120"
     volumes:
       - wiremock_data:/home/wiremock
     environment:
@@ -37,12 +39,28 @@ services:
       VIRTUAL_HOST: publizon-mock.docker
       VIRTUAL_PORT: 8080
 
+  wiremock-cms:
+    image: wiremock/wiremock:2.32.0
+    command: "--enable-stub-cors  --global-response-templating" # Enable automatic sending of cross-origin (CORS) response headers.
+    ports:
+      - "8080"
+    volumes:
+      - wiremock_cms_data:/home/wiremock
+    environment:
+      VIRTUAL_HOST: cms-mock.docker
+      VIRTUAL_PORT: 8080
+
 volumes:
   root:
     driver_opts:
       type: none
       device: $PWD
       o: bind
+  wiremock_cms_data:
+    driver_opts:
+      type: none
+      device: $PWD/.docker/wiremock/cms
+      o: bind
   wiremock_data:
     driver_opts:
       type: none

diff --git a/src/apps/fee-list/fee-list.test.ts b/src/apps/fee-list/fee-list.test.ts
@@ -236,7 +236,7 @@ describe("Fee list", () => {
       .find("div")
       .find(".modal-loan__title")
       .should("exist")
-      .should("have.text", "Turned in 18. October 2019");
+      .should("have.text", "Turned in 18. oktober 2019");
 
     // book list
     cy.get(".modal-loan__list-materials")

diff --git a/src/apps/opening-hours/OpeningHourWeekList.tsx b/src/apps/opening-hours/OpeningHourWeekList.tsx
@@ -0,0 +1,53 @@
+import dayjs from "dayjs";
+import "dayjs/locale/da";
+import React from "react";
+import OpeningHoursDayEntry from "./OpeningHoursDayEntry";
+import {
+  GroupedOpeningHours,
+  formatDateToWeekday
+} from "./OpeningHoursHelpers";
+import OpeningHourWeekListSkeleton from "./OpeningHourWeekListSkeleton";
+
+interface OpeningHoursWeekListProps {
+  data: GroupedOpeningHours;
+  isLoading: boolean;
+}
+
+const OpeningHoursWeekList: React.FC<OpeningHoursWeekListProps> = ({
+  data,
+  isLoading
+}) => {
+  return isLoading ? (
+    <OpeningHourWeekListSkeleton />
+  ) : (
+    <ul className="opening-hours__content">
+      {data.map(({ dateTime, openingHourEntries }) => {
+        const dateAsWeekday = formatDateToWeekday(dateTime);
+        const formattedDateForDisplay = dayjs(dateTime).format("DD/MM");
+
+        return (
+          <li key={formattedDateForDisplay} className="opening-hours__row">
+            <h3 className="opening-hours__individual-day">{`${dateAsWeekday}: d. ${formattedDateForDisplay}`}</h3>
+            {openingHourEntries.length > 0 ? (
+              <ul>
+                {openingHourEntries.map((item, categoryIndex) => (
+                  <OpeningHoursDayEntry
+                    key={item.id}
+                    data={item}
+                    isOdd={categoryIndex % 2 === 0}
+                  />
+                ))}
+              </ul>
+            ) : (
+              <p>
+                Biblioteket er <strong>lukket</strong> denne dag.
+              </p>
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+export default OpeningHoursWeekList;
diff --git a/src/apps/opening-hours/OpeningHourWeekListSkeleton.tsx b/src/apps/opening-hours/OpeningHourWeekListSkeleton.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import clsx from "clsx";
+
+const OpeningHourWeekListSkeleton = () => {
+  return (
+    <ul className="opening-hours__content">
+      {[...Array(5)].map(() => (
+        <li className="opening-hours__row">
+          <div className="opening-hours__individual-day ssc-line ssc-line-headline" />
+          <ul>
+            {[...Array(3)].map((_, index) => {
+              const isOdd = index % 2 === 0;
+              return (
+                <li>
+                  <div
+                    className={clsx("ssc-line", {
+                      "ssc-line--odd": !isOdd
+                    })}
+                  />
+                </li>
+              );
+            })}
+          </ul>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default OpeningHourWeekListSkeleton;