Skip to content

Commit

Permalink
feat: ✨ Added route graphql list all
Browse files Browse the repository at this point in the history
  • Loading branch information
senixcode committed Mar 26, 2021
1 parent e4f6a18 commit fd08fa4
Show file tree
Hide file tree
Showing 17 changed files with 736 additions and 38 deletions.
7 changes: 7 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,18 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@apollo/react-hooks": "^4.0.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"apollo-boost": "^0.4.9",
"bootswatch": "^4.6.0",
"graphql": "^15.5.0",
"graphql-tag": "^2.11.0",
"react": "^17.0.2",
"react-apollo": "^3.1.5",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
Expand Down
25 changes: 6 additions & 19 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,11 @@
import logo from './logo.svg';
import './App.css';

import { Router } from "./Route";
import { Navigation } from "./componentes/common/Navbar";
import "bootswatch/dist/darkly//bootstrap.min.css";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
<Router>
<Navigation />
</Router>
);
}

Expand Down
21 changes: 21 additions & 0 deletions src/Route.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { ListAllPage } from "./pages/listAll.page";
import { ProjectManangerPage } from "./pages/project.page";

export function Router({ children }) {
return (
<BrowserRouter>
{children}
<div className="container p4">
<Switch>
<Route exact path="/" component={ListAllPage} />
<Route
exact
path="/mananger-project"
component={ProjectManangerPage}
/>
</Switch>
</div>
</BrowserRouter>
);
}
7 changes: 7 additions & 0 deletions src/componentes/atoms/LinkCustom.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from "react";

export const LinkCustom = ({ name, href }) => (
<a href={href} className="card-link">
{name}
</a>
);
33 changes: 33 additions & 0 deletions src/componentes/common/Navbar.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from "react";
import { Link } from "react-router-dom";

export const Navigation = () => (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container-fluid">
<Link className="navbar-brand" to="/">
<img src="https://www.senixcode.dev/static/my-logo-senixcode.svg" alt="" width="30" height="24"></img>
</Link>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavAltMarkup">
<div className="navbar-nav">
<Link className="nav-link active" aria-current="page" to="/">
Home
</Link>
<Link className="nav-link" to="/mananger-project">
Project
</Link>
</div>
</div>
</div>
</nav>
);
36 changes: 36 additions & 0 deletions src/componentes/containers/Card.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import React from "react";
import { LinkCustom } from "../atoms/LinkCustom";

export const Card = ({ title, subtitle, description, links,language }) => {
return (
<div className="card" style={{ maxWidth: "16em" }}>
<div className="card-body">
<Title title={title}/>
<h6 className="card-subtitle mb-2 text-muted">{!language ? subtitle: `${subtitle} - ${language}` }</h6>
<Description description={description} />
<Links links={links} />
</div>
</div>
);
};

const Title = ({ title }) => {
if (!title) return <span></span>;
return <h5 className="card-title">{title}</h5>
};

const Description = ({ description }) => {
if (!description) return <span></span>;
return <p className="card-text">{description}</p>;
};

const Links = ({ links }) => {
if (!links) return <span></span>;
return (
<>
{links.map(({ id, name, href }) => (
<LinkCustom key={id} name={name} href={href} />
))}
</>
);
};
38 changes: 38 additions & 0 deletions src/componentes/helpers/fieldsCardsHome.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
export const fieldLanguage = {
language: "language",
};

export const fieldsProjects = {
title: "title",
subtitle: "__typename",
description: "summary",
links: "linksParse",
};

export const fieldsAboutMe = {
title: false,
subtitle: "__typename",
description: "name",
links: false,
};

export const fieldsTopics = {
title: "name",
subtitle: "__typename",
description: false,
links: false,
};

export const fieldsLinks = {
title: "name",
subtitle: "__typename",
description: "href",
links: false,
language: "icon",
};
export const fieldsRoutes = {
title: "title",
subtitle: "__typename",
description: "path",
links: false,
};
20 changes: 20 additions & 0 deletions src/graphql/fragments/projectFields.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import {gql} from "apollo-boost"
export const PROJECT_FIELDS = gql`
fragment project_data on Project{
id
title
titleSeo
summary
descriptionParse
topicsParse {
id
name
}
linksParse {
id
name
href
}
language
}
`
10 changes: 10 additions & 0 deletions src/graphql/querys/aboutMeQuery.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { gql } from "apollo-boost";
export const GET_ABOUTME = gql`
{
allAboutMe {
id
name
language
}
}
`;
11 changes: 11 additions & 0 deletions src/graphql/querys/linksQuerys.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { gql } from "apollo-boost";
export const GET_LINKS = gql`
{
links {
id
name
href
icon
}
}
`;
10 changes: 10 additions & 0 deletions src/graphql/querys/projectQuery.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { PROJECT_FIELDS } from "../fragments/projectFields";
import { gql } from "apollo-boost";
export const GET_PROJECTS = gql`
${PROJECT_FIELDS}
{
projects {
...project_data
}
}
`;
12 changes: 12 additions & 0 deletions src/graphql/querys/routesQuery.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { gql } from "apollo-boost";
export const GET_ROUTES = gql`
{
routes {
id
path
title
description
language
}
}
`;
9 changes: 9 additions & 0 deletions src/graphql/querys/topicsQuery.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { gql } from "apollo-boost";
export const GET_TOPICS = gql`
{
topics {
id
name
}
}
`;
22 changes: 15 additions & 7 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "@apollo/react-hooks";

const client = new ApolloClient({
uri: "http://localhost:4000/graphql",
});

ReactDOM.render(
<React.StrictMode>
<App />
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</React.StrictMode>,
document.getElementById('root')
document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
Expand Down
90 changes: 90 additions & 0 deletions src/pages/listAll.page.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import React from "react";
import { useQuery } from "@apollo/react-hooks";
import { GET_PROJECTS } from "../graphql/querys/projectQuery";
import { GET_ABOUTME } from "../graphql/querys/aboutMeQuery";
import { Card } from "../componentes/containers/Card";
import { fieldLanguage, fieldsAboutMe, fieldsLinks, fieldsProjects, fieldsRoutes, fieldsTopics } from "../componentes/helpers/fieldsCardsHome";
import { GET_TOPICS } from "../graphql/querys/topicsQuery";
import { GET_LINKS } from "../graphql/querys/linksQuerys";
import { GET_ROUTES } from "../graphql/querys/routesQuery";


export const ListAllPage = () => {
const {
loading: loadingAboutme,
error: errorAboutme,
data: dataAboutMe,
} = useQuery(GET_ABOUTME);
const {
loading: loadingProjects,
error: errorProjects,
data: dataProjects,
} = useQuery(GET_PROJECTS);

const {
loading: loadingTopics,
error:errorTopics,
data: dataTopics,
} = useQuery(GET_TOPICS);

const {
loading: loadingLinks,
error:errorLinks,
data: dataLinks,
} = useQuery(GET_LINKS);

const {
loading: loadingRoutes,
error:errorRoutes,
data: dataRoutes,
} = useQuery(GET_ROUTES);

if (loadingAboutme || loadingProjects || loadingTopics || loadingLinks || loadingRoutes) return <p>Loading Message</p>;
if (errorAboutme || errorProjects || errorTopics || errorLinks || errorRoutes) return <p>Error!!</p>;


return (
<>
<Cards
items={dataAboutMe.allAboutMe}
field={{ ...fieldsAboutMe, ...fieldLanguage }}
/>
<Cards
items={dataProjects.projects}
field={{ ...fieldsProjects, ...fieldLanguage }}
/>
<Cards
items={dataTopics.topics}
field={fieldsTopics}
/>

<Cards
items={dataLinks.links}
field={fieldsLinks}
/>
<Cards
items={dataRoutes.routes}
field={{ ...fieldsRoutes, ...fieldLanguage }}
/>
</>
);
};

const Cards = ({ items, field }) => {
if (!items) return <p>Error items Cards</p>;
return (
<div className="row py-2">
{items.map((item) => (
<div key={item.id} className="p-1">
<Card
title={field.title ? item[field.title] : false}
subtitle={item[field.subtitle]}
language={field.language ? item[field.language]: false}
description={field.description ? item[field.description] : false}
links={field.links ? item[field.links] : false}
/>
</div>
))}
</div>
);
};
5 changes: 5 additions & 0 deletions src/pages/project.page.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import React from "react"

export const ProjectManangerPage = () => (
<h1>Project Mananger</h1>
)
Loading

0 comments on commit fd08fa4

Please sign in to comment.