Dev to main (#49)

.env

@@ -0,0 +1,8 @@
+NEXT_PUBLIC_BACKEND_BASE_URL = 'https://staging-skilltree-api.realdevsquad.com/v1'
+NEXT_PUBLIC_RDS_BACKEND_URL='https://staging-api.realdevsquad.com'
+NEXT_PUBLIC_SKILL_TREE_SITE='https://staging-skilltree.realdevsquad.com'
+NEXT_PUBLIC_STATUS_SITE='https://staging-status.realdevsquad.com'
+NEXT_PUBLIC_MEMBERS_SITE='https://staging-members.realdevsquad.com'
+NEXT_PUBLIC_WELCOME_SITE='https://welcome.realdevsquad.com'
+NEXT_PUBLIC_WWW_SITE='https://staging-www.realdevsquad.com'
+NEXT_PUBLIC_MY_SITE='https://staging-my.realdevsquad.com'

.eslintignore

@@ -0,0 +1,8 @@
+.next
+next-env.d.ts
+node_modules
+yarn.lock
+package-lock.json
+public
+README.md
+coverage

.eslintrc.json

@@ -0,0 +1,14 @@
+{
+    "plugins": ["react", "react-hooks", "prettier", "@typescript-eslint"],
+    "extends": ["eslint:recommended", "next", "next/core-web-vitals", "prettier"],
+    "env": {
+        "jest": true
+    },
+    "rules": {
+        "indent": ["error", 4],
+        "quotes": ["error", "double"],
+        "semi": ["error", "always"],
+        "no-unused-vars": "off",
+        "@typescript-eslint/no-unused-vars": "error"
+    }
+}

.github/workflows/pre-commit-checks.yml

@@ -0,0 +1,41 @@
+name: Pre-commit checks
+
+on:
+    pull_request:
+        branches: ["*"]
+
+jobs:
+    pre-commit-checks:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Check out code
+              uses: actions/checkout@v3
+
+            - name: Set up Node.js
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 18
+
+            - name: Cache Node.js dependencies
+              uses: actions/cache@v3
+              with:
+                  path: ~/.npm
+                  key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+                  restore-keys: |
+                      ${{ runner.os }}-node-
+
+            - name: Install dependencies
+              run: yarn
+
+            - name: Type check
+              run: yarn check-types
+
+            - name: Lint check
+              run: yarn check-lint
+
+            - name: Prettier check
+              run: yarn check-format
+
+            - name: Run tests
+              run: yarn test

.gitignore

@@ -23,6 +23,9 @@ lib-cov
 coverage
 *.lcov
 
+#VS code
+.vscode/
+
 # nyc test coverage
 .nyc_output
 
@@ -73,7 +76,7 @@ web_modules/
 .yarn-integrity
 
 # dotenv environment variable files
-.env
+# .env
 .env.development.local
 .env.test.local
 .env.production.local
@@ -128,3 +131,4 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+.yarnrc.yml

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn run test-all

.prettierignore

@@ -0,0 +1,8 @@
+.next
+next-env.d.ts
+node_modules
+yarn.lock
+package-lock.json
+public
+README.md
+coverage

.prettierrc

@@ -0,0 +1,7 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": false,
+    "printWidth": 120
+}

README.md

@@ -1 +1,30 @@
-# skill-tree-frontend
+# Frontend for Skill-tree 
+
+Display the skills a user has and the endorsements created for adding new skills to users profile.
+
+## Staging Deployed Link 
+https://stag-skill-tree.vercel.app/
+
+## Tech Stack:
+
+- [NextJs v13.4.4 (Reactjs)](https://nextjs.org/)
+- [react-query](https://tanstack.com/query/v3/)
+- [Jest](https://jestjs.io/)
+- [Msw](https://mswjs.io/)
+
+## Setup and running locally
+
+### Prerequisites
+- [Node.js](https://nodejs.org/en/download)
+- Yarn 
+
+### Setup
+- Install local dependencies
+```
+yarn
+```
+- Run development command
+```
+yarn dev
+```
+

__mocks__/db/endorsementDetails.json

@@ -0,0 +1,52 @@
+[
+    {
+        "id": "abc1",
+        "title": "Oppenheimer ✨",
+        "date": "12 Jan 2023",
+        "skills": "Pinning in Rust",
+        "endorsers": ["Vaibhav", "Yash", "Tejas"],
+        "status": "Atomic",
+        "endorsements": [
+            {
+                "id": 1,
+                "name": "Vaibhav",
+                "description": "Lorem ipsum dolor sit amet consectetur. Lacus consequat non porttitor faucibus. Mattis nec felis sagittis justo id volutpat."
+            },
+            {
+                "id": 2,
+                "name": "Yash",
+                "description": "Lorem ipsum dolor sit amet consectetur. Lacus consequat non porttitor faucibus. Mattis nec felis sagittis justo id volutpat. Et ut non semper quam a consectetur Et ut non semper quam a consectetur."
+            },
+            {
+                "id": 3,
+                "name": "Tejas",
+                "description": "Lorem ipsum dolor sit amet consectetur. Lacus consequat non porttitor faucibus. Mattis nec felis sagittis justo id volutpat. Et ut non semper quam a consectetur Et ut non semper quam a consectetur."
+            }
+        ]
+    },
+    {
+        "id": "abc2",
+        "title": "Oppenheimer ✨",
+        "date": "12 Jan 2023",
+        "skills": "Pinning in Rust",
+        "endorsers": ["Vaibhav", "Yash", "Tejas"],
+        "status": "Atomic",
+        "endorsements": [
+            {
+                "id": 1,
+                "name": "Vaibhav",
+                "description": "Lorem ipsum dolor sit amet consectetur. Lacus consequat non porttitor faucibus. Mattis nec felis sagittis justo id volutpat. Et ut non semper quam a consectetur Et ut non semper quam a consectetur."
+            },
+            {
+                "id": 2,
+                "name": "Yash",
+                "description": "Lorem ipsum dolor sit amet consectetur. Lacus consequat non porttitor faucibus. Mattis nec felis sagittis justo id volutpat."
+            },
+            {
+                "id": 3,
+                "name": "Tejas",
+                "description": "Cat milk copy park pee walk owner escape bored tired cage droppings sick vet vomit cough hairball, eat toilet paper. Pounce on unsuspecting person i is not fat, i is fluffy. Whenever a door is opened, rush in before the human."
+            }
+        ]
+    }
+]

__mocks__/endorsements.js

@@ -0,0 +1,35 @@
+export const endorsementsListsMock = [
+    {
+        id: 1,
+        endorserName: "Prakash",
+        skill: "usestate",
+        color: "green",
+    },
+    {
+        id: 2,
+        endorserName: "vaibhav",
+        skill: "pinning",
+        color: "blue",
+    },
+    {
+        id: 3,
+        endorserName: "Yash Raj",
+        skill: "useEffect",
+        color: "yellow",
+    },
+];
+
+export const skillMockData = [
+    {
+        id: 1,
+        skill: "React",
+    },
+    {
+        id: 2,
+        skill: "Go",
+    },
+    {
+        id: 3,
+        skill: "Vanilla JS",
+    },
+];

__mocks__/handler.js

@@ -0,0 +1,4 @@
+import { endorsementsHandler } from "./handlers/endorsements.handler";
+
+const handlers = [...endorsementsHandler];
+export default handlers;

__mocks__/handlers/endorsements.handler.js

@@ -0,0 +1,9 @@
+import { rest } from "msw";
+import { BASE_URL } from "@/constants/urls";
+import endorsementDetails from "../db/endorsementDetails.json";
+
+export const endorsementsHandler = [
+    rest.get(`${BASE_URL.dev}/endorsements`, (req, res, ctx) => {
+        return res(ctx.status(200), ctx.json(endorsementDetails));
+    }),
+];