Skip to content

kaplanh/Appointment_app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

12 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Appointment App

πŸ‘‰ Click here to see on browser

appointment


What's used in this app ? How use third party libraries Author
lifting state up Take a look at my portfolio
useState() Hook Visit me on Linkedin
react-events
React-Conditional rendering
React-Bootstrap npm i / yarn add react-bootstrap bootstrap
React-icons npm i / yarn add react-icons
props-drilling
Semantic-Commits
Deploy with Netlify

How To Run This Project πŸš€


πŸ’» Install React πŸ‘‡

yarn create react-app .  or npx create-react-app .

πŸ’» Install Sass πŸ‘‡

yarn add sass  or npm i sass

πŸ”΄ Delete these files and delete the importsπŸ‘‡

- App.test.js
- reportWebVitals.js
- setupTests.js
- favicon.ico
- logo192.png
- logo512.png
- manifest.json
- robots.txt

πŸ’» Start the project πŸ‘‡

yarn start or npm start

OR

  • Clone the Repo

    git clone
  • Install NPM packages

    npm install or yarn
  • Run the project

    npm start or yarn start
  • Open the project on your browser

    http://localhost:3000/
  • Enjoy! πŸŽ‰


Project Skeleton

 Appointment App (folder)
|
|----public (folder)
β”‚     └── index.html
|----src (folder)
|    |--- components (folder)
β”‚    β”‚       β”œβ”€β”€ AddModal.jsx
β”‚    β”‚       β”œβ”€β”€ AppointmentList.jsx
β”‚    β”‚       β”œβ”€β”€ Doctors.jsx
β”‚    β”‚
|    |--- helpers (folder)
|    |       |── data.js
β”‚    β”‚
β”‚    |--- pages (folder)
|    |      β”œβ”€β”€ Home.jsx
|    |
β”‚    β”œ--- App.js
β”‚    β”‚--- App.css
β”‚    |--- index.js
β”‚
β”‚
|-- .gitignore
|── package-lock.json
β”œβ”€β”€ package.json
|── README.md
|── yarn.lock



At the end of the project, the following topics are to be covered;

  • Lifting state up

    // src/Home.jsx
        import Doctors from "../components/Doctors";
        import AppointmentsList from "../components/AppointmentsList";
        import { appointmentData } from "../helpers/data";
        import { useState } from "react";
    
        const Home = () => {
            const [appointments, setAppointments] = useState(appointmentData);
            return (
                <main className="text-center mt-2">
                    <h1 className="text-danger display-6">WELLCOME TO OUR HOSPITAL</h1>
                    <Doctors apps={appointments} setApps={setAppointments} />
                    <AppointmentsList apps={appointments} setApps={setAppointments} />
                </main>
            );
        };
    
        export default Home;
    
    
    // src/Doctors.jsx
    const Doctors = ({apps,setApps}) => {
    const [show, setShow] = useState(false);
    const [drName, setDrName] = useState("");
    // const handleImgClick = () => {
    //   setShow(true)
    // }
    return (
    
    
    
        // src/AppointmentList.jsx
        const AppointmentList = ({ apps, setApps }) => {
        console.log(apps);
    
        const handleDelete = (id) => {
            setApps(apps.filter((item) => item.id !== id));
        };
    
        const handleDoubleClick = (id) => {
            setApps(
                apps.map((item) =>
                    item.id === id ? { ...item, consulted: !item.consulted } : item
                )
            );
        };
        console.log(apps);
        return (
        ```
    
    
    
        ```
  • conditional rendering + cconditional Css

    i {apps.length < 1 && (
                <img
                    src="./img/appointment.jpg"
                    width="70%"
                    alt="appointment"
                />
            )}
    
            {apps.map(({ id, patient, consulted, doctor, day }) => (
                <div
                    key={id}
                    className={
                        consulted ? "appointments consulted" : "appointments"
                    }
                    onDoubleClick={() => handleDoubleClick(id)}
                >
                    <Row className="justify-content-between align-items-center">
                        <Col xs={12} sm={12} md={6}>
                            <h4>{patient}</h4>
                            <h5>{doctor}</h5>
                        </Col>
                        <Col>
                            <h5>{day}</h5>
                        </Col>
                        <Col className="text-end">
                            <TiDelete
                                className="text-danger fs-1"
                                type="button"
                                onClick={() => handleDelete(id)}
                            />
                        </Col>
                    </Row>
                </div>
            ))}
  • tiklananin id sine gΓΆre objenin icindeki boolean degeri degiline cevirme toggle yapma

        setApps(
                apps.map((item) =>
                    item.id === id ? { ...item, consulted: !item.consulted } : item
                )
            );
        };
  • tiklananin id sine gΓΆre filter ile silme

        const handleDelete = (id) => {{
            setApps(apps.filter((item) => item.id !== id));
        };
  • Css ::after

    .consulted::after {
        content: "CONSULTED";
        background-color: rgb(166, 18, 189);
        color: white;
        font-size: 2rem;
        border-radius: 1rem;
        position: absolute;
        left: 50%;
        top: 50%;
        padding: 0.5rem;
        transform: translate(-50%, -50%);
    }
  • Semantic Commit Messages See how a minor change to your commit message style can make you a better programmer.

    Format: ():

    is optional

    • Example
                feat: add hat wobble
        ^--^  ^------------^
        |     |
        |     +-> Summary in present tense.
        |
        +-------> Type: chore, docs, feat, fix, refactor, style, or test.
    
  • More Examples: - feat: (new feature for the user, not a new feature for build script) - fix: (bug fix for the user, not a fix to a build script) - docs: (changes to the documentation) - style: (formatting, missing semi colons, etc; no production code change) - refactor: (refactoring production code, eg. renaming a variable) - test: (adding missing tests, refactoring tests; no production code change) - chore: (updating grunt tasks etc; no production code change)


Feedback and Collaboration

I value your feedback and suggestions. If you have any comments, questions, or ideas for improvement regarding this project or any of my other projects, please don't hesitate to reach out. I'm always open to collaboration and welcome the opportunity to work on exciting projects together. Thank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!

βŒ› Happy Coding ✍