Feature Requests

src/components/app.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Icon from "./icon";
 import styled from "styled-components";
 import selectedTheme from "../lib/theme";
@@ -48,20 +48,31 @@ export interface IAppProps {
   icon: string;
   url: string;
   displayURL: string;
+  newTab?: boolean;
 }
 
 /**
  * Renders a single app shortcut
  * @param {IAppProps} props - The props of the given app
  */
-export const App = ({ name, icon, url, displayURL }: IAppProps) => (
-  <AppContainer>
-    <IconContainer>
-      <Icon name={icon} />
-    </IconContainer>
-    <DetailsContainer>
-      <AppLink href={url}>{name}</AppLink>
-      <AppDescription>{displayURL}</AppDescription>
-    </DetailsContainer>
-  </AppContainer>
-);
+export const App = ({ name, icon, url, displayURL, newTab }: IAppProps) => {
+
+  useEffect(() => { console.log(newTab) }, [newTab])
+
+  return (
+    <AppContainer>
+      <IconContainer>
+        <Icon name={icon} />
+      </IconContainer>
+      <DetailsContainer>
+
+        {
+          (newTab !== undefined && newTab) ?
+            <AppLink href={url} target="_blank" rel="noopener noreferrer">{name}</AppLink> : <AppLink href={url}>{name}</AppLink>
+        }
+
+        <AppDescription>{displayURL}</AppDescription>
+      </DetailsContainer>
+    </AppContainer>
+  );
+}

src/components/appCategory.tsx

@@ -31,6 +31,7 @@ export const AppCategory = ({ name, items }: IAppCategoryProps) => (
             icon={app.icon}
             url={app.url}
             displayURL={app.displayURL}
+            newTab={app.newTab}
           />
         </Item>
       ))}

src/components/appList.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { AppCategory, IAppCategoryProps } from "./appCategory";
 import { IAppProps } from "./app";
 

src/components/greeter.tsx

@@ -1,6 +1,4 @@
-import React from "react";
 import styled from "styled-components";
-
 import selectedTheme from "../lib/theme";
 
 const GreeterContainer = styled.div`
@@ -22,48 +20,45 @@ const DateText = styled.h3`
   color: ${selectedTheme.accentColor};
 `;
 
-const monthNames = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December",
-];
+export interface IGreeterProps {
+  months: Array<string>;
+  days: Array<string>;
+  greetings: Array<IGreetingProps>;
+  dateformat: string;
+}
 
-const weekDayNames = [
-  "Sunday",
-  "Monday",
-  "Tuesday",
-  "Wednesday",
-  "Thursday",
-  "Friday",
-  "Saturday",
-];
+interface IGreetingProps {
+  greeting: string;
+  start: number;
+  end: number;
+}
+
+interface IGreeterComponentProps {
+  data: IGreeterProps;
+}
+
+/**
+ * 
+ * @param a the number that's supposed to be checked
+ * @param b the minimum
+ * @param c the maximum
+ */
+const isBetween = (a: number, b: number, c: number): boolean => (a > b && a < c)
 
 /**
  * Returns a greeting based on the current time
  * @returns {string} - A greeting
  */
-const getGreeting = () => {
-  switch (Math.floor(new Date().getHours() / 6)) {
-    case 0:
-      return "Good night!";
-    case 1:
-      return "Good morning!";
-    case 2:
-      return "Good afternoon!";
-    case 3:
-      return "Good evening!";
-    default:
-      break;
-  }
+const getGreeting = (greetings: Array<IGreetingProps>): string => {
+
+  let hours = Math.floor(new Date().getHours())
+  let result = "";
+
+  greetings.forEach(greeting => {
+    if (isBetween(hours, greeting.start, greeting.end)) result = greeting.greeting;
+  })
+
+  return result;
 };
 
 /**
@@ -89,30 +84,28 @@ const getExtension = (day: number) => {
 
 /**
  * Generates the current date
+ * @param {string} format - The format of the date string
  * @returns {string} - The current date as a string
  */
-const getDateString = () => {
+const getDateString = (weekdays: Array<string>, months: Array<string>, format: string) => {
   let currentDate = new Date();
 
-  return (
-    weekDayNames[currentDate.getUTCDay()] +
-    ", " +
-    monthNames[currentDate.getUTCMonth()] +
-    " " +
-    currentDate.getDate() +
-    getExtension(currentDate.getDate()) +
-    " " +
-    currentDate.getFullYear()
-  );
+  let weekday = weekdays[currentDate.getUTCDay()];
+  let day = currentDate.getDate();
+  let month = months[currentDate.getUTCMonth()];
+  let extension = getExtension(day);
+  let year = currentDate.getFullYear();
+
+  return format.replace("%wd", weekday).replace("%d", day.toString()).replace("%e", extension).replace("%m", month).replace("%y", year.toString());
 };
 
 /**
  * Renders the Greeter
  */
-const Greeter = () => (
+const Greeter = ({ data }: IGreeterComponentProps) => (
   <GreeterContainer>
-    <DateText>{getDateString()}</DateText>
-    <GreetText>{getGreeting()}</GreetText>
+    <DateText>{getDateString(data.days, data.months, data.dateformat)}</DateText>
+    <GreetText>{getGreeting(data.greetings)}</GreetText>
   </GreeterContainer>
 );
 

src/components/settings.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 
-import Select, { Styles, ValueType } from "react-select";
+import Select, { ValueType } from "react-select";
 
 import { ISearchProviderProps } from "./searchBar";
 import selectedTheme, { setTheme, IThemeProps } from "../lib/theme";
@@ -9,17 +9,6 @@ import { Button, SubHeadline } from "./elements";
 
 import Modal from "./modal";
 
-interface IHoverProps {
-  color?: string;
-  backgroundColor?: string;
-  border?: string;
-  borderColor?: string;
-}
-
-interface IPseudoProps extends React.CSSProperties {
-  "&:hover": IHoverProps
-}
-
 const FormContainer = styled.div`
   display: grid;
   grid-template-columns: auto auto auto;
@@ -55,22 +44,12 @@ const SectionHeadline = styled(SubHeadline)`
   margin-bottom: 0.5rem;
 `;
 
-const SelectorStyle: Partial<Styles<IThemeProps, false>> = {
-  indicatorSeparator: () => ({
-    display: "none",
-  }),
-  container: (base: React.CSSProperties): React.CSSProperties => ({
+const SelectorStyle: any = {
+  container: (base: any): any => ({
     ...base,
     margin: "0 2px",
   }),
-  dropdownIndicator: (base: React.CSSProperties): IPseudoProps => ({
-    ...base,
-    color: selectedTheme.mainColor,
-    "&:hover": {
-      color: selectedTheme.mainColor
-    }
-  }),
-  control: (base: React.CSSProperties): IPseudoProps => ({
+  control: (base: any): any => ({
     ...base,
     fontWeight: 500,
     color: selectedTheme.mainColor,
@@ -86,7 +65,17 @@ const SelectorStyle: Partial<Styles<IThemeProps, false>> = {
       borderColor: selectedTheme.mainColor
     },
   }),
-  menu: (base: React.CSSProperties): React.CSSProperties => ({
+  dropdownIndicator: (base: any): any => ({
+    ...base,
+    color: selectedTheme.mainColor,
+    "&:hover": {
+      color: selectedTheme.mainColor
+    }
+  }),
+  indicatorSeparator: () => ({
+    display: "none",
+  }),
+  menu: (base: any): any => ({
     ...base,
     backgroundColor: selectedTheme.backgroundColor,
     border: "1px solid " + selectedTheme.mainColor,
@@ -94,7 +83,7 @@ const SelectorStyle: Partial<Styles<IThemeProps, false>> = {
     boxShadow: "none",
     margin: "4px 0"
   }),
-  option: (base: React.CSSProperties): IPseudoProps => ({
+  option: (base: any): any => ({
     ...base,
     fontWeight: 500,
     color: selectedTheme.mainColor,
@@ -107,7 +96,7 @@ const SelectorStyle: Partial<Styles<IThemeProps, false>> = {
       color: selectedTheme.backgroundColor,
     },
   }),
-  singleValue: (base: React.CSSProperties): React.CSSProperties => ({
+  singleValue: (base: any): any => ({
     ...base,
     color: selectedTheme.mainColor,
   }),