Clean version of project for NextJS lesson

Author: Stacy-Imladris

Diff for: .babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    [
+      "styled-components",
+      {
+        "ssr": true,
+        "displayName": true
+      }
+    ]
+  ]
+}

Diff for: .env.local

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_RICK_API_URL=https://rickandmortyapi.com/api
+NEXT_PUBLIC_API_URL=http://localhost:3000/api
+NEXT_PUBLIC_SECRET_TOKEN=KfILnCKwQLCd

Diff for: .eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

Diff for: .gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+#.env*.local
+# let .env file to be available on github for lesson purpose
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+/.idea

Diff for: README.md

@@ -0,0 +1,19 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+### @stacy_imladris
+
+### Have fun! :)

Diff for: assets/api/api.ts

@@ -0,0 +1,11 @@
+import { instance, instanceRick } from "./instances";
+import { RickAndMortyApi } from "./rick-and-morty-api";
+import { NextJsApi } from "./next-js-api";
+
+const rickAndMortyApi = new RickAndMortyApi(instanceRick);
+const nextJsApi = new NextJsApi(instance);
+
+export const API = {
+  rickAndMorty: rickAndMortyApi,
+  nextJs: nextJsApi,
+};

Diff for: assets/api/instances.ts

@@ -0,0 +1,15 @@
+import axios from "axios";
+
+/**
+ * Instance for NextJS API
+ */
+export const instance = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_URL,
+});
+
+/**
+ * Instance for Rick and Morty API
+ */
+export const instanceRick = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_RICK_API_URL,
+});

Diff for: assets/api/next-js-api.ts

@@ -0,0 +1,5 @@
+import {AxiosInstance} from 'axios';
+
+export class NextJsApi {
+    constructor(private instance: AxiosInstance) {}
+}

Diff for: assets/api/rick-and-morty-api.ts

@@ -0,0 +1,105 @@
+import { AxiosInstance } from "axios";
+import {Nullable} from '../types/Nullable';
+
+export class RickAndMortyApi {
+  constructor(private instance: AxiosInstance) {}
+
+  public getCharacters(params?: ParamsType) {
+    return this.instance
+      .get<ResponseType<CharacterType>>("/character", { params })
+      .then((res) => res.data);
+  }
+
+  public getCharacter(id: string) {
+    return this.instance
+      .get<CharacterType>(`/character/${id}`)
+      .then((res) => res.data);
+  }
+
+  public getLocations(params?: ParamsType) {
+    return this.instance
+      .get<ResponseType<LocationType>>("/location", { params })
+      .then((res) => res.data);
+  }
+
+  public getLocation(id: string) {
+    return this.instance
+      .get<LocationType>(`/location/${id}`)
+      .then((res) => res.data);
+  }
+
+  public getEpisodes(params?: ParamsType) {
+    return this.instance
+      .get<ResponseType<EpisodeType>>("/episode", { params })
+      .then((res) => res.data);
+  }
+
+  public getEpisode(id: string) {
+    return this.instance
+      .get<EpisodeType>(`/episode/${id}`)
+      .then((res) => res.data);
+  }
+}
+
+/**
+ * types
+ */
+export type ResponseType<T> = {
+  info: InfoType;
+  results: T[];
+};
+
+type InfoType = {
+  count: number;
+  pages: number;
+  next: Nullable<string>;
+  prev: Nullable<string>;
+};
+
+export type CharacterType = {
+  id: number;
+  name: string;
+  status: CharacterStatusType;
+  species: string;
+  type: string;
+  gender: CharacterGenderType;
+  origin: ExtraDataType;
+  location: ExtraDataType;
+  image: string;
+  episode: string[];
+  url: string;
+  created: string;
+};
+
+export type LocationType = {
+  id: number;
+  name: string;
+  type: string;
+  dimension: string;
+  residents: string[];
+  url: string;
+  created: string;
+};
+
+export type EpisodeType = {
+  id: number;
+  name: string;
+  air_date: string;
+  episode: string;
+  characters: string[];
+  url: string;
+  created: string;
+};
+
+export type CharacterStatusType = "Alive" | "Dead" | "unknown";
+
+type CharacterGenderType = "Female" | "Male" | "Genderless" | "unknown";
+
+type ExtraDataType = {
+  name: string;
+  url: string;
+};
+
+type ParamsType = {
+  page: number;
+};

Diff for: assets/types/Nullable.ts

@@ -0,0 +1 @@
+export type Nullable<T> = T | null

Diff for: components/Card/Card.tsx

@@ -0,0 +1,31 @@
+import { PropsWithChildren } from "react";
+import styled from "styled-components";
+
+type PropsType = {
+  name: string;
+};
+
+export const Card = (props: PropsWithChildren<PropsType>) => {
+  const { children, name } = props;
+
+  return (
+    <CardBlock>
+      <Name>{name}</Name>
+      {children}
+    </CardBlock>
+  );
+};
+
+const CardBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+  border: 2px solid #facaff;
+  box-shadow: 0 2px 3px 1px #fa52d3;
+  border-radius: 15px;
+`;
+
+const Name = styled.div`
+  font-weight: 600;
+  font-size: 24px;
+`;

Diff for: components/Card/CharacterCard/CharacterCard.tsx

@@ -0,0 +1,34 @@
+import { Card } from "../Card";
+import styled from "styled-components";
+import Image from "next/image";
+import Link from "next/link";
+import aliveStatus from "public/statuses/alive.png";
+import deadStatus from "public/statuses/dead.png";
+import unknownStatus from "public/statuses/unknown.png";
+import {CharacterType} from '../../../assets/api/rick-and-morty-api';
+
+const statusImages = {
+  Alive: aliveStatus,
+  Dead: deadStatus,
+  unknown: unknownStatus,
+};
+
+type PropsType = {
+  character: CharacterType;
+};
+
+export const CharacterCard = (props: PropsType) => {
+  const { id, name, image, status } = props.character;
+
+  return (
+    <Card name={name}>
+      <Link href={`/characters/${id}`}>
+        <ImageBlock src={image} alt={name} width={300} height={300} priority />
+      </Link>
+    </Card>
+  );
+};
+
+const ImageBlock = styled(Image)`
+  object-fit: cover;
+`;

Diff for: components/HeadMeta/HeadMeta.tsx

@@ -0,0 +1,21 @@
+import Head from "next/head";
+
+type PropsType = {
+  title?: string;
+};
+
+export const HeadMeta = (props: PropsType) => {
+  const { title } = props;
+
+  const description = title
+    ? `Rick and Morty ${title.toLowerCase()}`
+    : "Master class for IT-incubator";
+
+  return (
+    <Head>
+      <title>{title ?? "NextJS Master Class"}</title>
+      <meta name="description" content={description} />
+      <link rel="icon" href="/favicon.svg" />
+    </Head>
+  );
+};

Diff for: components/Header/Header.tsx

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import {LinkBlock} from './LinkBlock/LinkBlock';
+
+export const Header = () => (
+    <Navbar>
+        <LinkBlock title={'Characters'}/>
+        <LinkBlock title={'Locations'}/>
+        <LinkBlock title={'Episodes'}/>
+    </Navbar>
+)
+
+const Navbar = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 1280px;
+  max-width: 100%;
+  margin: 0 auto;
+
+  @media (max-width: 700px) {
+    flex-direction: column;
+    text-align: center;
+  }
+`

Diff for: components/Header/LinkBlock/LinkBlock.tsx

@@ -0,0 +1,39 @@
+import Link from "next/link";
+import styled from "styled-components";
+
+type PropsType = {
+  title: string;
+};
+
+export const LinkBlock = (props: PropsType) => {
+  const { title } = props;
+
+  return (
+    <LinkWrapper>
+      <Link href={`/${title.toLowerCase()}`}>
+        <h2>{title} →</h2>
+      </Link>
+    </LinkWrapper>
+  );
+};
+
+const LinkWrapper = styled.div`
+  padding: 20px;
+  border-radius: 12px;
+  border: 1px solid rgba(131, 134, 135, 0);
+
+  & h2 {
+    font-weight: 600;
+    font-size: 28px;
+    margin-bottom: 0.7rem;
+  }
+
+  @media (max-width: 700px) {
+    padding: 4px;
+
+    & h2 {
+      font-weight: 600;
+      font-size: 24px;
+    }
+  }
+`;