+
+
+
+
+
+
+
-
- {{ Math.round(percentage) }} %
-
-
-
-
-
-
-
diff --git a/services/ui/src/components/DefaultErrorState.vue b/services/ui/src/components/DefaultErrorState.vue
deleted file mode 100644
index 42d2b7ed..00000000
--- a/services/ui/src/components/DefaultErrorState.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-
- {{ caption }}
-
-
-
-
- {{ habit.name }}
- {{ habit.schedule | displaySchedule }}
-
-
-
- delete
-
-
- more_horiz
-
-
-
-
-
-
-
diff --git a/services/ui/src/components/HabitListContainer.vue b/services/ui/src/components/HabitListContainer.vue
deleted file mode 100644
index 09452b05..00000000
--- a/services/ui/src/components/HabitListContainer.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-
-
-
-
-
-
-
diff --git a/services/ui/src/components/HabitListEmptyState.vue b/services/ui/src/components/HabitListEmptyState.vue
deleted file mode 100644
index 267a333b..00000000
--- a/services/ui/src/components/HabitListEmptyState.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
-
-
-
-
- Historic Achievement
- + habitcentric +
+maintained by codecentric
+ + ); +} + +export function SocialMediaIcons() { + return ( + + +
+
+ );
+}
+
+LinkSection.defaultProps = {
+ className: "",
+ links: [],
+};
+
+export default LinkSection;
diff --git a/services/ui/src/footer/SocialMediaIcons.tsx b/services/ui/src/footer/SocialMediaIcons.tsx
new file mode 100644
index 00000000..6542df53
--- /dev/null
+++ b/services/ui/src/footer/SocialMediaIcons.tsx
@@ -0,0 +1 @@
+import React from "react";
diff --git a/services/ui/src/habits/details/Habit.vue b/services/ui/src/habits/details/Habit.vue
deleted file mode 100644
index 3ce6b13f..00000000
--- a/services/ui/src/habits/details/Habit.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-
- + {title} +
+ +
-
-
-
-
-
-
-
-
-
-
diff --git a/services/ui/src/header/Header.test.tsx b/services/ui/src/header/Header.test.tsx
new file mode 100644
index 00000000..18f19ccf
--- /dev/null
+++ b/services/ui/src/header/Header.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import Header from "./Header";
+
+it("renders codecentric logo", () => {
+ render(
-
-
- Habits
- chevron_right
- {{ this.$route.params.name }} -
- {{
- this.$route.params.schedule | displaySchedule
- }}
-
-
+
+ );
+}
+
+export default Header;
diff --git a/services/ui/src/index.css b/services/ui/src/index.css
new file mode 100644
index 00000000..18a34636
--- /dev/null
+++ b/services/ui/src/index.css
@@ -0,0 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/services/ui/src/index.tsx b/services/ui/src/index.tsx
new file mode 100644
index 00000000..79cbd514
--- /dev/null
+++ b/services/ui/src/index.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { BrowserRouter } from "react-router-dom";
+
+if (process.env.NODE_ENV === "development") {
+ const { worker } = require("./test-utils/mocks/worker");
+ worker.start();
+}
+
+ReactDOM.render(
+
+ 
+
+ habitcentric
+
+
+
+
+
+ );
+}
+
+type LoginButtonProps = AuthContextProps & { onError: () => void };
+
+function OidcLoginButton({
+ activeNavigator,
+ signinRedirect,
+ onError,
+}: LoginButtonProps) {
+ const waitingForRedirect = activeNavigator === "signinRedirect";
+
+ return (
+
+
+ Track your habits.
+
+
+
+ Track your habits.
+
+
+ Feel good.
+
+
+
+
+ + Even a journey of a thousand miles begins with a single step. Track + your habits now and start your adventure. +
+
+ {oidcIsEnabled() ? (
+ setRedirectError(true)}
+ />
+ ) : (
+
+ Oops... Something went wrong!
}
+
+
+ );
+}
+
+export default OverviewPage;
diff --git a/services/ui/src/overview/api/habit/api.test.ts b/services/ui/src/overview/api/habit/api.test.ts
new file mode 100644
index 00000000..05a6a7fe
--- /dev/null
+++ b/services/ui/src/overview/api/habit/api.test.ts
@@ -0,0 +1,33 @@
+import { createHabit, deleteHabit } from "./api";
+
+const mutatorMock = jest.fn();
+
+describe("create habit", () => {
+ it("should mutate habit state", async () => {
+ await createHabit("Jogging", 2, "DAILY", mutatorMock);
+ expect(mutatorMock).toHaveBeenCalledWith(["/habits", "access_token"]);
+ });
+
+ it("should mutate report achievement state", async () => {
+ await createHabit("Jogging", 2, "DAILY", mutatorMock);
+ expect(mutatorMock).toHaveBeenCalledWith([
+ "/report/achievement",
+ "access_token",
+ ]);
+ });
+});
+
+describe("delete habit", () => {
+ it("should mutate habit state", async () => {
+ await deleteHabit(1, mutatorMock);
+ expect(mutatorMock).toHaveBeenCalledWith(["/habits", "access_token"]);
+ });
+
+ it("should mutate report achievement state", async () => {
+ await deleteHabit(1, mutatorMock);
+ expect(mutatorMock).toHaveBeenCalledWith([
+ "/report/achievement",
+ "access_token",
+ ]);
+ });
+});
diff --git a/services/ui/src/overview/api/habit/api.ts b/services/ui/src/overview/api/habit/api.ts
new file mode 100644
index 00000000..fd7a2455
--- /dev/null
+++ b/services/ui/src/overview/api/habit/api.ts
@@ -0,0 +1,48 @@
+import { ScopedMutator } from "swr/dist/types";
+import { getUser } from "../../../auth/getUser";
+import { fetchWithToken } from "../../../auth/fetchWithToken";
+import { Frequency, Habit } from "./habit";
+
+export type CreateHabitRequest = Omit
+
+
+
+
+
+
+
+
+
+
+ {title && (
+
+ );
+}
+
+Card.defaultProps = {
+ title: null,
+ className: "",
+};
+
+export default Card;
diff --git a/services/ui/src/overview/components/CardPopover.tsx b/services/ui/src/overview/components/CardPopover.tsx
new file mode 100644
index 00000000..c0be25d3
--- /dev/null
+++ b/services/ui/src/overview/components/CardPopover.tsx
@@ -0,0 +1,87 @@
+import React, { PropsWithChildren, useState } from "react";
+import { Popover, Transition } from "@headlessui/react";
+import Card from "./Card";
+import { usePopper } from "react-popper";
+
+export type CardPopoverProps = PropsWithChildren<{
+ title: string;
+ ariaLabel: string;
+}>;
+
+function CardPopover({ title, ariaLabel, children }: CardPopoverProps) {
+ const [referenceElement, setReferenceElement] =
+ useState+ {title} +
+ )} + + {children} +
+
+
+ {children}
+
+
+
+
+
+
+ );
+}
+
+TextField.defaultProps = {
+ type: "text",
+};
+
+export function HabitForm() {
+ const [name, setName] = useState("");
+ const [repetitions, setRepetitions] = useState("1");
+ const [frequency, setFrequency] = useState
+ onChange(e.target.value)}
+ />
+
+
+
+ {name}
+{scheduleToString(schedule)}
+
+
+ Failed to load
;
+ if (!habits) return Loading...
;
+
+ const filteredHabits = habits.filter(
+ (habit) =>
+ nameStartsWithQuery(habit, query) || scheduleStartsWithQuery(habit, query)
+ );
+
+ return (
+
+
+ );
+}
+
+function nameStartsWithQuery(habit: Habit, query: string) {
+ return habit.name.toLowerCase().includes(query.toLowerCase());
+}
+
+function scheduleStartsWithQuery(habit: Habit, query: string) {
+ return scheduleToString(habit.schedule)
+ .toLowerCase()
+ .includes(query.toLowerCase());
+}
+
+type SearchInputProps = {
+ setQuery: (query: string) => void;
+};
+
+function SearchInput({ setQuery }: SearchInputProps) {
+ return (
+ -
+ {filteredHabits.map((habit) => (
+
+
+ );
+}
+
+export default HabitList;
diff --git a/services/ui/src/overview/components/list/TrackDatePicker.css b/services/ui/src/overview/components/list/TrackDatePicker.css
new file mode 100644
index 00000000..45ab6d56
--- /dev/null
+++ b/services/ui/src/overview/components/list/TrackDatePicker.css
@@ -0,0 +1,59 @@
+.react-datepicker__week {
+ @apply flex justify-around;
+}
+
+.react-datepicker__day-names {
+ @apply flex justify-around text-center text-xs font-medium text-gray-400;
+}
+
+.react-datepicker__day-name {
+ @apply flex h-8 w-8 items-center justify-center rounded-full py-1;
+}
+
+.react-datepicker__day {
+ @apply m-1 flex h-7 w-7 items-center justify-center rounded-md py-1 text-xs leading-loose text-gray-700 transition hover:cursor-pointer hover:bg-cc-primary-100 focus:outline-none sm:h-8 sm:w-8 sm:text-sm xl:h-9 xl:w-9;
+}
+
+.react-datepicker__day--disabled {
+ @apply bg-cc-secondary-500 opacity-60 hover:cursor-not-allowed hover:bg-cc-secondary-500;
+}
+
+.react-datepicker__day--highlighted {
+ @apply bg-cc-primary-500 hover:bg-cc-secondary-500 hover:ring-cc-secondary-500;
+}
+
+.react-datepicker__day--outside-month {
+ @apply text-gray-300;
+}
+
+.react-datepicker__day--in-range {
+ @apply bg-gray-200;
+}
+
+.react-datepicker__day--in-selecting-range {
+ @apply bg-cc-primary-200;
+}
+
+.react-datepicker__day--selecting-range-start {
+ @apply border-2 border-cc-primary-500 bg-white;
+}
+
+.react-datepicker__day--selecting-range-end {
+ @apply border-2 border-cc-primary-500 bg-white;
+}
+
+/*.react-datepicker__day--selected {*/
+/* @apply bg-cc-primary-500 focus:bg-cc-primary-500 !important;*/
+/*}*/
+
+.react-datepicker__day--keyboard-selected {
+ @apply ring-2 ring-cc-primary-500;
+}
+
+.react-datepicker__day--range-start {
+ @apply bg-cc-primary-500 text-white hover:bg-white hover:text-gray-700;
+}
+
+.react-datepicker__day--range-end {
+ @apply bg-cc-primary-500 text-white hover:bg-white hover:text-gray-700;
+}
diff --git a/services/ui/src/overview/components/list/TrackDatePicker.tsx b/services/ui/src/overview/components/list/TrackDatePicker.tsx
new file mode 100644
index 00000000..5ec6ba04
--- /dev/null
+++ b/services/ui/src/overview/components/list/TrackDatePicker.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import DatePicker from "react-datepicker";
+import "./TrackDatePicker.css";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/solid";
+import { format } from "date-fns";
+import { useTrackedDatesOfHabit } from "../../api/track/useTrackedDates";
+import { putTrackedDates } from "../../api/track/api";
+import { useSWRConfig } from "swr";
+
+export type TrackDatePickerProps = {
+ habitId: number;
+};
+
+function TrackDatePicker({ habitId }: TrackDatePickerProps) {
+ const { trackedDates, error } = useTrackedDatesOfHabit(habitId);
+ const { mutate } = useSWRConfig();
+
+ if (error) return Failed to load
;
+ if (!trackedDates) return Loading...
;
+
+ async function updateTrackedDates(selectedDate: Date) {
+ const updatedTrackedDates =
+ trackedDates!.findIndex(
+ (trackedDate) => trackedDate.valueOf() === selectedDate.valueOf()
+ ) >= 0
+ ? trackedDates!.filter(
+ (trackedDate) => trackedDate.valueOf() !== selectedDate.valueOf()
+ )
+ : [...trackedDates!, selectedDate];
+ await putTrackedDates(habitId, updatedTrackedDates, mutate);
+ }
+
+ return (
+
+
+ {format(props.date, "MMMM yyyy")}
+
+
+ );
+}
+
+export default TrackDatePicker;
diff --git a/services/ui/src/overview/components/report/Progress.tsx b/services/ui/src/overview/components/report/Progress.tsx
new file mode 100644
index 00000000..625c4b88
--- /dev/null
+++ b/services/ui/src/overview/components/report/Progress.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+export type ProgressProps = {
+ title: string;
+ percentage: number;
+};
+
+function Progress({ title, percentage }: ProgressProps) {
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+function round(value: number, precision?: number): number {
+ const multiplier = Math.pow(10, precision || 0);
+ return Math.round(value * multiplier) / multiplier;
+}
+
+Progress.defaultProps = {
+ percentage: 0,
+};
+
+export default Progress;
diff --git a/services/ui/src/overview/components/report/Report.test.tsx b/services/ui/src/overview/components/report/Report.test.tsx
new file mode 100644
index 00000000..703cb32b
--- /dev/null
+++ b/services/ui/src/overview/components/report/Report.test.tsx
@@ -0,0 +1,36 @@
+import Report from "./Report";
+import { screen } from "@testing-library/react";
+import { renderWithoutSwrCache } from "../../../test-utils/swr/RenderWithoutSwrCache";
+
+it("renders loading message before showing percentages", () => {
+ renderWithoutSwrCache({title}
++ {round(percentage, 1)}% +
+
+
+
+ Failed to load
;
+ if (!achievement) {
+ return Loading...
;
+ }
+
+ return (
+
+
+
+
+ );
+}
+
+export default Report;
diff --git a/services/ui/src/plugins/vuetify.js b/services/ui/src/plugins/vuetify.js
deleted file mode 100644
index a53dcace..00000000
--- a/services/ui/src/plugins/vuetify.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Vue from "vue";
-import Vuetify from "vuetify/lib";
-import "vuetify/src/stylus/app.styl";
-
-Vue.use(Vuetify, {
- iconfont: "md"
-});
diff --git a/services/ui/src/react-app-env.d.ts b/services/ui/src/react-app-env.d.ts
new file mode 100644
index 00000000..6431bc5f
--- /dev/null
+++ b/services/ui/src/react-app-env.d.ts
@@ -0,0 +1 @@
+///