add mock github requests + corrections

frontend/src/components/avatars.tsx

@@ -1,8 +1,12 @@
 import { Avatar } from '../types/piccapTypes';
 
-function Avatars({ elem } : { elem: Avatar }) {
+function Avatars({
+  elem,
+} : {
+  elem: Avatar,
+}) {
   return (
-    <a href={elem.html_url} className="avatar tooltip" data-tip={elem.login} key={elem.login}>
+    <a href={elem.html_url} className="avatar tooltip" data-tip={elem.login}>
       <div className="ring-primary ring-offset-base-100 w-12 rounded-full ring ring-offset-2">
         <img
           src={elem.avatar_url}

frontend/src/components/checkbox.tsx

@@ -0,0 +1,27 @@
+import { ChangeEventHandler } from 'react';
+
+function Checkbox({
+  label,
+  onChange,
+  value,
+} : {
+  label: string,
+  value: boolean,
+  onChange?: ChangeEventHandler<HTMLInputElement>,
+}) {
+  return (
+    <div className="form-control">
+      <label className="label cursor-pointer">
+        <span className="label-text">{label}</span>
+        <input
+          type="checkbox"
+          defaultChecked={value}
+          className="checkbox"
+          onChange={onChange}
+        />
+      </label>
+    </div>
+  );
+}
+
+export default Checkbox;

frontend/src/components/input.tsx

@@ -0,0 +1,29 @@
+import { ChangeEventHandler } from 'react';
+
+function Input({
+  label,
+  value,
+  onChange,
+} : {
+  label: string,
+  value: string,
+  onChange: ChangeEventHandler<HTMLInputElement>,
+}) {
+  return (
+    <div className="form-control">
+      <label className="form-control w-full max-w-xs">
+        <div className="label">
+          <span className="label-text">{label}</span>
+        </div>
+        <input
+          type="text"
+          value={value}
+          onChange={onChange}
+          className="input input-bordered w-full max-w-xs"
+        />
+      </label>
+    </div>
+  );
+}
+
+export default Input;

frontend/src/components/select.tsx

@@ -0,0 +1,35 @@
+import { ChangeEventHandler } from 'react';
+
+function Select({
+  label,
+  options,
+  value,
+  onChange = () => {},
+}
+: {
+  label: string,
+  options: {
+    value: string,
+    label: string
+  }[],
+  onChange?: ChangeEventHandler<HTMLSelectElement>,
+}) {
+  return (
+    <div className="form-control">
+      <label className="form-control w-full max-w-xs">
+        <div className="label">
+          <span className="label-text">{label}</span>
+        </div>
+        <select
+          value={value}
+          className="select select-bordered"
+          onChange={onChange}
+        >
+          {options.map((elem) => <option value={elem.value}>{elem.label}</option>)}
+        </select>
+      </label>
+    </div>
+  );
+}
+
+export default Select;

frontend/src/mock/github.json

@@ -0,0 +1,18 @@
+[
+    {"login":"TBSniller",
+    "id":51515147,
+    "node_id":"MDQ6VXNlcjUxNTE1MTQ3",
+    "avatar_url":"https://avatars.githubusercontent.com/u/51515147?v=4",
+    "gravatar_id":"","url":"https://api.github.com/users/TBSniller",
+    "html_url":"https://github.com/TBSniller",
+    "followers_url":"https://api.github.com/users/TBSniller/followers",
+    "following_url":"https://api.github.com/users/TBSniller/following{/other_user}",
+    "gists_url":"https://api.github.com/users/TBSniller/gists{/gist_id}",
+    "starred_url":"https://api.github.com/users/TBSniller/starred{/owner}{/repo}",
+    "subscriptions_url":"https://api.github.com/users/TBSniller/subscriptions",
+    "organizations_url":"https://api.github.com/users/TBSniller/orgs",
+    "repos_url":"https://api.github.com/users/TBSniller/repos",
+    "events_url":"https://api.github.com/users/TBSniller/events{/privacy}",
+    "received_events_url":"https://api.github.com/users/TBSniller/received_events",
+    "type":"User","site_admin":false,"contributions":197},
+    {"login":"tuxuser","id":462620,"node_id":"MDQ6VXNlcjQ2MjYyMA==","avatar_url":"https://avatars.githubusercontent.com/u/462620?v=4","gravatar_id":"","url":"https://api.github.com/users/tuxuser","html_url":"https://github.com/tuxuser","followers_url":"https://api.github.com/users/tuxuser/followers","following_url":"https://api.github.com/users/tuxuser/following{/other_user}","gists_url":"https://api.github.com/users/tuxuser/gists{/gist_id}","starred_url":"https://api.github.com/users/tuxuser/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tuxuser/subscriptions","organizations_url":"https://api.github.com/users/tuxuser/orgs","repos_url":"https://api.github.com/users/tuxuser/repos","events_url":"https://api.github.com/users/tuxuser/events{/privacy}","received_events_url":"https://api.github.com/users/tuxuser/received_events","type":"User","site_admin":false,"contributions":5},{"login":"Informatic","id":1131102,"node_id":"MDQ6VXNlcjExMzExMDI=","avatar_url":"https://avatars.githubusercontent.com/u/1131102?v=4","gravatar_id":"","url":"https://api.github.com/users/Informatic","html_url":"https://github.com/Informatic","followers_url":"https://api.github.com/users/Informatic/followers","following_url":"https://api.github.com/users/Informatic/following{/other_user}","gists_url":"https://api.github.com/users/Informatic/gists{/gist_id}","starred_url":"https://api.github.com/users/Informatic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Informatic/subscriptions","organizations_url":"https://api.github.com/users/Informatic/orgs","repos_url":"https://api.github.com/users/Informatic/repos","events_url":"https://api.github.com/users/Informatic/events{/privacy}","received_events_url":"https://api.github.com/users/Informatic/received_events","type":"User","site_admin":false,"contributions":4}]

frontend/src/pages/about.tsx

@@ -1,40 +1,44 @@
-import { useEffect, useState } from 'react';
-import getContributors from '../util/contributorsRequests';
 import Avatars from '../components/avatars';
 import { Avatar } from '../types/piccapTypes';
 
-function About() {
-  const [hyperionContributors, setHyperionContributors] = useState<Avatar[]>([]);
-  const [piccapContributors, setPiccapContributors] = useState<Avatar[]>([]);
-
-  useEffect(() => {
-    getContributors('webosbrew', 'hyperion-webos', setHyperionContributors);
-    getContributors('tbsniller', 'piccap', setPiccapContributors);
-  }, []);
-
+function About({
+  hyperionCont,
+  piccapCont,
+} : {
+  hyperionCont: Avatar[],
+  piccapCont: Avatar[],
+}) {
   return (
-    <div className="grid grid-cols-2 gap-4 h-full items-center content-center">
+    <div className="grid grid-cols-2 gap-4 items-center content-center">
       <div className="card bg-primary w-full text-white shadow-xl">
         <div className="card-body">
           <h2 className="card-title">Some info about this project</h2>
           <p>
-            PicCap is the frontend app, which you have installed on your TV and you can see here, to make things as easy as possible.
-            It ships and controls the seperated hyperion-webos background service, which controls the capture interfaces
-            on your TV based on reverse engineering, proccesses the output and sends the resulting low quality image data to a
+            PicCap is the frontend app, which you have installed on your TV
+            and you can see here, to make things as easy as possible.
+            It ships and controls the seperated hyperion-webos background
+            service, which controls the capture interfaces
+            on your TV based on reverse engineering, proccesses the output
+            and sends the resulting low quality image data to a
             receiver like Hyperion's flatbuffer server.
           </p>
           <p>
-            On newer TVs there is no official way for capturing DRM-protected content like Netflix or Amazon. This restriction doesn't take place for content comming from an HDMI input.
+            On newer TVs there is no official way for capturing DRM-protected
+            content like Netflix or Amazon. This restriction doesn't take
+            place for content comming from an HDMI input.
           </p>
           <p>
-            So currently as a workaround you can play your media using your PC, FireTV-Stick or Chromecast and still enjoy your LEDs.
+            So currently as a workaround you can play your media using your PC,
+            FireTV-Stick or Chromecast and still enjoy your LEDs.
           </p>
           <p>
-            This app requires to be run as root and tries to do this at the first start using the Homebrew Channel.
+            This app requires to be run as root and tries to do this
+            at the first start using the Homebrew Channel.
           </p>
           <hr />
           <p>
-            Feel free to raise an issue or pull request, or come to the OpenLG-Discord, if you have some questions.
+            Feel free to raise an issue or pull request, or come to
+            the OpenLG-Discord, if you have some questions.
           </p>
           <p>
             GitHub-Links:
@@ -57,12 +61,12 @@ function About() {
           </p>
           <p className="font-semibold">hyperion-webos</p>
           <div className="avatars">
-            {hyperionContributors.map((elem) => <Avatars elem={elem} />)}
+            {hyperionCont.map((elem) => <Avatars key={`${elem.login}hyperion`} elem={elem} />)}
           </div>
 
           <p className="font-semibold">PicCap</p>
           <div className="avatars">
-            {piccapContributors.map((elem) => <Avatars elem={elem} />)}
+            {piccapCont.map((elem) => <Avatars key={`${elem.login}piccap`} elem={elem} />)}
           </div>
         </div>
       </div>

frontend/src/pages/app.tsx

@@ -1,21 +1,39 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { EnumPages } from '../types/enums';
 import Navigation from '../components/navigation';
 import Footer from '../components/footer';
 import Logs from './logs';
 import About from './about';
 import Settings from './settings';
+import { Avatar } from '../types/piccapTypes';
+import getContributors from '../util/contributorsRequests';
 
 function App() {
   const [view, setView] = useState(EnumPages.SETTINGS);
+  const [hyperionContributors, setHyperionContributors] = useState<Avatar[]>([]);
+  const [piccapContributors, setPiccapContributors] = useState<Avatar[]>([]);
+
+  useEffect(() => {
+    if (hyperionContributors.length === 0) {
+      getContributors('webosbrew', 'hyperion-webos', setHyperionContributors);
+    }
+    if (piccapContributors.length === 0) {
+      getContributors('tbsniller', 'piccap', setPiccapContributors);
+    }
+  }, []);
 
   return (
     <div className="flex flex-col h-screen">
       <Navigation viewHandle={setView} />
-      <div className="h-full container mb-auto mx-auto">
+      <div className="h-full container mb-auto mx-auto py-2">
         {view === EnumPages.SETTINGS && <Settings />}
         {view === EnumPages.LOGS && <Logs />}
-        {view === EnumPages.ABOUT && <About />}
+        {view === EnumPages.ABOUT && (
+          <About 
+            hyperionCont={hyperionContributors}
+            piccapCont={piccapContributors}
+          />
+        )}
       </div>
       <Footer />
     </div>

frontend/src/pages/logs.tsx

@@ -5,7 +5,7 @@ function Logs() {
   const [logView, setLogView] = useState(EnumLogs.PICCAP);
 
   return (
-    <div className="h-full py-2">
+    <>
       <div role="alert" className="alert alert-info">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -75,7 +75,7 @@ function Logs() {
           <textarea className="textarea textarea-primary w-full" rows={15} />
         </div>
       )}
-    </div>
+    </>
   );
 }