added in lookup mocks

components/elements/index.js

@@ -1,3 +1,5 @@
+import useSWR from "swr";
+
 export function Textfield(props) {
     const { name, label } = props;
 
@@ -141,10 +143,7 @@ export function YesNofield(props) {
                         {props.label}
                     </label>
                 </legend>
-                <div id="changed-name-hint" className="govuk-hint">
-                    This includes changing your last name or spelling your name
-                    differently.
-                </div>
+
                 <div className="govuk-radios govuk-radios--inline">
                     <div className="govuk-radios__item">
                         <input
@@ -183,7 +182,31 @@ export function YesNofield(props) {
 }
 
 export function PickList(props) {
-    const { name, label } = props;
+    const { name, label, datafieldname } = props;
+
+    const fetcher = (url) => fetch(url).then((res) => res.json());
+
+    const { data, error } = useSWR("/api/lookups/" + datafieldname, fetcher);
+    if (error)
+        return (
+            <div className="govuk-form-group">
+                <label className="govuk-label govuk-body-m" htmlFor="sort">
+                    {props.label}
+                </label>
+                <select className="govuk-select" id="sort" name="sort">
+                    <option value="">empty</option>
+                </select>
+            </div>
+        );
+    if (!data)
+        return (
+            <div>
+                <div className="govuk-form-group">{props.label} loading...</div>
+            </div>
+        );
+    console.log(JSON.stringify(data.GlobalOptionSet.Options));
+
+    const dropdownObj = data.GlobalOptionSet.Options;
 
     return (
         <div className="govuk-form-group">
@@ -191,12 +214,19 @@ export function PickList(props) {
                 {props.label}
             </label>
             <select className="govuk-select" id="sort" name="sort">
-                <option value="published">Recently published</option>
-                <option value="updated" defaultValue>
-                    Recently updated
-                </option>
-                <option value="views">Most views</option>
-                <option value="comments">Most comments</option>
+                {Object.keys(dropdownObj).map((key, index) => {
+                    return (
+                        <option
+                            key={key}
+                            value={
+                                dropdownObj[key].Label.LocalizedLabels[0]
+                                    .MetadataId
+                            }
+                        >
+                            {dropdownObj[key].Label.LocalizedLabels[0].Label}
+                        </option>
+                    );
+                })}
             </select>
         </div>
     );