OrmaCarbon Frontend Test: Rick and Morty Data Project

api/characters.js

@@ -0,0 +1,37 @@
+import axios from "./index";
+
+export const fetchCharacters = async (page) => {
+  try {
+    const response = await axios.get(`/character/?page=${page}`);
+    return response?.data;
+  } catch (error) {
+    return {
+      error: true,
+      response: error?.message ?? "Something went wrong",
+    };
+  }
+};
+
+export const fetchFilteredCharacters = async (name) => {
+  try {
+    const response = await axios.get(`/character/?name=${name}`);
+    return response?.data;
+  } catch (error) {
+        return {
+      error: true,
+      response: error?.message ?? "Something went wrong",
+    };
+  }
+};
+
+export const fetchCharacterById = async (id) => {
+  try {
+    const response = await axios.get(`/character/${id}`);
+    return response?.data;
+  } catch (error) {
+        return {
+      error: true,
+      response: error?.message ?? "Something went wrong",
+    };
+  }
+}

api/episodes.js

@@ -0,0 +1,37 @@
+import axios from "./index";
+
+export const fetchEpisodes = async (page) => {
+  try {
+    const response = await axios.get(`/episode/?page=${page}`);
+    return response?.data;
+  } catch (error) {
+    return {
+      error: true,
+      response: error?.message ?? "Something went wrong",
+    };
+  }
+};
+
+export const fetchFilteredEpisodes = async (name) => {
+  try {
+    const response = await axios.get(`/episode/?name=${name}`);
+    return response?.data;
+  } catch (error) {
+    return {
+      error: true,
+      response: error?.message ?? "Something went wrong",
+    };
+  }
+};
+
+export const fetchEpisodeById = async (id) => {
+  try {
+    const response = await axios.get(`/episode/${id}`);
+    return response?.data;
+  } catch (error) {
+    return {
+      error: true,
+      response: error?.message ?? "Something went wrong",
+    };
+  }
+};

api/index.js

@@ -0,0 +1,5 @@
+import axios from "axios";
+
+axios.defaults.baseURL = process.env.baseUrl;
+
+export default axios;

api/joke.js

@@ -0,0 +1,16 @@
+import axios from "axios";
+
+export const fetchJoke = async () => {
+  try {
+    // fetching jokes and blocking nsfw, racist and sexist jokes
+    const response = await axios.get(
+      "https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,racist,sexist"
+    );
+    return response?.data;
+  } catch (error) {
+    return {
+      error: true,
+      response: error?.message ?? "Something went wrong",
+    };
+  }
+};

api/locations.js

@@ -0,0 +1,37 @@
+import axios from "./index";
+
+export const fetchLocations = async (page) => {
+  try {
+    const response = await axios.get(`/location/?page=${page}`);
+    return response?.data;
+  } catch (error) {
+    return {
+      error: true,
+      response: error?.message ?? "Something went wrong",
+    };
+  }
+};
+
+export const fetchFilteredLocations = async (name) => {
+  try {
+    const response = await axios.get(`/location/?name=${name}`);
+    return response?.data;
+  } catch (error) {
+        return {
+      error: true,
+      response: error?.message ?? "Something went wrong",
+    };
+  }
+};
+
+export const fetchLocationById = async (id) => {
+  try {
+    const response = await axios.get(`/location/${id}`);
+    return response?.data;
+  } catch (error) {
+        return {
+      error: true,
+      response: error?.message ?? "Something went wrong",
+    };
+  }
+}

components/CustomButton/index.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { Button } from "./styles";
+
+function CustomButton({ children, action, disabled, theme, size }) {
+  return (
+    <Button disabled={disabled} theme={theme} size={size} onClick={action}>
+      {children}
+    </Button>
+  );
+}
+
+export default CustomButton;

components/CustomButton/styles.js

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+
+export const Button = styled.button`
+  padding: 1em 1.5em;
+  border: ${({ theme }) => (theme === "ghost" ? "1px solid #000000" : "none")};
+  border-radius: 8px;
+  font-size: ${({ size }) =>
+    size === "small" ? "0.7rem" : size === "big" ? "1.2rem" : "1rem"};
+  font-weight: 600;
+  cursor: pointer;
+  opacity: ${({ disabled }) => (disabled ? "0.5" : "1")};
+  pointer-events: ${({ disabled }) => (disabled ? "none" : "auto")};
+  background-color: ${({ theme }) =>
+    theme === "ghost"
+      ? "#fff"
+      : theme === "success"
+      ? "#00ff00"
+      : theme === "danger"
+      ? "#e97777"
+      : "#1e90ff"};
+  color: ${({ theme }) => (theme === "ghost" ? "#000000" : "#fff")};
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    opacity: 0.8;
+    color: ${({ theme }) => (theme === "ghost" ? "#000000" : "#ffffff")};
+  }
+`;

components/CustomModal/index.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { ModalWrapper } from "./styles";
+
+function CustomModal({ children, isVisible }) {
+  return (
+    <>
+      {isVisible && (
+        <ModalWrapper>
+          <div className="modal">{children}</div>
+        </ModalWrapper>
+      )}
+    </>
+  );
+}
+
+export default CustomModal;

components/CustomModal/styles.js

@@ -0,0 +1,38 @@
+import styled, { keyframes } from "styled-components";
+
+const zoomIn = keyframes`
+    from {
+        transform: scale(0);
+    }
+    to {
+        transform: scale(1);
+    }
+`;
+
+export const ModalWrapper = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 100;
+
+  .modal {
+    width: 100%;
+    max-width: 500px;
+    background-color: #fff;
+    border-radius: 5px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    color: #000000;
+    animation: ${zoomIn} 0.3s ease-in-out;
+  }
+`;

components/Header/index.js

@@ -0,0 +1,36 @@
+import { useContext } from "react";
+import { HeaderWrapper, SwitchContainer, Slider, Input } from "./styles";
+import { MainWrapper } from "../Wrapper";
+import Image from "next/image";
+import logo from "../../images/logo.png";
+import { useRouter } from "next/router";
+
+const Header = () => {
+  const { darkMode, setDarkMode, isLogged } = useContext(MainWrapper);
+  const router = useRouter();
+
+  return (
+    <HeaderWrapper darkMode={darkMode}>
+      <div
+        className="title"
+        onClick={() => router.push(!isLogged ? "/" : "/dashlist")}
+      >
+        <Image src={logo} alt="Picture of the author" />
+        <span>Rick and Morty Data</span>
+      </div>
+      <div className="darkmode-area">
+        <span data-testid="darkmode-text">Dark mode: {!darkMode ? "off" : "on"}</span>
+        <SwitchContainer data-testid="darkmode-switch">
+          <Input
+            type="checkbox"
+            checked={darkMode}
+            onChange={() => setDarkMode(!darkMode)}
+          />
+          <Slider />
+        </SwitchContainer>
+      </div>
+    </HeaderWrapper>
+  );
+};
+
+export default Header;

components/Header/styles.js

@@ -0,0 +1,101 @@
+import styled from "styled-components";
+
+export const HeaderWrapper = styled.div`
+  height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.5em;
+  background: ${({ darkMode }) => (darkMode ? "#393E46" : "#ece8dd")};
+  border-bottom: 1px solid ${({ darkMode }) => (darkMode ? "#ece8dd" : "#8080802c")};
+
+  .title {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    img {
+      width: 70px;
+      height: 70px;
+
+      @media (max-width: 768px) {
+        width: 50px;
+        height: 50px;
+      }
+    }
+
+    span {
+      font-size: 1.2em;
+      font-weight: 600;
+
+      @media (max-width: 768px) {
+        font-size: 0.7em;
+      }
+    }
+  }
+
+  .darkmode-area {
+    display: flex;
+    align-items: center;
+    span {
+      margin-right: 1em;
+
+      @media (max-width: 768px) {
+        font-size: 0.7em;
+      }
+    }
+  }
+`;
+
+export const SwitchContainer = styled.label`
+  position: relative;
+  display: inline-block;
+  width: 65px;
+  height: 24px;
+`;
+
+export const Slider = styled.span`
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 34px;
+
+  &:before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    -webkit-transition: 0.4s;
+    transition: 0.4s;
+    border-radius: 50%;
+  }
+`;
+
+export const Input = styled.input`
+  opacity: 0;
+  width: 0;
+  height: 0;
+
+  &:checked + ${Slider} {
+    background-color: #cdf0ea;
+  }
+
+  &:focus + ${Slider} {
+    box-shadow: 0 0 1px #cdf0ea;
+  }
+
+  &:checked + ${Slider}:before {
+    -webkit-transform: translateX(26px);
+    -ms-transform: translateX(26px);
+    transform: translateX(26px);
+  }
+`;